实现鼠标追随效果

G_uan

于 2021-11-11 15:43:04 发布

阅读量770

点赞数

文章标签： css3 html5 javascript

本文链接：https://blog.csdn.net/G_uan/article/details/121268669

版权

该博客介绍了如何利用HTML5、CSS3和JavaScript实现一个有趣的交互效果：当鼠标移动时，页面上的元素不仅跟随鼠标移动，而且根据鼠标移动的角度在Z轴上进行旋转，并在Y轴上进行翻转。文章详细讲解了HTML布局、JavaScript变量声明、鼠标移动事件监听、坐标计算、角度计算以及元素翻转的实现步骤。

摘要由CSDN通过智能技术生成

呈现效果：

1.页面中的gif动图跟随鼠标移动

2.元素随鼠标移动角度进行z轴旋转以及在方向上进行Y轴上的翻转

HTML代码部分

<head>
  <style>
        .img {
            width: 50px;
            height: 50px;
            background-image: url("goat.gif");
            background-size: cover;
            position: absolute;
        }
    </style>
</head>
<body>
  <div class="img"></div>
</body>

js部分

首先声明变量的部分

    var img = document.querySelector('.img')
    // 定义小图片的旋转角度
    var deg = 0
    // 定义小图片位于网页左侧位置,用来定义图片的距离
    var imgx = 0
    // 定义小图片位于网页顶部位置
    var imgy = 0
    // 定义小图片X轴的位置，图片移动的数值
    var imgl = 0
    // 小图片y轴的位置，图片移动的数值
    var imgt = 0;
    // 定义小图片翻转的角度，y轴上翻转0/-180
    var y = 0;
    //  定义一个计数器
    var index = 0;

1.设置鼠标移动的函数，添加鼠标移动监听事件，

2.获得鼠标坐标的X轴Y轴位置，

最低0.47元/天解锁文章

G_uan

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
实现鼠标追随效果

呈现效果：1.页面中的gif动图跟随鼠标移动2.元素随鼠标移动角度进行z轴旋转以及在方向上进行Y轴上的翻转HTML代码部分<head> <style> .img { width: 50px; height: 50px; background-image: url("goat.gif"); background-size: cover; ..
复制链接

扫一扫