放大镜

最新推荐文章于 2021-11-25 23:50:23 发布

谁牵引了你的泪

最新推荐文章于 2021-11-25 23:50:23 发布

阅读量185

点赞数

分类专栏： javascript 文章标签：非常精准的放大镜效果

本文链接：https://blog.csdn.net/king_spunch/article/details/51779880

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>放大镜效果</title>
   <style>
   *{
       margin:0;
       padding:0;
   }
   #box{
       position:fixed;
       left:200px;
       top:100px;
       width:460px;
       height:730px;
       background:#ccc;
   }
   #shelter{
       position:absolute;
       width:460px;
       height:730px;
       border:1px solid #f00;
   }
   #shelter img{
       width:460px;
       height:730px;
   }
   #move{
       position:absolute;
       top:0;
       left:0;
       width:150px;
       height:250px;
       background:#333;
       filter:alpha(opacity=20);
       opacity:0.2;
   }
   #magnifier{
       position:absolute;
       left:550px;
       top:-50px;
       width:450px;
       height:750px;
       border:1px solid #0f0;
       overflow:hidden;
   }
   #magnifier img{
       position:absolute;
       left:0;
       top:0;
       width:1380px;
       height:2190px;
   }
   </style>
</head>
<body>
   <div id="box">
       <div id="shelter">                
           <img src="images/1.jpg" />
           <div id="move"></div>
       </div>
       <div id="magnifier">
           <img src="images/1.jpg" />
       </div>
   </div>
</body>
<script>
var oBox=document.getElementById('box');
   var oShelter=document.getElementById('shelter');
   var oMove=document.getElementById('move');
   var oMagnifier=document.getElementById('magnifier');
   //var aImg=oMagnifier.getElementsByTagName('img');

   oShelter.οnmοusemοve=function(ev){
       var ev=ev||event;                //事件对象，存放事件的相关信息

       var oW=oMove.offsetWidth/2;
       var oH=oMove.offsetHeight/2;
       //alert(oH);
       var subX=ev.clientX-oBox.offsetLeft-oW;
       var subY=ev.clientY-oBox.offsetTop-oH;
       //alert(oBox.offsetLeft)

       oMove.style.left=subX+'px';   //指针在滑块中央显示
       oMove.style.top=subY+'px';
       //alert(oW);

       if(oMove.offsetLeft<=0){          //滑块的临界条件左侧：left<0 left=0 上 top<0 top=0 右 left > 大宽度-小宽度
           oMove.style.left=0+'px';
       }                                  //left = 大宽度-小宽度下 top > 大高度 -小高度 top = 大高度 -小高度
       if(oMove.offsetTop>=oShelter.offsetHeight-oMove.offsetHeight){
           oMove.style.top=oShelter.offsetHeight-oMove.offsetHeight+'px';
       }
       if(oMove.offsetTop<=0){
           oMove.style.top=0+'px';
       }
       if(oMove.offsetLeft>=oShelter.offsetWidth-oMove.offsetWidth){
           oMove.style.left=oShelter.offsetWidth-oMove.offsetWidth+'px';
       }

       var x=oMove.offsetLeft/oShelter.offsetWidth;         //比例：滑块的left/遮罩层宽度*大Img宽度=大Img的left
       var y=oMove.offsetTop/oShelter.offsetHeight;         //同理
       oMagnifier.children[0].style.left=-(oMagnifier.children[0].offsetWidth*x)+'px';
       oMagnifier.children[0].style.top=-(oMagnifier.children[0].offsetHeight*y)+'px';
       //alert(y);
   }

</script>
</html>