96、进入页面异常酷的效果

96、进入页面异常酷的效果

<STYLE>DIV {

       POSITION: absolute

}

DIV.clButton {

       HEIGHT: 20px; TOP: -200px; WIDTH: 20px

}

#divStat {

       HEIGHT: 20px; LEFT: 8px; TOP: 12px; WIDTH: 130px

}

#divStatCont {

       HEIGHT: 45px; TOP: -200px; WIDTH: 125px

}

SPAN.clStat {

       COLOR: #606fa2; FONT-FAMILY: arial,helvetica; FONT-SIZE: 10px

}

#divDHTML {

       TOP: 20px; WIDTH: 100px

}

DIV.clLink {

       FONT-FAMILY: arial,helvetica; FONT-SIZE: 12px; FONT-WEIGHT: bold; VISIBILITY: hidden

}

#divExplain {

       FONT-FAMILY: arial,helvetica; FONT-SIZE: 12px

}

</STYLE>

 

<SCRIPT language=JavaScript>

 

function checkBrowser(){

       this.ver=navigator.appVersion

       this.dom=document.getElementById?1:0

       this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;

       this.ie4=(document.all && !this.dom)?1:0;

       this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;

       this.ns4=(document.layers && !this.dom)?1:0;

       this.ie=this.ie4||this.ie5

       this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)

       return this

}

bw=new checkBrowser()

 

//Preload

function preLoad(){

       for(i=0;i<arguments.length;i++){

              this[i]=new Image()

              this[i].src=arguments[i] 

       }

       return this

}

 

//Place your images in here

imgButLetter=new preLoad("letter_1.gif","letter_2.gif","letter_3.gif","letter_4.gif","letter_5.gif")

imgButCircle=new preLoad("button_4.gif","button_4.gif","button_4.gif","button_4.gif","button_4.gif")

 

//How many "balls" do you have

numBalls=5

 

function makePageCoords(){

       this.x=0;this.x2=(bw.ns4 || bw.ns5)?innerWidth:document.body.offsetWidth-20;

       this.y=0;this.y2=(bw.ns4 || bw.ns5)?innerHeight:document.body.offsetHeight-5;

       this.x50=this.x2/2;  this.y50=this.y2/2;

       return this;

}

function makeObj(obj,nest){

       nest=(!nest) ? '':'document.'+nest+'.'                                                                     

       this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;

      this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;             

       this.ref=bw.ns4?this.css.document:document;

       this.width=bw.ns4?this.css.document.width:this.el.offsetWidth

       this.moveBy=b_moveBy; this.moveIt=b_moveIt; this.writeIt=b_writeIt;

       this.slide=b_slide; this.slideIt=b_slideIt;

       this.showIt=b_showIt; this.hideIt=b_hideIt;

       this.obj = obj + "Object";     eval(this.obj + "=this")

}

function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}

function b_moveBy(x,y){this.x+=x; this.y+=y; this.css.left=this.x; this.css.top=this.y}

function b_showIt(){this.css.visibility="visible"}

function b_hideIt(){this.css.visibility="hidden"}

function b_writeIt(text){

       if(bw.ns4){this.ref.write(text);this.ref.close()}

       else this.el.innerHTML=text

}

function s_writeIt(text){

       text='<span class="clStat">'+text+'</span>'

       this.write(text)

}

function b_slideIt(endx,endy,inc,speed,fn,wh) {

if (!this.slideactive) {var distx = endx - this.x;var disty = endy - this.y

var num = Math.sqrt(Math.pow(distx,2) + Math.pow(disty,2))/inc

var dx = distx/num;var dy = disty/num

this.slideactive = 1; this.slide(dx,dy,endx,endy,speed,fn,wh)}}

function b_slide(dx,dy,endx,endy,speed,fn,wh) {

if (!fn) fn = null; if(!wh) wh=null

if (this.slideactive && (Math.floor(Math.abs(dx))<Math.floor(Math.abs(endx-this.x)) || Math.floor(Math.abs(dy))<Math.floor(Math.abs(endy-this.y)))) {

this.moveIt(this.x+dx,this.y+dy); eval(wh)

slidTim=setTimeout(this.obj+".slide("+dx+","+dy+","+endx+","+endy+","+speed+",'"+fn+"','"+wh+"')",speed)

}else{this.slideactive = 0;this.moveIt(endx,endy);eval(fn)}}

 

