使用jQuery的事件对象实现图片跟随鼠标移动的效果

原创于 2021-07-21 10:35:39 发布 · 472 阅读

CC 4.0 BY-SA版权

文章标签：

这篇博客展示了如何使用jQuery实现一种交互效果：当鼠标移到小图上时，大图出现并跟随鼠标移动。通过绑定mouseover、mouseout和mousemove事件，实现了小图和大图之间的联动显示和移动。代码中，大图的位置通过调整offset来实现与鼠标位置的同步，创建了一个动态的查看体验。

运行结果如下：

随着鼠标进入小图移动，大图会出现并随着鼠标的移动而移动。

代码如下：

<html>

    <head>

        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

        <script type="text/javascript">

            $(function(){

                //小图分别绑定鼠标移入、鼠标移出和鼠标移动事件

                $("#small").bind("mouseover mouseout mousemove",function(event){

                    if(event.type=="mouseover"){

                        $("#showBig").show();

                    }else if(event.type=="mouseout"){

                        $("#showBig").hide();

                    }else if(event.type=="mousemove"){

                        //鼠标移动时会进入大图  绑定在小图上面的事件就

                        //起不了作用  因此在获取的值上加10

                        $("#showBig").offset({

                            //获取到鼠标的坐标

                            left: event.pageX+10,

                            top:  event.pageY+10

                        });

                    }

                })

            })

        </script>

        <style type="text/css">

            body{text-align: center;}

            #small{margin-top: 150px;}

            #showBig{

                position: absolute;

                display: none;

                }

        </style>

    </head>

    <body>

        <img id="small" src="1.jpg" width="300px">

        <div id="showBig">

            <img src="1.jpg" width="450px"/>

        </div>

    </body>

</html>