25、撞壁变换的图片效果

25、撞壁变换的图片效果

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

 

<title>网页特效|Linkweb.cn/Js|---撞壁自动变换的图片效果</title>

</head>

 

<body onLoad="setValues()">

 

<SCRIPT>

var x,y

var marginbottom

var marginleft=0

var margintop=0

var marginright

 

// 速度,越小越快

var tempo=60

 

// 单位时间内水平移动的距离

var stepx=20

 

// 单位时间内上下移动的距离

var stepy=20

var timer

 

 

// 图象的路径

img0 = new Image();

img0.src = "sto/01.gif";

img1 = new Image();

img1.src = "sto/02.gif";

img2 = new Image();

img2.src = "sto/03.gif";

img3 = new Image();

img3.src = "sto/04.gif";

// 延迟两秒开始运动

function setValues() {

var firsttimer= setTimeout("setValues2()",100)}

 

function setValues2() {

       if (document.all) {

       marginbottom = document.body.clientHeight-50

       marginright = document.body.clientWidth-50

              document.all.ball.style.posLeft=randommaker(marginright-30)+30

              document.all.ball.style.posTop=10

       moveball()

       }

       if (document.layers) {

       marginbottom = window.innerHeight-10

       marginright = window.innerWidth-10

              document.ball.left=randommaker(marginright-30)+30

              document.ball.top=10

       moveball()

       }

}

 

function randommaker(range) {          

       rand=Math.floor(range*Math.random())

return rand

}

 

function moveball() {

       checkposition()

       chooseimage()

       if (document.all) {

              document.all.ball.style.posLeft+=stepx

              document.all.ball.style.posTop+=stepy

       timer=setTimeout("moveball()",tempo)

       }

       if (document.layers) {

              document.ball.left+=stepx

              document.ball.top+=stepy

       timer=setTimeout("moveball()",tempo)

       }

}

 

function checkposition() {

       if (document.all) {

              if (document.all.ball.style.posLeft>=marginright) {

                     stepx=stepx*-1

                     document.all.ball.style.posLeft-=10

              }

              if (document.all.ball.style.posLeft<=marginleft) {

                     stepx=stepx*-1

                     document.all.ball.style.posLeft+=10

              }    

              if (document.all.ball.style.posTop>=marginbottom) {

                     stepy=stepy*-1

                     document.all.ball.style.posTop-=10

              }

              if (document.all.ball.style.posTop<=margintop) {

                     stepy=stepy*-1

                     document.all.ball.style.posTop+=10

              }

       }

       if (document.layers) {

              if (document.ball.left>=marginright) {

                     stepx=stepx*-1

                     document.ball.left-=10

              }

              if (document.ball.left<=marginleft) {

                     stepx=stepx*-1

                     document.ball.left+=10

              }    

              if (document.ball.top>=marginbottom) {

                     stepy=stepy*-1

                     document.ball.top-=10

              }

              if (document.ball.top<=margintop) {

                     stepy=stepy*-1

                     document.ball.top+=10

              }

       }

}

 

function chooseimage() {

       if (document.all) {

              if (stepx <= 0 && stepy <=0) {ballimage.src="sto/01.gif"}

              if (stepx >= 0 && stepy <=0) {ballimage.src="sto/02.gif"}

              if (stepx <= 0 && stepy >=0) {ballimage.src="sto/03.gif"}

              if (stepx >= 0 && stepy >=0) {ballimage.src="sto/04.gif"}

       }

      

       if (document.layers) {

              if (stepx <= 0 && stepy <=0) {document.ball.document.ballimage.src="sto/01.gif"}

              if (stepx >= 0 && stepy <=0) {document.ball.document.ballimage.src="sto/02.gif"}

              if (stepx <= 0 && stepy >=0) {document.ball.document.ballimage.src="sto/03.gif"}

if (stepx >= 0 && stepy >=0) {document.ball.document.ballimage.src="sto/04.gif"}}}

</SCRIPT>

 

 

<DIV id=ball style="POSITION: absolute; TOP: -50px"><IMG border=0 name=ballimage src="sto/01.gif"></DIV>

 

</body>

 

</html>

 

Write a comment

Comments: 0