2008年8月29日

跟随鼠标的弹性小球

代码效果：跟随鼠标的弹性小球。


代码如下：


<!--将以下代码加入HTML的<Body></Body>之间--><br /><br /><DIV id=dot0 <br />style="HEIGHT: 11px; POSITION: absolute; VISIBILITY: hidden; WIDTH: 11px"><IMG />height=11 src="image/bullet2.gif" width=11> </DIV><br /><DIV id=dot1 style="HEIGHT: 11px; POSITION: absolute; WIDTH: 11px"><IMG />height=11 src="image/bullet2.gif" width=11> </DIV><br /><DIV id=dot2 style="HEIGHT: 11px; POSITION: absolute; WIDTH: 11px"><IMG />height=11 src="image/bullet2.gif" width=11> </DIV><br /><DIV id=dot3 style="HEIGHT: 11px; POSITION: absolute; WIDTH: 11px"><IMG />height=11 src="image/bullet2.gif" width=11> </DIV><br /><DIV id=dot4 style="HEIGHT: 11px; POSITION: absolute; WIDTH: 11px"><IMG />height=11 src="image/bullet2.gif" width=11> </DIV><br /><DIV id=dot5 style="HEIGHT: 11px; POSITION: absolute; WIDTH: 11px"><IMG />height=11 src="image/bullet2.gif" width=11> </DIV><br /><DIV id=dot6 style="HEIGHT: 11px; POSITION: absolute; WIDTH: 11px"><IMG />height=11 src="image/bullet2.gif" width=11> </DIV><br /><SCRIPT language=JavaScript><br />var nDots = 7;<br />var Xpos = 0;<br />var Ypos = 0;<br />var DELTAT = .01;<br />var SEGLEN = 10;<br />var SPRINGK = 10;<br />var MASS = 1;<br />var XGRAVITY = 0;<br />var YGRAVITY = 50;<br />var RESISTANCE = 10;<br />var STOPVEL = 0.1;<br />var STOPACC = 0.1;<br />var DOTSIZE = 11;<br />var BOUNCE = 0.75;<br />var isNetscape = navigator.appName=="Netscape";<br />var followmouse = true;<br />var dots = new Array();<br />init();<br />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 /> }<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 /> if (isNetscape) {<br /> startanimate();<br /> } else {<br /> setTimeout("startanimate()", 1000);<br /> }<br />}<br />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 />}<br />function startanimate() {<br /> setInterval("animate()", 20);<br />}<br />function setInitPositions(dots)<br />{<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 /> dots[0].X = dots[1].X;<br /> dots[0].Y = dots[1].Y - SEGLEN;<br />}<br />function MoveHandler(e)<br />{<br /> Xpos = e.pageX;<br /> Ypos = e.pageY;<br /> return true;<br />}<br />function MoveHandlerIE() {<br /> Xpos = window.event.x + document.body.scrollLeft;<br /> Ypos = window.event.y + document.body.scrollTop;<br />}<br /><br />if (isNetscape) {<br /> document.captureEvents(Event.MOUSEMOVE);<br /> document.onMouseMove = MoveHandler;<br />} else {<br /> document.onmousemove = MoveHandlerIE;<br />}<br /><br /><br />function vec(X, Y)<br />{<br /> this.X = X;<br /> this.Y = Y;<br />}<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 />}<br />function animate() {<br /> var start = 0;<br /> if (followmouse) {<br /> dots[0].X = Xpos;<br /> dots[0].Y = Ypos;<br /> start = 1;<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 /> var resist = new vec(-dots[i].dx * RESISTANCE,<br /> -dots[i].dy * RESISTANCE);<br /> var accel = new vec((spring.X + resist.X)/MASS + XGRAVITY,<br /> (spring.Y + resist.Y)/ MASS + YGRAVITY);<br /> dots[i].dx += (DELTAT * accel.X);<br /> dots[i].dy += (DELTAT * accel.Y);<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 /> dots[i].X += dots[i].dx;<br /> dots[i].Y += dots[i].dy;<br /> var height, width;<br /> if (isNetscape) {<br /> height = window.innerHeight + window.pageYOffset;<br /> width = window.innerWidth + window.pageXOffset;<br /> } else {<br /> height = document.body.clientHeight + document.body.scrollTop;<br /> width = document.body.clientWidth + document.body.scrollLeft;<br /> }<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 /> dots[i].obj.left = dots[i].X;<br /> dots[i].obj.top = dots[i].Y;<br /> }<br />}<br /></SCRIPT><br />

发帖者 时间：
标签：

没有评论:

发表评论

订阅： 博文评论 (Atom)