移动效果
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4
5 <head>
6
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8
9 <title>移动效果（按轨迹移动）</title>
10
11 <style type="text/css">
12
13 body,div{margin:0;padding:0;}
14
15 div{position:absolute;width:66px;height:45px;background:url(img/1.gif) no-repeat;top:100px;left:50px;}
16
17 p,input{margin:10px;}
18
19 </style>
20
21 <script type="text/javascript">
22
23 window.onload = function ()
24
25 {
26
27 var oDiv = document.getElementsByTagName("div")[0];
28
29 var aInput = document.getElementsByTagName("input");
30
31 var oP = document.getElementsByTagName("p")[0];
32
33 var i = 0;
34
35
36
37 aInput[0].onclick = function (event)
38
39 {
40
41 (event || window.event).cancelBubble = true;
42
43 clearEvent();
44
45 this.value += "(已激活)";
46
47 oP.innerHTML = "鼠标点击页面， 人物将移动至鼠标位置！";
48
49 document.onclick = function (event)
50
51 {
52
53 var event = event || window.event;
54
55 oDiv.style.background = "url(img/2.gif) no-repeat";
56
57 startMove(oDiv, {x:event.clientX, y:event.clientY}, function(){oDiv.style.background = "url(img/1.gif) no-repeat"});
58
59 return false;
60
61 }
62
63 };
64
65
66
67 aInput[1].onclick = function (event)
68
69 {
70
71 (event || window.event).cancelBubble = true;
72
73 clearEvent();
74
75 this.value += "(已激活)";
76
77 oP.innerHTML = "按住鼠标左键，在页面划动，人物将按照鼠标轨迹移动。"
78
79 var aPos = [{x:oDiv.offsetLeft, y:oDiv.offsetTop}];
80
81 document.onmousedown = function (event)
82
83 {
84
85 var event = event || window.event;
86
87 aPos.push({x:event.clientX, y:event.clientY});
88
89 document.onmousemove = function (event)
90
91 {
92
93 var event = event || window.event;
94
95 aPos.push({x:event.clientX, y:event.clientY});
96
97 return false;
98
99 }
100
101 return false;
102
103 }
104
105 document.onmouseup = function ()
106
107 {
108
109 document.onmousemove = null;
110
111 oDiv.style.background = "url(img/2.gif) no-repeat";
112
113 var timer = setInterval(function ()
114
115 {
116
117 if(aPos.length == 0)
118
119 {
120
121 clearInterval(timer);
122
123 oDiv.style.background = "url(img/1.gif) no-repeat";
124
125 return;
126
127 };
128
129 oDiv.style.left = aPos[0].x + "px";
130
131 oDiv.style.top = aPos[0].y + "px";
132
133 aPos.shift();
134
135 }, 30);
136
137 };
138
139 }
140
141
142
143 function clearEvent()
144
145 {
146
147 document.onclick = null;
148
149 document.onmousedown = null;
150
151 document.onmousemove = null;
152
153 document.onmouseup = null;
154
155 for (i = 0; i < aInput.length; i++)
156
157 {
158
159 aInput[i].value = aInput[i].value.replace("(已激活)", "");
160
161 aInput[i].onmousedown = aInput[i].onmouseup = function (event)
162
163 {
164
165 (event || window.event).cancelBubble = true;
166
167 };
168
169 }
170
171 }
172
173 };
174
175 function startMove(obj, oTarget, fnEnd)
176
177 {
178
179 clearInterval(obj.timer);
180
181 obj.timer = setInterval(function ()
182
183 {
184
185 doMove(obj, oTarget, fnEnd)
186
187 }, 30)
188
189 }
190
191 function doMove(obj, oTarget, fnEnd)
192
193 {
194
195 var iX = (oTarget.x - obj.offsetLeft) / 5;
196
197 var iY = (oTarget.y - obj.offsetTop) / 5;
198
199 iX = iX > 0 ? Math.ceil(iX) : Math.floor(iX);
200
201 iY = iY > 0 ? Math.ceil(iY) : Math.floor(iY);
202
203 if (oTarget.x == obj.offsetLeft && oTarget.y == obj.offsetTop)
204
205 {
206
207 clearInterval(obj.timer);
208
209 fnEnd && fnEnd();
210
211 }
212
213 else
214
215 {
216
217 obj.style.left = obj.offsetLeft + iX + "px";
218
219 obj.style.top = obj.offsetTop + iY + "px";
220
221 }
222
223 }
224
225 </script>
226
227 </head>
228
229 <body>
230
231 <input type="button" value="根据鼠标点击位置移动" /><input type="button" value="根据标鼠标轨迹移动" />
232
233 <p>请点击按钮激活功能！</p>
234
235 <div></div>
236
237 </body>
238
239 </html>
原动画效果见：http://fgm.cc/learn/lesson7/03.html
原理大体是
起始位置和目标位置，运动的时候，x和y坐标差然后除以5，然后每次更新最新位置，然后再取最新的坐标差。。也就是为什么。。运动的越来越慢。。。
怎么才能匀速的。。。
需要用到三角函数
domove方法中的运动speed需要改为View Code
var all_x=(oTarget.x - obj.offsetLeft); var all_y=(oTarget.y - obj.offsetTop); var tan=all_y/all_x; var speed_x=5; var speed_y=tan*speed_x; var iX =Math.min(speed_x,Math.abs(all_x)); var iY = Math.min(speed_y,Math.abs(all_y)); iX=all_x>0?iX:-iX; iY =all_y>0?iY:-iY;
