呈现效果:
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轴位置,