JavaScript制作的一个很简单有趣的效果
CSS样式代码：
<style>
img {
position: absolute;
top: 2px;
}
</style>HTML代码：
<img src="易烊千玺.png" alt="" width="180px" height="180px">JavaScript代码：
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
//1、mousemove只要我们鼠标移动1px 就会触发这个事件
// console.log(1);
//2、核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片
var x = e.pageX;
var y = e.pageY;
console.log('x的坐标是' + x, 'y的坐标是' + y);
//3、千万不用忘记给left和top添加单位px
pic.style.left = x - 90 + 'px';
pic.style.top = y - 90 + 'px';
})
</script>效果展示：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/6282.html
