jQuery使用鼠标事件实现图片跟随效果 / 开普饭

前段时间学习完jQuery中的show()、hide()函数后，又学习到了很多其他函数
最近接触到了鼠标事件中的mouseover()和mouseout()函数，于是结合两者做了一个图片跟随的练习，以下为完整代码：

小提示：代码中的图片可以在此链接图片跟随案例图片中获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片跟随</title>
    <style type="text/css">
        body {
            text-align: center;
        }

        #small {
            margin-top: 150px;
        }

        #showBig {
            position: absolute;
            display: none;
        }
    </style>
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#small")
                // 当鼠标移至小图片的时候显示大图片
                .mouseover(function () {
                    $("#showBig").show();
                })
                // 当鼠标在小图片中移动的同时设置大图片对于当前视口的相对偏移量。
                .mousemove(function (event) {
                    // 设置大图片的偏移量offset中必需规定以像素计的top和left坐标。
                    // 获取到小图片event事件中pageX/pageY鼠标相对于文档的左/右边缘的位置。
                    // 并同时赋值给大图片offset的top和left坐标值以达到移动跟随的效果
                    $("#showBig").offset({top: event.pageY + 10, left: event.pageX + 10});
                })
                // 当鼠标移出小图片的时候隐藏大图片
                .mouseout(function () {
                    $("#showBig").hide();
                });
        });
    </script>
</head>
<body>
<img id="small" src="img/small.jpg"/>
<div id="showBig">
    <img src="img/big.jpg">
</div>
</body>
</html>

jQuery使用鼠标事件实现图片跟随效果

代码运行效果：

相关推荐