jQuery 实现鼠标跟随事件

最新推荐文章于 2021-08-04 03:19:32 发布

逆风优雅

最新推荐文章于 2021-08-04 03:19:32 发布

阅读量591

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_44603011/article/details/117778196

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery.min.js"></script>
</head>
<style>
    body{
        /* position: relative; */
        padding: 0;
        margin: 0;
    }
    .div1{
        width: 400px;
        height: 150px;
        border: 8px solid pink;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 80px auto;
    }
    .div2{
        position: absolute; /*其相对定位会定位到HTML*/
        top:0px;
        left: 0px;
        display: none;
    }
</style>
<body>
    <div class="div1">
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2509436306,2383263050&fm=26&gp=0.jpg" width="100px" height="100px" alt="">
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4111337163,479276611&fm=26&gp=0.jpg" width="100px" height="100px" alt="">
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2952405630,698962505&fm=26&gp=0.jpg" width="100px" height="100px" alt="">
    </div>
    <div class="div2">
        <img src="" alt="">
    </div>
</body>
<script>
    //实现思路：当鼠标放到一个图片上时，这个图片的宽高会恢复为原来的大小，
    $('.div1 img').hover(function(){//遍历div1中的img,并注册鼠标滑动事件
        $('.div2').stop().find('img').attr('src',this.src).end().fadeIn(1500)//此处表示当鼠标位于div1的图片上时,div2中的img,的src会变为div1的img 的 src  
        //attr(key,value) 一般用于设定自定义的属性,设定之后会在元素上面展示，传入一个参数,用于获取属性,传两个参数用于设定属性
    },function(){
        $('.div2').stop().find('img').attr('src','').end().hide(200)//表示当鼠标移除的时候,img的sec,为空
    })
    //注册鼠标跟随事件
    $('.div1 img').mousemove(function(e){
        $('.div2').css({left:e.pageX+15+'px', top:e.pageY+15+'px'}) //注意此处获取鼠标跟随事件，是用的page，page获取到的是鼠标到当前也页面的左上角的距离，此处获取鼠标距离也可使用client
    })
</script>
</html>

重点：page client offset 的区别

逆风优雅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 实现鼠标跟随事件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