jQuery实现放大镜效果

最新推荐文章于 2020-09-24 22:18:00 发布

原创最新推荐文章于 2020-09-24 22:18:00 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

前端同时被 2 个专栏收录

35 篇文章

订阅专栏

jQuery

9 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的图片放大镜效果。通过鼠标在图片上的移动来改变放大区域的位置，实现了图片局部放大的功能。文章包含完整的HTML、CSS及jQuery代码。

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #did {
                width: 300px;
                height: 300px;
                border: 1px solid blue;
                overflow: hidden;
                display: none;
                position: absolute;
            }
        </style>
        <script src="./jquery-2.2.4.min.js"></script>
    </head>

    <body>
        <h2 id="hid">jquery实例--放大镜效果</h2>
        <img id="mid" src="./images/33.jpg" width="384" />
        <div id="did">
            <img src="./images/33.jpg" />
        </div>

        <script type="text/javascript">
            //当鼠标在图片上、在图片上面移动、离开图片时的操作
            $("#mid").mouseover(
                function(){
                    //获取被放大图片定位对象
                    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){
                    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);

});
        </script>
    </body>

</html>

这里写图片描述