123、小球的跳动

123、小球的跳动

脚本说明:

第一步:把如下代码加入<body>区域中

<SCRIPT language=JavaScript>

<!--

 

// Note: this was written a long time ago

 

ball_stationary = new Image()

ball_stationary.src = "ball-stationary.gif"

ball_animated = new Image()

ball_animated.src = "ball-animated.gif"

 

ns4 = (document.layers) ? 1:0

ie4 = (document.all) ? 1:0

 

function parabola(obj,type,xDistance,yDistance,xDirection,yDirection,xinc,speed) {

       if (ns4) this.obj = document.layers[obj]

       if (ie4) this.obj = document.all[obj].style

       this.type = type

       this.xDistance = xDistance

       this.yDistance = yDistance

       this.xDirection = xDirection

       this.yDirection = yDirection

       this.xinc = xinc

       this.speed = speed

       this.active = 0

       this.i = 0

       this.multiplier = this.yDistance/Math.pow(this.xDistance/this.type,2)

       this.startX = parseInt(this.obj.left)

       this.startY = parseInt(this.obj.top)

       this.x = this.startX

       this.y = this.startY

       // the decreasing values used for the arcing parabola

       // represents how much less the ball will bounce each time

       this.xdec = 25

       this.ydec = 50

       this.move = moveParabola

}

 

function moveParabola() {

       this.i += this.xDirection*this.xinc

       this.x = this.startX + this.i

       this.obj.left = this.x

       if (this.type == 1) {

              this.y = this.startY + this.yDirection*this.multiplier*Math.pow(Math.abs(this.i),2)

              this.obj.top = this.y

       }

       if (this.type == 2) {

              this.y = this.startY - this.yDirection*this.multiplier*Math.pow(this.xDistance/2-Math.abs(this.i),2) + this.yDirection*this.yDistance

              this.obj.top = this.y

       }

}

 

function init() {

       ball = new parabola("balldiv",1,125,250,1,1,3,20)

}

 

// this is the dropping parabola that first starts the animation

function bounce1() {

       if (ball.active) {

              if (Math.abs(ball.i) < ball.xDistance) {

                     ball.move()

                     setTimeout("bounce1()",ball.speed)

              }

              else {

                     // after it drops, the parabola has to change into an arcing parabola

                     // to continue bouncing.  Must reset the following values...

                     ball.type = 2

                     ball.yDirection = -1

                     ball.i = 0

                     ball.yDistance -= ball.ydec

                     ball.startX = ball.x

                     ball.startY = ball.y

                     // Important: the multiplier is used in the calculation of the parabola

                     // if you change the xDistance,yDistance, or type you must recalculate it

                     ball.multiplier = ball.yDistance/Math.pow(ball.xDistance/ball.type,2)

                     setTimeout("bounce2()",ball.speed)

              }

       }

}

 

// this is the arcing parabola that continually runs after the initial drop

function bounce2() {

       if (ball.active) {

              if (Math.abs(ball.i) < ball.xDistance) {

                     ball.move()

                     setTimeout("bounce2()",ball.speed)

              }

              else {

                     // each time the ball hits the ground I decrease both the xDistance

                     // and yDistance to make it appear as if it's slowing down

                     // must also recalculate the multiplier each time

                     ball.i = 0

                     ball.xdec *= 0.9

                     ball.ydec *= 0.9

                     ball.xDistance -= ball.xdec

                     ball.yDistance -= ball.ydec

                     ball.startX = ball.x

                     ball.startY = ball.y

                     ball.multiplier = ball.yDistance/Math.pow(ball.xDistance/ball.type,2)

                     if (ball.yDistance > 0 && ball.xDistance > 0) setTimeout("bounce2()",ball.speed)

                     else {

                            changeImages("off")

                            ball.active = 0

                     }

              }

       }

}

 

function start() {

       if (!ball.active) {

              if (ball.x == 593) {  // if at the end, reset it

                     reset()

                     start()

              }

              else {

                     changeImages("on")  // else start the drop

                     ball.active = 1

                     bounce1()

              }

       }

}

 

function stop() {

       ball.active = 0

       changeImages("off")

}

 

function reset() {

       if (!ball.active) {

       changeImages("off")

       ball.active = 0

       ball.i = 0

       ball.type = 1

       ball.xdec = 25

       ball.ydec = 50

       ball.xDistance = 125

       ball.yDistance = 250

       ball.yDirection = 1

       ball.multiplier = ball.yDistance/Math.pow(ball.xDistance/ball.type,2)

       ball.startX = 5

       ball.startY = 40

       ball.x = ball.startX

       ball.y = ball.startY

       ball.obj.left = ball.x

       ball.obj.top = ball.y

       }

       else {

              ball.active = 0

              setTimeout("reset()",50)

       }

}

 

function changeImages(which) {

       if (which == "on") {

              if (ns4) document.layers["balldiv"].document.images["ballimg"].src = ball_animated.src

              if (ie4) document.images["ballimg"].src = ball_animated.src

       }

       if (which == "off") {

              if (ns4) document.layers["balldiv"].document.images["ballimg"].src = ball_stationary.src

              if (ie4) document.images["ballimg"].src = ball_stationary.src

       }

}

 

//-->

</SCRIPT>

<A onclick=start() href="#">开始跳动</A> - <A onclick=stop()

href="#">停止</A> - <A onclick=reset() href="#">重新开始</A> <DIV id=balldiv><IMG height=50 src="ball-stationary.gif" width=50 border=0 name=ballimg> </DIV>

 

 

第二步:把<body>中的内容改为:

<body   onload=init()>

 

Write a comment

Comments: 0