超酷的旋转导航效果
<!-- 要实现此效果需要 2 个步骤： -->
<!-- 第 1 步： -->
<!-- 把下面的代码加到<HEAD></HEAD>区域中： -->
<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>
<!-- 第 2 步： -->
<!-- 把下面的代码加到<BODY></BODY>区域中： -->
<script>
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("../images/311/1602.gif","../images/311/1603.gif","../images/311/1604.gif","../images/311/1605.gif","../images/311/1602.gif")
imgButCircle=new preLoad("../images/311/1602.gif","../images/311/1603.gif","../images/311/1604.gif","../images/311/1605.gif","../images/311/1602.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)}}
/************************************************************************************************
Initiating page. Setting variables. Making objects. Starting animation
***********************************************************************************************/
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('看到效果了没...<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 Fairyland')
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)
}
/************************************************************************************************
Ball part end
***********************************************************************************************/
/************************************************************************************************
After ball part
***********************************************************************************************/
function afterBall(){
oStat.writeIt('Javascript Fairyland')
ballGoing=false
setTimeout("oDHTML.hideIt(); oStat.writeIt('Making circles'); 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('Javascript Fairyland')
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('Javascript Fairyland')
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 Fairyland')
}
}
/************************************************************************************************
After ball part end
***********************************************************************************************/
//Starting animation of page load.
onload=ballInit;
</script>
<DIV id=divExplain></DIV><!-- Stat part -->
<DIV id=divStatCont><IMG alt="" border=0 height=43
src=http://www.webasp.net/javascript/1/"../images/311/title_bg_show.gif" width=125>
<DIV id=divStat></DIV></DIV><!-- Menu -->
<DIV id=divDHTML><IMG alt="" border=0 height=32
src=http://www.webasp.net/javascript/1/"../images/311/title_bg_show.gif" width=144> </DIV><!-- Place your links in the hrefs below -->
<DIV class=clButton id=divBut0><A
href="link.htm"><IMG alt=""
border=0 height=25 name=imgBut0 src=http://www.webasp.net/javascript/1/"../images/311/title_bg_show.gif"
width=25></A> </DIV>
<DIV class=clButton id=divBut1><A
href="link.htm"><IMG alt=""
border=0 height=25 name=imgBut1 src=http://www.webasp.net/javascript/1/"../images/311/98/letter_2.gif"
width=25></A> </DIV>
<DIV class=clButton id=divBut2><A
href="link.htm"><IMG alt=""
border=0 height=25 name=imgBut2 src=http://www.webasp.net/javascript/1/"../images/311/98/letter_3.gif"
width=25></A> </DIV>
<DIV class=clButton id=divBut3><A
href="link.htm"><IMG alt=""
border=0 height=25 name=imgBut3 src=http://www.webasp.net/javascript/1/"../images/311/98/letter_4.gif"
width=25></A> </DIV>
<DIV class=clButton id=divBut4><A
href="link.htm"><IMG alt=""
border=0 height=25 name=imgBut4 src=http://www.webasp.net/javascript/1/"../images/311/98/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>
|
您当前的位置：
技术文章导航