js 모방 경 동 확대경 효과
1.효과 1:마우스 가 지나 가기 전
2.효과 2:마 우 스 를 올 리 고 오른쪽 확대경 팝 업
3,효과 3:작은 상자 에서 마우스 이동,확대경 따라 이동
4.소스 코드 는 다음 과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* */
*{
margin: 0;
padding: 0;
}
/* */
.box1{
position: relative;
width: 450px;
height: 450px;
border: 1px solid #999;
margin-left: 80px;
margin-top: 50px;
}
.box1 .img1{
/* */
width: 450px;
}
/* bg */
.box1_bg{
/* */
display: none;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: yellow;
/* */
opacity: .5 ;
cursor: move;
}
/* */
.big_img{
/* */
display: none;
width: 540px;
height: 540px;
position: absolute;
top: 0;
left: 470px;
border: 1px solid #999;
overflow: hidden;
}
/* */
.big_img .big_imgs{
position: absolute;
top: 0;
left: 0;
width: 800px;
}
</style>
</head>
<body>
<div class="box1">
<img class="img1" src="images/2-1.jpg" alt="#" >
<div class="box1_bg"></div>
<div class="big_img">
<img class="big_imgs" src="images/2.jpg" alt="#" >
</div>
</div>
<!-- JS -->
<script>
// ①
// ② , , --> 2
// ③ 。
// ④ , 。
// ：
var box1 = document.querySelector('.box1');
var bg = document.querySelector('.box1_bg');
var big = document.querySelector('.big_img');
// 1. ，
box1.addEventListener('mouseover',function(){
bg.style.display = 'block';
big.style.display = 'block';
})
// 2. ，
box1.addEventListener('mouseout',function(){
bg.style.display = 'none';
big.style.display = 'none';
})
// 2.
box1.addEventListener('mousemove',function(e){
var x = e.pageX - this.offsetLeft; // x x
var y = e.pageY - this.offsetTop; // y y
// console.log(x ,y)
// ，box1
var max_x = box1.offsetWidth - bg.offsetWidth;
var max_y = box1.offsetHeight - bg.offsetHeight;
if( max_x >=0 )
// *
// X,Y
var X = x - bg.offsetWidth/2;
var Y = y - bg.offsetHeight/2;
// * box1 ，
if(X <= 0 ){
X = 0
}else if( X >= max_x){
X = max_x;
}
if(Y <= 0 ){
Y=0
}else if( Y >= max_y){
Y = max_y;
}
// *
// px
bg.style.left = X +'px';
bg.style.top = Y +'px';
// ， ：big_img_x
// （X）/ （max_x）= （bigX)/ （big_img_x)
//
var big_img = document.querySelector('.big_imgs');
// big_img_x
var big_img_x = big_img.offsetWidth - big.offsetWidth ;
var big_img_y = big_img.offsetWidth - big.offsetWidth ;
// bigX
var bigX = X * big_img_x / max_x ;
var bigY = Y * big_img_y / max_x ;
big_img.style.left = -bigX +'px';
big_img.style.top = -bigY +'px';
})
</script>
</body>
</html>이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
