简单的鼠标单机跟随

本文介绍了一个简单的鼠标跟随效果实现方案,通过JavaScript控制页面元素平滑地跟随鼠标移动,包括使用缓动算法确保移动过程平滑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<script>
var img=document.getElementById("img");
var timer=null;
var leaderx=0;
var leadery=0;
var targetx=0;
var targety=0;
document.onclick=function(event){
var event=event||window.event;
var pagex=event.pageX||event.clientX+scroll().left;
var pagey=event.pageY||event.clientY+scroll().top;
targetx=pagex-img.offsetWidth/2;
targety=pagey-img.offsetHeight/2;
clearInterval(timer);

timer=setInterval(function(){

//缓速停止运动

var stepx=(targetx-leaderx)/10;
stepx=stepx>0?Math.ceil(stepx):Math.floor(stepx);
leaderx=leaderx+stepx;
var stepy=(targety-leadery)/10;
stepy=stepy>0?Math.ceil(stepy):Math.floor(stepy);
leadery=leadery+stepy;
img.style.left=leaderx+"px";
img.style.top=leadery+"px";
},10)
}


function scroll(){
if (window.pageYOffset!=null) {
return {
left:window.pageXOffset,
top:window.pageYOffset
}
}else if (document.compatMode==="CSS1Compat") {
return {
left:document.documentElement.scrollLeft,
top:document.documentElement.scrollTop
}
}return {
left:document.body.scrollLeft,
top:document.body.scrollTop
}
}
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值