JQ实现放大镜效果

最新推荐文章于 2020-08-28 14:01:38 发布

宇恒ngIf

最新推荐文章于 2020-08-28 14:01:38 发布

阅读量1k

点赞数

分类专栏： JQ 文章标签： JQ 放大镜效果

本文链接：https://blog.csdn.net/qq_36369717/article/details/53184846

版权

JQ 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
           #box {
               width: 400px;
               height: 400px;
               border: 5px solid #ddd;
               margin: 100px auto;
               position: relative;
           }
           #box .simg {
               width: 400px;
               height: 400px;
               position: relative;

           }
           #box .simg .move {
               width: 100px;
               height: 100px;
               background: rgba(255,255,255,0.5);
               border: 1px solid #000;
               position: absolute;
               left: 0;
               top: 0;
               display: none;
           }
           #box .simg .shade {
               width: 100%;
               height: 100%;
               position: absolute;
               left: 0;
               top: 0;
               background: rgba(0,0,0,0);
           }
           #box .bimg {
               width: 300px;
               height: 300px;
               background: red;
               position: absolute;
               left: 430px;
               top: 50px;
               overflow: hidden;
               display: none;
           }

           #box .bimg img {
               position: absolute;
           }

       </style>

   </head>

   <body>
       <div id="box">
           <div class="simg">
               <img src="img/simg.jpg" />
               <span class="move"></span>
               <span class="shade"></span>
            </div>

           <div class="bimg">
               <img src="img/bimg.jpg" />
           </div>

       </div>

       <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
       <script type="text/javascript">
           //鼠标移动到遮罩层上显示小区块跟大图
           $("#box .shade").hover(function(){
               $("#box .move").show();
               $("#box .bimg").show();
           },function(){ //鼠标移出到遮罩层上隐藏小区块跟大图
               $("#box .move").hide();
               $("#box .bimg").hide();
           });

           //让透明的小区块跟随鼠标的位置移动
           $("#box .shade").mousemove(function(e){

               var $x = e.clientX;//鼠标与浏览器X轴的距离
               var $y = e.clientY;//鼠标与浏览器Y轴的距离
               var $l = $("#box").offset().left; //获取BOX与浏览器窗口左边的距离   offset设置盒子的位子
               var $t = $("#box").offset().top; //获取BOX与浏览器窗口上边的距离

               //小区块的长度
               var $w = $("#box .move").width()/2;
               //小区块的高度
               var $h = $("#box .move").height()/2;
               var $left = $x - $l - $w; //透明小区块左面的距离
               var $top = $y - $t - $h; //透明小区块上面的距离
               //alert($left+":"+$top)

               //做判断，不能让透明区块移出去
               if($top < 0){ //不让他从上面跟下面出去
                   $top = 0;
                   }else if($top > ($("#box .shade").height() - $h * 2 - 2)){
                       $top = $("#box .shade").height() - $h * 2 - 2;
                   };

               if($left < 0){//不让他从左面跟右面出去
                   $left = 0;
                   }else if($left > ($("#box .shade").width() - $w * 2 - 2)){
                       $left = $("#box .shade").width() - $w * 2 - 2;
                   }
               //跟随鼠标移动
               $("#box .move").css({left:$left,top:$top});

               var $yd_w = $("#box .shade").width() - $w * 2; //透明区块能滑动的最大宽度
               var $yd_h = $("#box .shade").height() - $h * 2; //透明区块能滑动的最大高度


               //滑动宽度的比例
               var $yd_wbl = $left / $yd_w;
               //滑动高度的比例
               var $yd_hbl = $top / $yd_h;

               var $big_left = ($("#box .bimg img").width() - $("#box .bimg").width()) * $yd_wbl; //大图对应的左面的距离
               var $big_top = ($("#box .bimg img").height() - $("#box .bimg").height()) * $yd_hbl; //大图对应的上面的距离

               //alert($big_left+":"+$big_top)

               $("#box .bimg img").css({left:-$big_left,top:-$big_top});

           });
       </script>

   </body>

</html>

hover() 有两个参数 over,out

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

另外说一下 pageX/Y 和 clientX/Y 的区别(本文未运用)

screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。

clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。

pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动