SMALL
연습1
<style>
* {
margin: 0;
padding:0;
}
.box {
height: 3000px;
background-image: linear-gradient(0deg, red, yellow);
/* 0deg --- 6시방향에서 12시방향으로 그라데이션이 생성됨 */
}
.child {
width: 100px;
height: 100px;
background-color: #0f0;
position: absolute;
left:500px;
top:700px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">박스</div>
</div>
<!-- jquery loading -->
<script src="jquery/jquery-3.6.4.min.js"></script>
<script>
// 스크롤바 = 창이 가지고있음
// 창 = window = $(window) = jQuery(window)
// 일부요소 = element가 가지고있는 상태두 존재함.
let s_yPos = $(window).scrollTop(); // 현재스크롤바의 위치값 가져와서 저장
console.log(s_yPos);
//
let child_offset = $('.child').offset();
let child_top = $('.child').offset().top;
let child_left = $('.child').offset().left;
console.log(child_top);
console.log(child_left);
let w_w = $(window).width();
let w_h = $(window).height();
console.log(w_w); // 현재창의 뷰포트 가로크기
console.log(w_h); // 현재창의 뷰포트 세로크기
// 스크롤 이벤트 생성
// 스크롤 이벤트 = scroll
$(window).on('scroll', function(){
// 스크롤이벤트가 있는경우 스크롤바의 위치값 저장
let yPos = $(window).scrollTop();
console.log(yPos);
});
// 윈도우 사이즈 변경 이벤트 생성
// 사이즈변경 = resize
$(window).on('resize', function(){
let w = $(window).width();
let h = $(window).height();
console.log(w + 'and' + h);
});
</script>
LIST
'프론트엔드 개발자 > JS' 카테고리의 다른 글
| 자바스크립트 javascript 12. (3) 애니메이션을 활용하여 스크롤에 위치했을때 생겨나는 애니메이션 코드 (0) | 2023.04.13 |
|---|---|
| 자바스크립트 javascript 12. (2) 움직이면 고정되는 스크롤바 만들기 (0) | 2023.04.13 |
| 자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리(4) swiper 자바스크립트 애니메이션, 수정하기 (0) | 2023.04.13 |
| 자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리(3) 클론코딩 연습하기 (0) | 2023.04.13 |
| 자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리!!!!!!!(2) (0) | 2023.04.10 |
댓글