网络时空 | 网页特效

特效说明

页面上跳动的小球，开始后会慢慢停止弹跳，也可重新开始

特

效

代

码

<body onload=init()>
<SCRIPT language=JavaScript>
<!--

// Note: this was written a long time ago

ball_stationary = new Image()
ball_stationary.src = "images/ball-stationary.gif"
ball_animated = new Image()
ball_animated.src = "images/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 style="LEFT: 5px; WIDTH: 50px; POSITION: absolute; TOP: 40px"><IMG height=50 src="images/ball-stationary.gif" width=50 border=0 name=ballimg> </DIV>

@_⌒ 特效预览 @_⌒

开始跳动 - 停止 - 重新开始