简单的鼠标单机跟随
来源:互联网 发布:时时彩模拟软件 编辑:程序博客网 时间:2024/05/21 10:46
<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);
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>
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>
阅读全文
0 0
- 简单的鼠标单机跟随
- 简单的鼠标跟随一
- 鼠标简单跟随提示二
- 跟随鼠标的萤火虫
- 鼠标跟随的问题
- 跟随鼠标的时钟
- 鼠标跟随的div
- 跟随鼠标的文字
- 跟随鼠标的字符
- 跟随鼠标的时钟
- 跟随鼠标的彩色方格
- 飘动的字符跟随鼠标
- 跟随鼠标的光环代码
- 跟随鼠标的旋转星星
- 跟随鼠标的发光文字
- 跟随鼠标的消息层
- js跟随鼠标的详细信息
- 跟随鼠标飘动的图片
- 士兵杀敌(二)(线段树)
- 【C语言位运算符:与、或、异或、取反、左移和右移】
- ZOJ-1091 Knight Moves(bfs)
- Spring4+Hibernate4声明式事务管理
- object.key与object[key]的差异
- 简单的鼠标单机跟随
- 4、认识正则表达式和re库
- 初学babel的简易使用
- bzoj 2822 [AHOI2012]树屋阶梯 卡特兰数
- 【Python3.6爬虫学习记录】(二)使用BeautifulSoup爬取简单静态网页文章
- springMVC 整合shiro
- zoj3435 莫比乌斯反演
- 14.说说ATL常用包装类的用法和坑
- Unity3D之设计模式MVC