做个放大镜看看?

最新推荐文章于 2022-12-06 10:30:33 发布

Gnijooo

最新推荐文章于 2022-12-06 10:30:33 发布

阅读量102

点赞数

本文链接：https://blog.csdn.net/weixin_45558480/article/details/107774056

版权

近视好帮手(●’◡’●)

在这里插入图片描述

先编写简单的html页面

<body>
    <div id="small">
        <img src="2.jpg" alt="Jackson">
        <div id="mark"></div>
    </div>
    <div id="big">
        <img src="2.jpg" alt="Jackson">
    </div>
</body>

引入js

 <style>
        body{background-color: grey;}
        #small{width: 225px;height: 288px;border:black 1px solid;position: absolute;left:100px;top: 50px;}
        #small img{width: 100%;height: 100%;}
        #big img{width: 900px;height: 1150px;position: absolute;}
        #big{display:none;overflow:hidden;width: 400px;height: 400px;position: absolute;left:400px;top:50px;border: 1px solid black;}
        #mark{display:none;width:100px;height:100px;background-color: white;opacity: 0.5;filter:alpha(opacity=50);
              position: absolute;left:0px;top: 0px;}
 </style>

实现放大镜功能（限制出界）

<script src="jquery-3.5.1.js"></script>
    <script>
        $(function(){
            $("#small").mouseenter(function(){
                $("#mark,#big").show()
              }).mouseleave(function(){
                $("#mark,#big").hide()
              }).mousemove(function(ev){
                  var l = ev.pageX-$(this).offset().left-50;
                  var t = ev.pageY-$(this).offset().top-50;
                  if(l<=0){//限制出界
                      l=0;
                      }
                  if(l>=125){
                      l=125;
                      }
                  if(t<=0){
                      t=0;
                      }
                  if(t>=188){
                      t=188;
                      }
                  $("#mark").css({
                      left:l,
                      top:t
                  })
                  $("#big img").css({//注意是反向增大
                      left: -4 * l,
                      top: -4 * t
                  })
              })
        })
    </script>