📄 mouse4.htm
字号:
// adds force in X and Y to spring for dot[i] on dot[j]function springForce(i, j, spring){ var dx = (dots[i].X - dots[j].X); var dy = (dots[i].Y - dots[j].Y); var len = Math.sqrt(dx*dx + dy*dy); if (len > SEGLEN) { var springF = SPRINGK * (len - SEGLEN); spring.X += (dx / len) * springF; spring.Y += (dy / len) * springF; }}function animate() { // dots[0] follows the mouse, // though no dot is drawn there var start = 0; if (followmouse) { dots[0].X = Xpos; dots[0].Y = Ypos; start = 1; } for (i = start ; i < nDots; i++ ) { var spring = new vec(0, 0); if (i > 0) { springForce(i-1, i, spring); } if (i < (nDots - 1)) { springForce(i+1, i, spring); } // air resisitance/friction var resist = new vec(-dots[i].dx * RESISTANCE, -dots[i].dy * RESISTANCE); // compute new accel, including gravity var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY); // compute new velocity dots[i].dx += (DELTAT * accel.X); dots[i].dy += (DELTAT * accel.Y); // stop dead so it doesn't jitter when nearly still if (Math.abs(dots[i].dx) < STOPVEL && Math.abs(dots[i].dy) < STOPVEL && Math.abs(accel.X) < STOPACC && Math.abs(accel.Y) < STOPACC) { dots[i].dx = 0; dots[i].dy = 0; } // move to new position dots[i].X += dots[i].dx; dots[i].Y += dots[i].dy; // get size of window var height, width; if (isNetscape) { height = window.innerHeight + document.scrollTop; width = window.innerWidth + document.scrollLeft; } else { height = document.body.clientHeight + document.body.scrollTop; width = document.body.clientWidth + document.body.scrollLeft; } // bounce of 3 walls (leave ceiling open) if (dots[i].Y >= height - DOTSIZE - 1) { if (dots[i].dy > 0) { dots[i].dy = BOUNCE * -dots[i].dy; } dots[i].Y = height - DOTSIZE - 1; } if (dots[i].X >= width - DOTSIZE) { if (dots[i].dx > 0) { dots[i].dx = BOUNCE * -dots[i].dx; } dots[i].X = width - DOTSIZE - 1; } if (dots[i].X < 0) { if (dots[i].dx < 0) { dots[i].dx = BOUNCE * -dots[i].dx; } dots[i].X = 0; } // move img to new position dots[i].obj.left = dots[i].X; dots[i].obj.top = dots[i].Y; }}// end code hiding --></SCRIPT>
<DIV class=explain id=redirection></DIV>提示:试试把鼠标放到左上角的小球上</TD></TR>
<TR>
<TD>1.将下面的代码复制到<body>内 <BR><DIV id=dot0
<BR>style="VISIBILITY: hidden; WIDTH: 11px; POSITION: absolute;
HEIGHT: 11px"><IMG <BR>height=11
src="/tempimgs/js/bullet1.gif" width=11></DIV><BR><DIV
id=dot1 style="WIDTH: 11px; POSITION: absolute; HEIGHT:
11px"><IMG <BR>height=11 src="/tempimgs/js/bullet1.gif"
width=11></DIV><BR><DIV id=dot2 style="WIDTH: 11px;
POSITION: absolute; HEIGHT: 11px"><IMG <BR>height=11
src="/tempimgs/js/bullet1.gif" width=11></DIV><BR><DIV
id=dot3 style="WIDTH: 11px; POSITION: absolute; HEIGHT:
11px"><IMG <BR>height=11 src="/tempimgs/js/bullet1.gif"
width=11></DIV><BR><DIV id=dot4 style="WIDTH: 11px;
POSITION: absolute; HEIGHT: 11px"><IMG <BR>height=11
src="/tempimgs/js/bullet1.gif" width=11></DIV><BR><DIV
id=dot5 style="WIDTH: 11px; POSITION: absolute; HEIGHT:
11px"><IMG <BR>height=11 src="/tempimgs/js/bullet1.gif"
width=11></DIV><BR><DIV id=dot6 style="WIDTH: 11px;
POSITION: absolute; HEIGHT: 11px"><IMG <BR>height=11
src="/tempimgs/js/bullet1.gif"
width=11></DIV><BR><SCRIPT
language=JavaScript><BR><!-- hide code
<P>var nDots = 7;<BR>if
(document.all&&window.print)<BR>document.body.style.cssText="overflow-x:hidden;overflow-y:scroll"<BR>var
Xpos = 0;<BR>var Ypos = 0;</P>
<P>// fixed time step, no relation to real time<BR>var DELTAT =
.01;<BR>// size of one spring in pixels<BR>var SEGLEN = 10;<BR>//
spring constant, stiffness of springs<BR>var SPRINGK = 10;<BR>// all
the physics is bogus, just picked stuff to<BR>// make it look
okay<BR>var MASS = 1;<BR>var GRAVITY = 50;<BR>var RESISTANCE =
10;<BR>// stopping criterea to prevent endless jittering<BR>//
doesn't work when sitting on bottom since floor<BR>// doesn't push
back so acceleration always as big<BR>// as gravity<BR>var STOPVEL =
0.1;<BR>var STOPACC = 0.1;<BR>var DOTSIZE = 11;<BR>// BOUNCE is
percent of velocity retained when <BR>// bouncing off a wall<BR>var
BOUNCE = 0.75;</P>
<P>var isNetscape = navigator.appName=="Netscape";</P>
<P>// always on for now, could be played with to<BR>// let dots fall
to botton, get thrown, etc.<BR>var followmouse = true;</P>
<P>var dots = new Array();<BR>init();</P>
<P>function init()<BR>{<BR>var i = 0;<BR>for (i = 0; i < nDots;
i++) {<BR>dots[i] = new dot(i);<BR>}<BR><BR>if (!isNetscape) {<BR>//
I only know how to read the locations of the <BR>// <LI> items
in IE<BR>//skip this for now<BR>//
setInitPositions(dots)<BR>}<BR><BR>// set their positions<BR>for (i
= 0; i < nDots; i++) {<BR>dots[i].obj.left =
dots[i].X;<BR>dots[i].obj.top = dots[i].Y;<BR>}<BR><BR><BR>if
(isNetscape) {<BR>// start right away since they are
positioned<BR>// at 0, 0<BR>startanimate();<BR>} else {<BR>// let
dots sit there for a few seconds<BR>// since they're hiding on the
real bullets<BR>setTimeout("startanimate()", 2000);<BR>}<BR>}</P>
<P></P>
<P>function dot(i) <BR>{<BR>this.X = Xpos;<BR>this.Y =
Ypos;<BR>this.dx = 0;<BR>this.dy = 0;<BR>if (isNetscape) {
<BR>this.obj = eval("document.dot" + i);<BR>} else {<BR>this.obj =
eval("dot" + i + ".style");<BR>}<BR>}</P>
<P><BR>function startanimate() { <BR>setInterval("animate()",
20);<BR>}</P>
<P><BR>// This is to line up the bullets with actual LI tags on the
page<BR>// Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not
sure why<BR>// Still doesn't work great<BR>function
setInitPositions(dots)<BR>{<BR>// initialize dot positions to be on
top <BR>// of the bullets in the <ul><BR>var startloc =
document.all.tags("LI");<BR>var i = 0;<BR>for (i = 0; i <
startloc.length && i < (nDots - 1); i++) {<BR>dots[i+1].X
= startloc[i].offsetLeft<BR>startloc[i].offsetParent.offsetLeft -
DOTSIZE;<BR>dots[i+1].Y = startloc[i].offsetTop
+<BR>startloc[i].offsetParent.offsetTop + 2*DOTSIZE;<BR>}<BR>// put
0th dot above 1st (it is hidden)<BR>dots[0].X =
dots[1].X;<BR>dots[0].Y = dots[1].Y - SEGLEN;<BR>}</P>
<P>// just save mouse position for animate() to use<BR>function
MoveHandler(e)<BR>{<BR>Xpos = e.pageX;<BR>Ypos = e.pageY; <BR>return
true;<BR>}</P>
<P>// just save mouse position for animate() to use<BR>function
MoveHandlerIE() {<BR>Xpos = window.event.x +
document.body.scrollLeft;<BR>Ypos = window.event.y +
document.body.scrollTop; <BR>}</P>
<P>if (isNetscape)
{<BR>document.captureEvents(Event.MOUSEMOVE);<BR>document.onMouseMove
= MoveHandler;<BR>} else {<BR>document.onmousemove =
MoveHandlerIE;<BR>}</P>
<P><BR>function vec(X, Y)<BR>{<BR>this.X = X;<BR>this.Y =
Y;<BR>}</P>
<P>// adds force in X and Y to spring for dot[i] on
dot[j]<BR>function springForce(i, j, spring)<BR>{<BR>var dx =
(dots[i].X - dots[j].X);<BR>var dy = (dots[i].Y - dots[j].Y);<BR>var
len = Math.sqrt(dx*dx + dy*dy);<BR>if (len > SEGLEN) {<BR>var
springF = SPRINGK * (len - SEGLEN);<BR>spring.X += (dx / len) *
springF;<BR>spring.Y += (dy / len) * springF;<BR>}<BR>}</P>
<P><BR>function animate() { <BR>// dots[0] follows the mouse,<BR>//
though no dot is drawn there<BR>var start = 0;<BR>if (followmouse)
{<BR>dots[0].X = Xpos;<BR>dots[0].Y = Ypos; <BR>start =
1;<BR>}<BR><BR>for (i = start ; i < nDots; i++ ) {<BR><BR>var
spring = new vec(0, 0);<BR>if (i > 0) {<BR>springForce(i-1, i,
spring);<BR>}<BR>if (i < (nDots - 1)) {<BR>springForce(i+1, i,
spring);<BR>}<BR><BR>// air resisitance/friction<BR>var resist = new
vec(-dots[i].dx * RESISTANCE,<BR>-dots[i].dy *
RESISTANCE);<BR><BR>// compute new accel, including gravity<BR>var
accel = new vec((spring.X + resist.X)/ MASS,<BR>(spring.Y +
resist.Y)/ MASS + GRAVITY);<BR><BR>// compute new
velocity<BR>dots[i].dx += (DELTAT * accel.X);<BR>dots[i].dy +=
(DELTAT * accel.Y);<BR><BR>// stop dead so it doesn't jitter when
nearly still<BR>if (Math.abs(dots[i].dx) < STOPVEL
&&<BR>Math.abs(dots[i].dy) < STOPVEL
&&<BR>Math.abs(accel.X) < STOPACC
&&<BR>Math.abs(accel.Y) < STOPACC) {<BR>dots[i].dx =
0;<BR>dots[i].dy = 0;<BR>}<BR><BR>// move to new
position<BR>dots[i].X += dots[i].dx;<BR>dots[i].Y +=
dots[i].dy;<BR><BR>// get size of window<BR>var height, width;<BR>if
(isNetscape) {<BR>height = window.innerHeight +
document.scrollTop;<BR>width = window.innerWidth +
document.scrollLeft;<BR>} else { <BR>height =
document.body.clientHeight + document.body.scrollTop;<BR>width =
document.body.clientWidth + document.body.scrollLeft;<BR>}<BR><BR>//
bounce of 3 walls (leave ceiling open)<BR>if (dots[i].Y >= height
- DOTSIZE - 1) {<BR>if (dots[i].dy > 0) {<BR>dots[i].dy = BOUNCE
* -dots[i].dy;<BR>}<BR>dots[i].Y = height - DOTSIZE - 1;<BR>}<BR>if
(dots[i].X >= width - DOTSIZE) {<BR>if (dots[i].dx > 0)
{<BR>dots[i].dx = BOUNCE * -dots[i].dx;<BR>}<BR>dots[i].X = width -
DOTSIZE - 1;<BR>}<BR>if (dots[i].X < 0) {<BR>if (dots[i].dx <
0) {<BR>dots[i].dx = BOUNCE * -dots[i].dx;<BR>}<BR>dots[i].X =
0;<BR>}<BR><BR>// move img to new position<BR>dots[i].obj.left =
dots[i].X; <BR>dots[i].obj.top = dots[i].Y; <BR>}<BR>}</P>
<P>// end code hiding
--><BR></SCRIPT><BR></P><BR><BR>2.请按Script内的指示按你的需要修改，我已把重点部分翻译了。还有不明白的地方请到论坛发表。</TD></TR></TBODY></TABLE></TD>
<TD><IMG height=1 src="space.gif"
width=11></TD></TR></TBODY></TABLE><!-- #EndEditable -->
<TABLE border=0 cellPadding=0 cellSpacing=0 width="100%">
<TBODY>
<TR bgColor=#ffffff>
<TD><IMG height=14 src="sq_3.gif" width=11></TD>
<TD width="100%"></TD>
<TD><IMG height=14 src="sq_4.gif"
width=11></TD></TR></TBODY></TABLE><!-- #EndTemplate --></BODY></HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -