实验-网页动画(js版)
生活随笔
收集整理的這篇文章主要介紹了
实验-网页动画(js版)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
網頁加載完后,在此點擊右鍵
Code
??1<html>
??2<head>
??3<script?language="javascript"?src="cookie.js"></script>
??4????<script?language="javascript">
??5????????function?Point(x,y)?{
??6????????????this.X?=?x;
??7????????????this.Y?=?y;
??8????????}
??9????????////動畫
?10????????function?Animation(type)?{
?11????????????this.src?=?"left.png";
?12????????????this.imgWidth?=??250;
?13????????????this.imgHeight?=?100;
?14????????????this.Width?=?50;
?15????????????this.Height?=?100;
?16????????????this.second?=?50;
?17????????????if?(type?==?"DownWalk")?{
?18????????????????this.src?=?"Man_2_1/DownWalk.png";
?19????????????}
?20????????????else?if?(type?==?"LeftDownWalk")?{
?21????????????????this.src?=?"Man_2_1/LeftDownWalk.png";
?22????????????}
?23????????????else?if?(type?==?"LeftUpWalk")?{
?24????????????????this.src?=?"Man_2_1/LeftUpWalk.png";
?25????????????}
?26????????????else?if?(type?==?"LeftWalk")?{
?27????????????????this.src?=?"Man_2_1/LeftWalk.png";
?28????????????}
?29????????????else?if?(type?==?"RightDownWalk")?{
?30????????????????this.src?=?"Man_2_1/RightDownWalk.png";
?31????????????}
?32????????????else?if?(type?==?"RightUpWalk")?{
?33????????????????this.src?=?"Man_2_1/RightUpWalk.png";
?34????????????}
?35????????????else?if?(type?==?"RightWalk")?{
?36????????????????this.src?=?"Man_2_1/RightWalk.png";
?37????????????}
?38????????????else?if?(type?==?"UpWalk")?{
?39????????????????this.src?=?"Man_2_1/UpWalk.png";
?40????????????}
?41
?42
?43????????}
?44????????//動畫播放器
?45????????function?AnimationPlayer(animation)?{
?46????????????this.state?=?"stop";
?47????????????this.count?=?5;
?48????????????this.index?=?0;
?49????????????this.Frame?=?null;
?50????????????this.mouseTimeout?=?null;
?51????????????this.animation?=?null;
?52????????????this.animation?=?animation;
?53????????????this.e?=?function()?{
?54????????????????var?c?=?this;?return?function()?{
?55????????????????????if?(c.state?==?"walk")
?56????????????????????????c.walk();
?57????????????????}
?58????????????};
?59????????????this.setAnimation?=?function(animation)?{
?60????????????????if?(animation?!=?null)?{
?61????????????????????if?(this.animation?==?animation)?return;
?62????????????????????this.animation?=?animation;
?63????????????????????this.Frame.style.width?=?this.animation.Width?+?"px";
?64????????????????????this.Frame.style.height?=?this.animation.Height?+?"px";
?65????????????????????this.Frame.style.backgroundImage?=?"url("?+?this.animation.src?+?")";
?66????????????????????this.Frame.style.backgroundPosition?=?"0px?0px";
?67????????????????}
?68????????????}
?69????????????this.walk?=?function()?{
?70????????????//alert(this.state)
?71????????????????if?(this.animation?!=?null?&&?this.state=="walk")?{
?72????????????????????this.mouseTimeout?=?window.clearTimeout(this.mouseTimeout);
?73????????????????????this.Frame.style.backgroundPosition?=?"-"?+?(this.index?*?this.animation.Width)?+?"px?0px";
?74????????????????????this.index++;
?75????????????????????this.mouseTimeout?=?window.setTimeout(this.e(),?this.animation.second);
?76????????????????????
?77????????????????}
?78????????????}
?79????????????this.stop?=?function()?{
?80????????????????if?(this.state?=?"walk")?{
?81????????????????????this.state?=?"stop";
?82????????????????????this.index?=?this.count-1;
?83????????????????????this.Frame.style.backgroundPosition?=?"-"?+?(this.index?*?this.animation.Width)?+?"px?0px";
?84????????????????}
?85????????????}
?86????????????this.select?=?function()?{
?87????????????????//this.style.border?=?"solid?1px?black";
?88????????????}
?89?????????????
?90????????????//實例化
?91????????????this.instance?=?function(point)?{
?92
?93????????????????div?=?document.createElement("div");
?94
?95????????????????var?Content?=?document.getElementById("Content");
?96????????????????Content.appendChild(div);
?97????????????????this.Frame?=?div;
?98????????????????//this.Frame.innerText?=?"點擊行走/停止";
?99????????????????this.Frame.style.position?=?"absolute";
100????????????????this.Frame.style.left?=?point.X?+?"px";
101????????????????this.Frame.style.top?=?point.Y?+?"px";
102????????????????
103????????????????this.Frame.onmousedown?=?this.select;
104????????????????this.setAnimation(this.animation);
105
106????????????}
107????????????
108????????}
109?????????
110????????//Role
111????????/**//*
112????????????1.role?has?his?location
113????????????2.role?has?his?name(ID)?sex?type?
114????????
115????????*/
116????????function?Role()?{
117
118????????????this.rightAnimation?=?new?Animation("RightWalk");
119????????????this.rightDownAnimation?=?new?Animation("RightDownWalk");
120????????????this.downAnimation?=?new?Animation("DownWalk");
121????????????this.leftDownAnimation?=?new?Animation("LeftDownWalk");
122????????????this.leftUpAnimation?=?new?Animation("LeftUpWalk");
123????????????this.leftAnimation?=?new?Animation("LeftWalk");
124????????????this.upAnimation?=?new?Animation("UpWalk");
125????????????this.rightUpAnimation?=?new?Animation("RightUpWalk");
126????????????
127????????????this.Timeout?=?null;
128????????????this.jiaodu?=?0;
129????????????this.animationPlayer?=?new?AnimationPlayer(this.downAnimation);
130????????????this.Location?=?new?Point(10,?10);
131????????????this.Purpose?=?new?Point(10,?10);
132?????????????
133????????????this.animationPlayer.instance(this.Location);
134????????????
135????????????this.onclick?=?function()?{
136????????????????if?(this.animationPlayer.state?==?"stop")?{
137????????????????????this.animationPlayer.state?=?"walk";
138????????????????????this.animationPlayer.walk();
139????????????????????//?alert(this.state);
140????????????????}?else?{
141????????????????????this.animationPlayer.stop();
142????????????????????//alert("停止");
143????????????????}
144????????????};
145????????????
146//????????????this.Change?=?function()?{
147//????????????????if(this.animationPlayer.animation==this.animation1)
148//????????????????????this.animationPlayer.setAnimation(this.animation2);
149//????????????????else?if?(this.animationPlayer.animation?==?this.animation2)
150//????????????????????this.animationPlayer.setAnimation(this.animation3);
151//????????????????else?if?(this.animationPlayer.animation?==?this.animation3)
152//????????????????????this.animationPlayer.setAnimation(this.animation4);
153//????????????????else?if?(this.animationPlayer.animation?==?this.animation4)
154//????????????????????this.animationPlayer.setAnimation(this.animation1);
155//????????????}
156
157????????????this.e?=?function()?{
158????????????????var?c?=?this;?return?function()?{
159????????????????????????c.onMove();
160????????????????}
161????????????};
162????????????this.onMove?=?function()?{
163????????????????var?retx?=?false,?rety?=?false;
164????????????????this.Timeout?=?window.clearTimeout(this.mouseTimeout);
165
166????????????????if?(this.Location.X?>=?this.Purpose.X?-?5?&&?this.Location.X?<=?this.Purpose.X?+?5)?{
167
168
169????????????????????retx?=?true;
170
171????????????????}
172????????????????else?{
173????????????????????if?(this.Location.X?>?this.Purpose.X)?this.Location.X?-=?5;
174????????????????????else?this.Location.X?+=?5;
175????????????????????this.animationPlayer.Frame.style.left?=?this.Location.X?-?this.animationPlayer.animation.Width?/?2?+?"px";
176
177????????????????}
178????????????????if?(this.Location.Y?>=?this.Purpose.Y?-?5?&&?this.Location.Y?<=?this.Purpose.Y?+?5)?{
179
180
181????????????????????rety?=?true;
182
183????????????????}
184????????????????else?{
185????????????????????if?(this.Location.Y?>?this.Purpose.Y)?this.Location.Y?-=?5;
186????????????????????else?this.Location.Y?+=?5;
187????????????????????this.animationPlayer.Frame.style.top?=?this.Location.Y?-?this.animationPlayer.animation.imgHeight?+?"px";
188????????????????}
189????????????????if?(retx?&&?rety)?{
190????????????????????this.animationPlayer.stop();
191????????????????????return;
192????????????????}
193
194????????????????if?(this.animationPlayer.state?==?"stop")?{
195????????????????????this.animationPlayer.state?=?"walk";
196????????????????????this.animationPlayer.walk();
197????????????????????//alert();
198????????????????}
199????????????????this.jiaodu?=?parseInt((Math.atan((this.Purpose.Y?-?this.Location.Y)?/?(this.Purpose.X?-?this.Location.X)))?*?180?/?Math.PI?+?180)?%?360;
200
201????????????????if?(this.Purpose.X?-?(this.Location.X)?>?0)
202????????????????????this.jiaodu?=?(this.jiaodu?+?180)?%?360;
203????????????????//alert(this.jiaodu)
204????????????????this.turnJiao(this.jiaodu);
205????????????????this.Timeout?=?window.setTimeout(this.e(),?50);
206
207????????????}
208????????????this.turnJiao?=?function(jiaodu)?{
209????????????????if?(jiaodu?>?(360?-?22.5)?||?jiaodu?<?(22.5))?{
210????????????????????this.animationPlayer.setAnimation(this.rightAnimation);
211
212????????????????}
213????????????????//向右下
214????????????????if?(jiaodu?>?(45?*?1?-?22.5)?&&?jiaodu?<?(45?*?1?+?22.5))?{
215????????????????????this.animationPlayer.setAnimation(this.rightDownAnimation);
216????????????????}
217????????????????//直下
218????????????????if?(jiaodu?>?(45?*?2?-?22.5)?&&?jiaodu?<?(45?*?2?+?22.5))?{
219????????????????????this.animationPlayer.setAnimation(this.downAnimation);
220
221????????????????}
222????????????????//左下
223????????????????if?(jiaodu?>?(45?*?3?-?22.5)?&&?jiaodu?<?(45?*?3?+?22.5))?{
224????????????????????this.animationPlayer.setAnimation(this.leftDownAnimation);
225
226????????????????}
227????????????????//直左
228????????????????if?(jiaodu?>?(45?*?4?-?22.5)?&&?jiaodu?<?(45?*?4?+?22.5))?{
229????????????????????this.animationPlayer.setAnimation(this.leftAnimation);
230
231????????????????}
232????????????????//左上
233????????????????if?(jiaodu?>?(45?*?5?-?22.5)?&&?jiaodu?<?(45?*?5?+?22.5))?{
234????????????????????this.animationPlayer.setAnimation(this.leftUpAnimation);
235
236????????????????}
237????????????????//直上
238????????????????if?(jiaodu?>?(45?*?6?-?22.5)?&&?jiaodu?<?(45?*?6?+?22.5))?{
239????????????????????this.animationPlayer.setAnimation(this.upAnimation);
240
241????????????????}
242????????????????//右上
243????????????????if?(jiaodu?>?(45?*?7?-?22.5)?&&?jiaodu?<?(45?*?7?+?22.5))?{
244????????????????????this.animationPlayer.setAnimation(this.rightUpAnimation);
245
246????????????????}
247????????????}
248????????}
249????????var?role;
250????????window.onload?=?function()?{
251????????role?=?new?Role();
252????}
253????window.onfocus?=?function()?{
254//????????if?(role)?role.Change()
255????}
256
257????document.documentElement.oncontextmenu?=?function()?{
258????????var?x?=?event.clientX;
259????????var?y?=?event.clientY;
260????????if?(role?!=?null)?{
261????????????role.Purpose?=?new?Point(x,?y);
262????????????role.onMove();
263????????}
264????????return?false;
265
266????}
267????????//alert(GetCookie("ttttt"));
268????</script>
269</head>
270<body??onselectstart="return?false">
271<div?style="?position:absolute;?"???id="Content"?onclick="if(role)role.onclick();"??></div>
272</body>
273</html>
Code
??1<html>
??2<head>
??3<script?language="javascript"?src="cookie.js"></script>
??4????<script?language="javascript">
??5????????function?Point(x,y)?{
??6????????????this.X?=?x;
??7????????????this.Y?=?y;
??8????????}
??9????????////動畫
?10????????function?Animation(type)?{
?11????????????this.src?=?"left.png";
?12????????????this.imgWidth?=??250;
?13????????????this.imgHeight?=?100;
?14????????????this.Width?=?50;
?15????????????this.Height?=?100;
?16????????????this.second?=?50;
?17????????????if?(type?==?"DownWalk")?{
?18????????????????this.src?=?"Man_2_1/DownWalk.png";
?19????????????}
?20????????????else?if?(type?==?"LeftDownWalk")?{
?21????????????????this.src?=?"Man_2_1/LeftDownWalk.png";
?22????????????}
?23????????????else?if?(type?==?"LeftUpWalk")?{
?24????????????????this.src?=?"Man_2_1/LeftUpWalk.png";
?25????????????}
?26????????????else?if?(type?==?"LeftWalk")?{
?27????????????????this.src?=?"Man_2_1/LeftWalk.png";
?28????????????}
?29????????????else?if?(type?==?"RightDownWalk")?{
?30????????????????this.src?=?"Man_2_1/RightDownWalk.png";
?31????????????}
?32????????????else?if?(type?==?"RightUpWalk")?{
?33????????????????this.src?=?"Man_2_1/RightUpWalk.png";
?34????????????}
?35????????????else?if?(type?==?"RightWalk")?{
?36????????????????this.src?=?"Man_2_1/RightWalk.png";
?37????????????}
?38????????????else?if?(type?==?"UpWalk")?{
?39????????????????this.src?=?"Man_2_1/UpWalk.png";
?40????????????}
?41
?42
?43????????}
?44????????//動畫播放器
?45????????function?AnimationPlayer(animation)?{
?46????????????this.state?=?"stop";
?47????????????this.count?=?5;
?48????????????this.index?=?0;
?49????????????this.Frame?=?null;
?50????????????this.mouseTimeout?=?null;
?51????????????this.animation?=?null;
?52????????????this.animation?=?animation;
?53????????????this.e?=?function()?{
?54????????????????var?c?=?this;?return?function()?{
?55????????????????????if?(c.state?==?"walk")
?56????????????????????????c.walk();
?57????????????????}
?58????????????};
?59????????????this.setAnimation?=?function(animation)?{
?60????????????????if?(animation?!=?null)?{
?61????????????????????if?(this.animation?==?animation)?return;
?62????????????????????this.animation?=?animation;
?63????????????????????this.Frame.style.width?=?this.animation.Width?+?"px";
?64????????????????????this.Frame.style.height?=?this.animation.Height?+?"px";
?65????????????????????this.Frame.style.backgroundImage?=?"url("?+?this.animation.src?+?")";
?66????????????????????this.Frame.style.backgroundPosition?=?"0px?0px";
?67????????????????}
?68????????????}
?69????????????this.walk?=?function()?{
?70????????????//alert(this.state)
?71????????????????if?(this.animation?!=?null?&&?this.state=="walk")?{
?72????????????????????this.mouseTimeout?=?window.clearTimeout(this.mouseTimeout);
?73????????????????????this.Frame.style.backgroundPosition?=?"-"?+?(this.index?*?this.animation.Width)?+?"px?0px";
?74????????????????????this.index++;
?75????????????????????this.mouseTimeout?=?window.setTimeout(this.e(),?this.animation.second);
?76????????????????????
?77????????????????}
?78????????????}
?79????????????this.stop?=?function()?{
?80????????????????if?(this.state?=?"walk")?{
?81????????????????????this.state?=?"stop";
?82????????????????????this.index?=?this.count-1;
?83????????????????????this.Frame.style.backgroundPosition?=?"-"?+?(this.index?*?this.animation.Width)?+?"px?0px";
?84????????????????}
?85????????????}
?86????????????this.select?=?function()?{
?87????????????????//this.style.border?=?"solid?1px?black";
?88????????????}
?89?????????????
?90????????????//實例化
?91????????????this.instance?=?function(point)?{
?92
?93????????????????div?=?document.createElement("div");
?94
?95????????????????var?Content?=?document.getElementById("Content");
?96????????????????Content.appendChild(div);
?97????????????????this.Frame?=?div;
?98????????????????//this.Frame.innerText?=?"點擊行走/停止";
?99????????????????this.Frame.style.position?=?"absolute";
100????????????????this.Frame.style.left?=?point.X?+?"px";
101????????????????this.Frame.style.top?=?point.Y?+?"px";
102????????????????
103????????????????this.Frame.onmousedown?=?this.select;
104????????????????this.setAnimation(this.animation);
105
106????????????}
107????????????
108????????}
109?????????
110????????//Role
111????????/**//*
112????????????1.role?has?his?location
113????????????2.role?has?his?name(ID)?sex?type?
114????????
115????????*/
116????????function?Role()?{
117
118????????????this.rightAnimation?=?new?Animation("RightWalk");
119????????????this.rightDownAnimation?=?new?Animation("RightDownWalk");
120????????????this.downAnimation?=?new?Animation("DownWalk");
121????????????this.leftDownAnimation?=?new?Animation("LeftDownWalk");
122????????????this.leftUpAnimation?=?new?Animation("LeftUpWalk");
123????????????this.leftAnimation?=?new?Animation("LeftWalk");
124????????????this.upAnimation?=?new?Animation("UpWalk");
125????????????this.rightUpAnimation?=?new?Animation("RightUpWalk");
126????????????
127????????????this.Timeout?=?null;
128????????????this.jiaodu?=?0;
129????????????this.animationPlayer?=?new?AnimationPlayer(this.downAnimation);
130????????????this.Location?=?new?Point(10,?10);
131????????????this.Purpose?=?new?Point(10,?10);
132?????????????
133????????????this.animationPlayer.instance(this.Location);
134????????????
135????????????this.onclick?=?function()?{
136????????????????if?(this.animationPlayer.state?==?"stop")?{
137????????????????????this.animationPlayer.state?=?"walk";
138????????????????????this.animationPlayer.walk();
139????????????????????//?alert(this.state);
140????????????????}?else?{
141????????????????????this.animationPlayer.stop();
142????????????????????//alert("停止");
143????????????????}
144????????????};
145????????????
146//????????????this.Change?=?function()?{
147//????????????????if(this.animationPlayer.animation==this.animation1)
148//????????????????????this.animationPlayer.setAnimation(this.animation2);
149//????????????????else?if?(this.animationPlayer.animation?==?this.animation2)
150//????????????????????this.animationPlayer.setAnimation(this.animation3);
151//????????????????else?if?(this.animationPlayer.animation?==?this.animation3)
152//????????????????????this.animationPlayer.setAnimation(this.animation4);
153//????????????????else?if?(this.animationPlayer.animation?==?this.animation4)
154//????????????????????this.animationPlayer.setAnimation(this.animation1);
155//????????????}
156
157????????????this.e?=?function()?{
158????????????????var?c?=?this;?return?function()?{
159????????????????????????c.onMove();
160????????????????}
161????????????};
162????????????this.onMove?=?function()?{
163????????????????var?retx?=?false,?rety?=?false;
164????????????????this.Timeout?=?window.clearTimeout(this.mouseTimeout);
165
166????????????????if?(this.Location.X?>=?this.Purpose.X?-?5?&&?this.Location.X?<=?this.Purpose.X?+?5)?{
167
168
169????????????????????retx?=?true;
170
171????????????????}
172????????????????else?{
173????????????????????if?(this.Location.X?>?this.Purpose.X)?this.Location.X?-=?5;
174????????????????????else?this.Location.X?+=?5;
175????????????????????this.animationPlayer.Frame.style.left?=?this.Location.X?-?this.animationPlayer.animation.Width?/?2?+?"px";
176
177????????????????}
178????????????????if?(this.Location.Y?>=?this.Purpose.Y?-?5?&&?this.Location.Y?<=?this.Purpose.Y?+?5)?{
179
180
181????????????????????rety?=?true;
182
183????????????????}
184????????????????else?{
185????????????????????if?(this.Location.Y?>?this.Purpose.Y)?this.Location.Y?-=?5;
186????????????????????else?this.Location.Y?+=?5;
187????????????????????this.animationPlayer.Frame.style.top?=?this.Location.Y?-?this.animationPlayer.animation.imgHeight?+?"px";
188????????????????}
189????????????????if?(retx?&&?rety)?{
190????????????????????this.animationPlayer.stop();
191????????????????????return;
192????????????????}
193
194????????????????if?(this.animationPlayer.state?==?"stop")?{
195????????????????????this.animationPlayer.state?=?"walk";
196????????????????????this.animationPlayer.walk();
197????????????????????//alert();
198????????????????}
199????????????????this.jiaodu?=?parseInt((Math.atan((this.Purpose.Y?-?this.Location.Y)?/?(this.Purpose.X?-?this.Location.X)))?*?180?/?Math.PI?+?180)?%?360;
200
201????????????????if?(this.Purpose.X?-?(this.Location.X)?>?0)
202????????????????????this.jiaodu?=?(this.jiaodu?+?180)?%?360;
203????????????????//alert(this.jiaodu)
204????????????????this.turnJiao(this.jiaodu);
205????????????????this.Timeout?=?window.setTimeout(this.e(),?50);
206
207????????????}
208????????????this.turnJiao?=?function(jiaodu)?{
209????????????????if?(jiaodu?>?(360?-?22.5)?||?jiaodu?<?(22.5))?{
210????????????????????this.animationPlayer.setAnimation(this.rightAnimation);
211
212????????????????}
213????????????????//向右下
214????????????????if?(jiaodu?>?(45?*?1?-?22.5)?&&?jiaodu?<?(45?*?1?+?22.5))?{
215????????????????????this.animationPlayer.setAnimation(this.rightDownAnimation);
216????????????????}
217????????????????//直下
218????????????????if?(jiaodu?>?(45?*?2?-?22.5)?&&?jiaodu?<?(45?*?2?+?22.5))?{
219????????????????????this.animationPlayer.setAnimation(this.downAnimation);
220
221????????????????}
222????????????????//左下
223????????????????if?(jiaodu?>?(45?*?3?-?22.5)?&&?jiaodu?<?(45?*?3?+?22.5))?{
224????????????????????this.animationPlayer.setAnimation(this.leftDownAnimation);
225
226????????????????}
227????????????????//直左
228????????????????if?(jiaodu?>?(45?*?4?-?22.5)?&&?jiaodu?<?(45?*?4?+?22.5))?{
229????????????????????this.animationPlayer.setAnimation(this.leftAnimation);
230
231????????????????}
232????????????????//左上
233????????????????if?(jiaodu?>?(45?*?5?-?22.5)?&&?jiaodu?<?(45?*?5?+?22.5))?{
234????????????????????this.animationPlayer.setAnimation(this.leftUpAnimation);
235
236????????????????}
237????????????????//直上
238????????????????if?(jiaodu?>?(45?*?6?-?22.5)?&&?jiaodu?<?(45?*?6?+?22.5))?{
239????????????????????this.animationPlayer.setAnimation(this.upAnimation);
240
241????????????????}
242????????????????//右上
243????????????????if?(jiaodu?>?(45?*?7?-?22.5)?&&?jiaodu?<?(45?*?7?+?22.5))?{
244????????????????????this.animationPlayer.setAnimation(this.rightUpAnimation);
245
246????????????????}
247????????????}
248????????}
249????????var?role;
250????????window.onload?=?function()?{
251????????role?=?new?Role();
252????}
253????window.onfocus?=?function()?{
254//????????if?(role)?role.Change()
255????}
256
257????document.documentElement.oncontextmenu?=?function()?{
258????????var?x?=?event.clientX;
259????????var?y?=?event.clientY;
260????????if?(role?!=?null)?{
261????????????role.Purpose?=?new?Point(x,?y);
262????????????role.onMove();
263????????}
264????????return?false;
265
266????}
267????????//alert(GetCookie("ttttt"));
268????</script>
269</head>
270<body??onselectstart="return?false">
271<div?style="?position:absolute;?"???id="Content"?onclick="if(role)role.onclick();"??></div>
272</body>
273</html>
轉載于:https://www.cnblogs.com/CNWei/archive/2009/07/26/1531434.html
總結
以上是生活随笔為你收集整理的实验-网页动画(js版)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 学习JavaScript的24条实用建议
- 下一篇： 免费源码赠送之 pwm (vhdl)