这份代码写得极其糟心。
一来自己写这个样例的时候一直在拖，花了好几天才写完。
二来原代码中有一些搞不明白的东西，也看不出来在代码中的作用，到后来索性都删了。
再有就是外联css不知为何用不起来，闹腾了半天，只能和html放在一起写。
最后就是找bug花了一堆时间，甚是难受。
点此体验
而我也懒得讲了，这里直接放代码算了。
代码
html&&css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>图标移动</title>
<script src="moveLoad.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
width: 30px;
height: 45px;
background: url("./images/V.ico") no-repeat center center;
background-size: 76px 55px;
top:100px;
left:50px;
}
p,input{margin: 10px;}
</style>
</head>
<body>
<input type="button" value="根据鼠标点击位置移动" />
<input type="button" value="根据标鼠标轨迹移动" />
<p>请点击按钮激活功能！</p>
<div></div>
</body>
|
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
| window.onload=function(){
//图标
var oDiv=document.getElementsByTagName("div")[0];
var aInput=document.getElementsByTagName("input");
var oP=document.getElementsByTagName("p")[0];
//移动到鼠标点击的位置
aInput[0].onclick=function(event){
//清空事件
clearEvent();
this.value +="(已激活)";
oP.innerHTML="鼠标点击页面，图标将移动至鼠标位置！"
//鼠标点击
document.onclick=function(event){
var event=event||window.event;
//开始移动
clearInterval(oDiv.timer);
oDiv.timer=setInterval(function (){
var X=(event.clientX-oDiv.offsetLeft)/5;
var Y=(event.clientY-oDiv.offsetTop)/5;
//ceil()向上取整，floor()向下取整
X=X>0?Math.ceil(X):Math.floor(X);
Y=Y>0?Math.ceil(Y):Math.floor(Y);
if(event.clientX==oDiv.offsetLeft&&event.clientY==oDiv.offsetTop){
clearInterval(oDiv.timer);
}
else {
oDiv.style.left=oDiv.offsetLeft+X+"px";
oDiv.style.top=oDiv.offsetTop+Y+"px";
}
},30);
return false;
}
};
//图标跟随鼠标移动轨迹移动
aInput[1].onclick=function(event){
clearEvent();
this.value+="(已激活)";
oP.innerHTML = "按住鼠标左键，在页面划动，图标将按照鼠标轨迹移动。"
//鼠标的位置
var aPos=[{x:oDiv.offsetLeft,y:oDiv.offsetTop}];
//鼠标按下
document.onmousedown=function(event){
var event=event||window.event;
//记录当前图标的位置
aPos.push({x:event.clientX,y:event.clientY});
document.onmousemove=function(event){
var event=event||window.event;
//记录路上鼠标的位置
aPos.push({x:event.clientX,y:event.clientY});
return false;
}
return false;
}
document.onmouseup=function(event){
//初始化鼠标移动的事件
document.onmousemove=null;
//setInterval(code,time)可按照指定的周期（以毫秒计）来调用函数或计算表达式。
var timer=setInterval(
function(){
//如果没有坐标需要移动了，停止周期函数
if(aPos.length==0){
clearInterval(timer);
return;
}
//设置图标位置
oDiv.style.left=aPos[0].x+"px";
oDiv.style.top=aPos[0].y+"px";
//弹出数组中的元素
aPos.shift();
},30);
}
}
//清空事件
function clearEvent(){
document.onclick=null;
document.onmousedown=null;
document.onmousemove=null;
document.onmouseup=null;
for(var i=0;i<aInput.length;i++){
aInput[i].value=aInput[i].value.replace("(已激活)","");
}
}
}
|