1.先让图片跟随鼠标移动
监听mousemove事件实时获取鼠标的x和y。图片设置为绝对定位，将鼠标的x和y赋给定位的top和left。
2.让图片不停的旋转
animation + @keyframes
<style>
img {
top: 0px;
left: 0px;
position: absolute;
height: 50px;
width: 50px;
animation: xuanzhuan 1s linear infinite;
}
@keyframes xuanzhuan {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<img src="img/童钰庆.jpg" alt="">
<script>
// 1、mousemove只要鼠标移动1px 就会触发这个事件
var pic = document.querySelector('img');
document.addEventListener('mousemove', function (e) {
var x = e.pageX;
var y = e.pageY;
console.log(x);
// 减数是为了让图片居中对齐
pic.style.left = x - 25 + 'px';
pic.style.top = y - 25 + 'px';
})
</script>
726
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
