jQuery_事件_图片跟随

Posted 葡萄籽-June

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery_事件_图片跟随相关的知识,希望对你有一定的参考价值。

jQuery_事件_图片跟随

本文主要通过对事件的 学习与了解的实践。主要是使用bind 同时对多个事件绑定同一个函数,获取当前操作是哪一个事件,并响应。


样式结果

放大的图片会随着鼠标的移动而跟随。

核心代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>图片跟随</title>
    <script src="../jQuery/jquery-3.5.1.min.js"></script>
    <style>
        * 
            margin: 0 auto;
        

        #small 
            display: block;
            width: 100px;
            height: 100px;
            position: absolute;
            margin: 300px auto;
            margin-left: 50%;
        

        #showBig 
            width: 300px;
            height: 300px;
            display: none;
        

        #showBig img 
            display: block;
            width: 300px;
            height: 300px;
        
    </style>
    <script>
        $(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") //频率很高
                    $("#showBig").offset(
                        left: event.pageX + 20,
                        top: event.pageY + 20
                    );
                
            );
        );
    </script>
</head>

<body>
    <img id="small" src="demo.webp" alt="头顶彩虹圈圈、满眼甜甜圈、可爱的小绿豆在笑~">

    <div id="showBig">
        <img src="demo.webp">
    </div>

</body>

</html>

以上是关于jQuery_事件_图片跟随的主要内容,如果未能解决你的问题,请参考以下文章

jQuery_事件_图片跟随

jQuery实际案例⑥——图片跟随鼠标五角星评分案例

如何实现图片加载中,会有一个圈圈在动的效果

圈圈.文件目录

圈圈.ZC问题

js图片跟随鼠标移动