function ballInit(){

       page=new makePageCoords()

       //Set the stop placements of each ball:

       ballXstop=new Array(page.x50-70,page.x50-40,page.x50-10,page.x50+20,page.x50+50)

       ballYstop=new Array(page.y50-12,page.y50-12,page.y50-12,page.y50-12,page.y50-12)

       //Set the angles of each ball

       angles=new Array(-180,-90,0,90,180)

      

       oBut=new Array()

       for(i=0;i<numBalls;i++){

              oBut[i]=new makeObj('divBut'+i)

              oBut[i].text=new makeObj('divLink'+i)

              oBut[i].moveIt(i*100,-50)

       }

       oStat=new makeObj('divStat','divStatCont')

       oStat.write=b_writeIt;

       oStat.writeIt=s_writeIt;

       oStatCont=new makeObj('divStatCont')

       oStatCont.moveIt(page.x2-135,page.y2-50)

       oDHTML=new makeObj('divDHTML')

       oDHTML.moveIt(page.x50-72,page.y50-13)

       doBall()

}

/************************************************************************************************

Ballpart start

***********************************************************************************************/

var ballBottom

var ballTop=0

var ballSpeed=25

var ballRight

var ballLeft=0

var xsling=60

var ysling=20

var got=0

ballGoing=true;

 

function fall(count){

       var fover=false

       for(var i=0;i<oBut.length;i++){

              if(oBut[i].ball.ready){

                     num=Math.round(Math.random()*4)

                     oBut[i].ref["imgBut"+i].src=imgButLetter[num].src

                     if(count==400 || count==550 || count==700){

                            oBut[i].ball.moveXpx-=2

                            oBut[i].ball.moveYpx+=2

                     }

                     fover=true

                     if(oBut[i].y<ballBottom && !oBut[i].ball.way){

                            if(oBut[i].x>ballRight-16 && oBut[i].x<ballRight) oBut[i].ball.xmove=-oBut[i].ball.moveXpx

                            else if(oBut[i].x>ballLeft-8 && oBut[i].x<ballLeft+8) oBut[i].ball.xmove=oBut[i].ball.moveXpx

                            oBut[i].moveBy(oBut[i].ball.xmove,oBut[i].ball.moveYpx)

                            oBut[i].ball.way=0

                     }else{

                            oBut[i].ball.way=1

                     }

                     if(oBut[i].y>ballTop && oBut[i].ball.way){

                            if(oBut[i].x>ballRight-16 && oBut[i].x<ballRight) oBut[i].ball.xmove=-oBut[i].ball.moveXpx

                            else if(oBut[i].x>ballLeft-8 && oBut[i].x<ballLeft+8) oBut[i].ball.xmove=oBut[i].ball.moveXpx

                            oBut[i].moveBy(oBut[i].ball.xmove,-oBut[i].ball.moveYpx)

                            oBut[i].ball.way=1

                     }else{

                            oBut[i].ball.way=0

                     }

                     if((oBut[i].x>oBut[i].ball.xpos-xsling && oBut[i].x<oBut[i].ball.xpos+xsling) && (oBut[i].y>oBut[i].ball.ypos-ysling && oBut[i].y<oBut[i].ball.ypos+ysling)){

                            oBut[i].ball.ready=false

                            oBut[i].ref["imgBut"+i].src=imgButLetter[i].src

                            oBut[i].slideIt(oBut[i].ball.xpos,oBut[i].ball.ypos,3,10)

                            got++

                            if(got!=oBut.length) oStat.writeIt('www.jzzy.com.<br>'+got +' placed, '+ (oBut.length-got) +' to go')

                            else{

                                   afterBall()

                            }

                     }

              }

       }

       count++

       if(fover)setTimeout("fall("+count+")",ballSpeed)

}

