2019-06-19 放大镜效果
2019-06-19 本文已影响0人
DreamNeverDie
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.bk-linear {background:-webkit-linear-gradient(45deg, red 0 ,blue 50% ,yellow 100%);}
.div1,.div2 {float:left; width:400px;height:400px;overflow:hidden;position:relative;}
.div2 {margin-left:30px;display:none;}
.mask {width:200px;height:200px;background:yellow;opacity:0.3;position:absolute;left:0; top:0;display:none;}
.cover {position:absolute;left:0;top:0; z-index:9; width:100%;height:100%;}
.div2 span {position:absolute;left:0;top:0;width:1000px;height:1000px;}
</style>
</head>
<body>
<div class="div1 bk-linear">
<div class="mask"></div>
<div class="cover"></div>
</div>
<div class="div2">
<span class="bk-linear"></span>
</div>
<script>
let div1=document.querySelector('.div1');
let mask=document.querySelector('.mask');
let div2=document.querySelector('.div2');
let img=document.querySelector('.div2 span');
div1.onmouseover=function (){
mask.style.display='block';
div2.style.display='block';
};
div1.onmouseout=function (){
mask.style.display='none';
div2.style.display='none';
};
div1.onmousemove=function (ev){
let left=ev.offsetX-mask.offsetWidth/2;
let top=ev.offsetY-mask.offsetHeight/2;
if(left<0){
left=0;
}
if(left>div1.offsetWidth-mask.offsetWidth){
left=div1.offsetWidth-mask.offsetWidth;
}
if(top<0){
top=0;
}
if(top>div1.offsetHeight-mask.offsetHeight){
top=div1.offsetHeight-mask.offsetHeight;
}
mask.style.left=left+'px';
mask.style.top=top+'px';
// mask.style.left=ev.pageX-div1.offsetLeft-mask.offsetWidth/2+'px';
// mask.style.top=ev.pageY-div1.offsetTop-mask.offsetHeight/2+'px';
//蓝=红*黑2/黑1
let x=left*(img.offsetWidth-div2.offsetWidth)/(div1.offsetWidth-mask.offsetWidth);
let y=top*(img.offsetHeight-div2.offsetHeight)/(div1.offsetHeight-mask.offsetHeight);
img.style.left=-x+'px';
img.style.top=-y+'px';
};
</script>
</body>
</html>
