基于js的图标移动代码

发表于 | 更新于 | 分类于 ， ， | 阅读次数：
本文字数： 3.5k | 阅读时长 ≈ 3 分钟

这份代码写得极其糟心。
一来自己写这个样例的时候一直在拖，花了好几天才写完。
二来原代码中有一些搞不明白的东西，也看不出来在代码中的作用，到后来索性都删了。
再有就是外联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>
	<!--<link rel="stylesheet" hrel="moveLoad.css"/>-->
	<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("(已激活)","");
		}
	}

}