放大镜jquery

最新推荐文章于 2023-01-14 21:47:59 发布

wuyoulv

最新推荐文章于 2023-01-14 21:47:59 发布

阅读量239

点赞数

分类专栏：虚拟主机配置相关 jquery 文章标签： jquery 放大镜

本文链接：https://blog.csdn.net/wuyoulv/article/details/73478493

版权

虚拟主机配置相关同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

<!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>

wuyoulv

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
放大镜jquery

<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>jQuery事件处理</title> <style> #did{width:300px;height:300px;border:1px solid #ddd;overflow:hidden;positi
复制链接

扫一扫

专栏目录