function makeBall(xspeed,yspeed,xpos,ypos){

       this.xpos=xpos

       this.ypos=ypos

       this.way=0

       this.ready=true

       this.moveXpx=xspeed

       this.moveYpx=yspeed

       num=Math.round(Math.random())

       if(num)   this.xmove=4

       else this.xmove=-4

       return this

}

function doBall(){

       oStat.writeIt('JavaScript')

       ballBottom=(bw.ie)?page.y2-27:page.y2-10;

       ballRight=(bw.ie)?page.x2-27:page.x2-5;

       for(i=0;i<oBut.length;i++){

              num=Math.round(Math.random()*3)

              oBut[i].ball=new makeBall(16-num-1,16-num,ballXstop[i],ballYstop[i])

       }

       fall(0)

}

 

function afterBall(){

       oStat.writeIt('JavaScript')

       ballGoing=false

       setTimeout("oDHTML.hideIt(); oStat.writeIt('welcome'); stopLetter("+oBut.length+")",300)

}

function stopLetter(num){

       if(num>0){

              num--

              oBut[num].ref["imgBut"+num].src=imgButCircle[num].src

              setTimeout("stopLetter("+num+")",100)

       }else{

              oStat.writeIt('网页特效代码')

              slideCircles(0)

       }

}

function slideCircles(num){

       if(num<30){

              for(i=0;i<oBut.length;i++){oBut[i].moveBy(-4+(i*2),0)}

              num++; setTimeout("slideCircles("+num+")",40)

       }else{

              oStat.writeIt('7stk.com.')

              c_left=oBut[2].x; c_top=oBut[2].y; circleCircles(0,0)

       }

}

var c_left,c_top; var angle=0;

function circleCircles(num,speed){

       if(num<361){

              for(i=0;i<oBut.length;i++){oBut[i].moveIt(Math.round(c_left + angles[i]*Math.cos(angle*Math.PI/180)),Math.round(c_top + angles[i]*Math.sin(angle*Math.PI/180)))}

              angle+=speed;

              if(num<180)   speed=speed+0.2; else speed=speed-0.2

              num++;setTimeout("circleCircles("+num+","+speed+")",15)

       }else{

              end(0)

       }

}

function end(num){

       if(num<oBut.length){

              oBut[num].text.moveIt((oBut[num].x+17)-(oBut[num].text.width/2),oBut[num].y+30)

              oBut[num].text.showIt()

              num++

              setTimeout("end("+num+")",100)

       }else{

              oStat.writeIt('JavaScript')

       }

}

onload=ballInit;

 

</SCRIPT>

 

<DIV id=divExplain></DIV>

<DIV id=divStatCont>

<DIV id=divStat></DIV></DIV>

<DIV id=divDHTML><IMG alt="" border=0 height=32 src="dhtml.gif"

width=144> </DIV>

<DIV class=clButton id=divBut0><A

href="http://www.7stk.com"><IMG alt=""

border=0 height=25 name=imgBut0 src="letter_1.gif" width=25></A> </DIV>

<DIV class=clButton id=divBut1><A

href="http://www.7stk.com"><IMG alt=""

border=0 height=25 name=imgBut1 src="letter_2.gif" width=25></A> </DIV>

<DIV class=clButton id=divBut2><A

href="http://www.7stk.com"><IMG alt=""

border=0 height=25 name=imgBut2 src="letter_3.gif" width=25></A> </DIV>

<DIV class=clButton id=divBut3><A

href="http://www.7stk.com"><IMG alt=""

border=0 height=25 name=imgBut3 src="letter_4.gif" width=25></A> </DIV>

<DIV class=clButton id=divBut4><A

href="http://www.7stk.com"><IMG alt=""

border=0 height=25 name=imgBut4 src="letter_5.gif" width=25></A> </DIV>

<DIV class=clLink id=divLink0>Link 1 </DIV>

<DIV class=clLink id=divLink1>Link 2 </DIV>

<DIV class=clLink id=divLink2>Link 3 </DIV>

<DIV class=clLink id=divLink3>Link 4 </DIV>

<DIV class=clLink id=divLink4>Link 5 </DIV>

 

 

Write a comment

Comments: 1
  • #1

    csr04 (Tuesday, 01 September 2009 14:07)

    test