开启辅助访问
帐号登录 |立即注册

让图片跟随鼠标移动的JS应该怎么写?

 
鼠标移动特效,跟随鼠标移动的图片代码要怎么写?
一、首先找一张小图片,并将定位设置为绝对定位position: absolute,代码如下。
<style>
img {
position: absolute;
top: 2px;
}
</style>
<img src=" images/angel . gif" alt="">

二、将鼠标对象的坐标赋值给图片的top与left样式属性,插入的JS代码如下:
<script>
var pic = document. querySelector( ' img' );
document . addEventListener(”mousemove',function(e) {
// 1. mousemove只要我们鼠标移动1px就会触发这个事件

// 2.核心原理:
每次鼠标移动,我们都会获得最新的鼠标坐标,把这个x和y坐标做为图片的top和1eft值
就可以移动图片
var x = e.pagex;
var y = e.pageY;

//3 .千万不要忘记给left和top添加px单位
pic.style.left = x + 'px';
pic.style.top = y + 'px' ;
});
</script>

回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。