放大镜jquery

来源：互联网发布：工商网络监管情况编辑：程序博客网时间：2024/05/17 22:37
<!DOCTYPE html><html>    <head>        <meta charset="utf-8"/>        <title>jQuery事件处理</title>        <style>           #did{width:300px;height:300px;border:1px solid #ddd;overflow:hidden;position:absolute;display:none;}        </style>    </head>    <body>        <h2>jQuery事件处理--图片的放大镜</h2>         <img id="mid" src="./img/Meinv121.jpg" width="384"/>         <div id="did">            <img src="./img/Meinv121.jpg"/>         </div>        <script src="./jquery-3.2.1.min.js" type="text/javascript"></script>        <script>            //获取被放大的图片并绑定三个事件            $("#mid").mouseover(function(){                //获取当前mid的信息                var position = $(this).position();                //定位被放大图片位置                $("#did").css({top:position.top+"px",left:position.left+$(this).width()+5+"px"}).show();            }).mouseout(function(){                $("#did").hide();            }).mousemove(function(e){                //获取当前mid的信息                var position = $(this).position();                //计算鼠标在图片上的位置                var x = e.pageX - position.left;                var y = e.pageY - position.top;                //设置被放大图片的滚动位置                $("#did").scrollTop(y*5-150).scrollLeft(x*5-150);            });        /*           //获取被放大图片           var mid = document.getElementById("mid");           //获取放大镜           var did = document.getElementById("did");           //对mid添加鼠标移入和移出事件           mid.onmouseover = function(){               //定位放大镜位置               did.style.top = this.offsetTop+"px";               did.style.left = this.offsetLeft+this.offsetWidth+5+"px";               did.style.display = "block";           }           //移出隐藏放大镜           mid.onmouseout = function(){               did.style.display = "none";           }           //添加移动事件           mid.onmousemove = function(ent){              //获取兼容的事件               var event = ent || window.event;              //获取鼠标在图片上的位置              var x = event.clientX-this.offsetLeft;              var y = event.clientY-this.offsetTop;              //定位放大镜图片滚动位置              did.scrollLeft = x*5-150;              did.scrollTop = y*5-150;           }        */        </script>    </body></html>
阅读全文
0 0