原生JS实现放大镜效果

最新推荐文章于 2021-05-28 22:18:33 发布

chumuzhi8647

最新推荐文章于 2021-05-28 22:18:33 发布

阅读量120

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3716995/blog/3031350

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
       * {
           margin:0;
           padding:0;
       }
       .box {
           width:450px;
           height:450px;
           position: relative;
           border:5px solid #999;
       }
       .smallBox {
           position: absolute;
           left:0;
           top:0;
       }
       .cover {
           width:300px;
           height:300px;
           background: yellow;
           opacity: 0.5;
           filter: alpha(opacity=50);
           position:absolute;
           left:0;
           top:0;
           display: none;
           cursor: move;
           margin-top: -150px;
           margin-left: -150px;
       }
       .bigBox {
           width:540px;
           height:540px;
           border:5px solid #999;
           position: absolute;
           top:0;
           left:480px;
           overflow: hidden;
           display: none;
       }
       .bigBox img {
           position: absolute;
       }
   </style>
</head>
<body>
   <div class="box" id="box">
       <div class="smallBox">
           <img src="small.jpg" alt="">
       </div>
       <div class="cover"></div>
       <div class="bigBox">
           <img src="big.jpg" alt="">
       </div>
   </div>
   <script type="text/javascript" src="common.js"></script>
   <script type="text/javascript">
       var evt={
           getEvt:function(e){
               return window.event || e ;
           },
           getScrollLeft:function (){
               return window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
           },
           getScrollTop:function (){
               return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
           },
           getClientX:function(e){
               return this.getEvt(e).clientX
           },
           getClientY:function(e){
               return this.getEvt(e).clientY
           },
           getPageX:function(e){
               return this.getEvt(e).pageX?this.getEvt(e).pageX:this.getScrollLeft()+this.getClientX(e);
           },
           getPageY:function(e){
               return this.getEvt(e).pageY?this.getEvt(e).pageY:this.getScrollTop()+this.getClientY(e);
           }
       }
       var box=my$("box");
       var smallBox=box.children[0]
       var cover=box.children[1]
       var bigBox=box.children[2]
       var bigImg=bigBox.children[0]
       box.οnmοuseοver=function(){
           bigBox.style.display="block"
           cover.style.display="block"
       }
       box.οnmοuseοut=function(){
           bigBox.style.display="none"
           cover.style.display="none"
       }
       box.οnmοusemοve=function(e){
           var coverL=evt.getPageX(e)
           var coverT=evt.getPageY(e)
           if(coverL<150){
               coverL=150
           }
           if(coverT<150){
               coverT=150
           }
           if(coverL>300){
               coverL=300
           }
           if(coverT>300){
               coverT=300
           }
           cover.style.left=coverL+'px'
           cover.style.top=coverT+'px'
           bigImg.style.left=-(26/15)*(coverL-150)+'px'
           bigImg.style.top=-(26/15)*(coverT-150)+'px'
       }
   </script>
</body>
</html>