0顶

超酷的旋转导航效果

稿源：互联网 2022-04-04 17:24:37 点击： 2118 撤稿纠错

前面是打弹子游戏效果，很新意，就是不知道有没耐心等。

以下讨论的是和导航旋转相关的超酷的旋转导航效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

要完成此效果需要两个步骤

第一步：把如下代码加入到<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>

第二步：把如下代码加入到<body>区域中

//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("http://www.alixixi.com/UploadPic/userface/no1323.jpg","http://www.alixixi.com/UploadPic/userface/no1323.jpg","http://www.alixixi.com/UploadPic/userface/no1323.jpg","http://www.alixixi.com/UploadPic/userface/no1323.jpg","http://www.alixixi.com/UploadPic/userface/no1323.jpg")
imgButCircle=new preLoad("http://www.alixixi.com/UploadPic/userface/no1323.jpg","http://www.alixixi.com/UploadPic/userface/no1323.jpg","http://www.alixixi.com/UploadPic/userface/no1323.jpg","http://www.alixixi.com/UploadPic/userface/no1323.jpg","http://www.alixixi.com/UploadPic/userface/no1323.jpg")

//How many "balls" do you have
numBalls=5

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;

/************************************************************************************************
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>
<DIV id=divStatCont><IMG alt="" border=0 height=43
src="http://www.alixixi.com/UploadPic/userface/no1323.jpg" width=125>
<DIV id=divStat></DIV></DIV>
<DIV id=divDHTML><IMG alt="" border=0 height=32
src="http://www.alixixi.com/UploadPic/userface/no1323.jpg" width=144> </DIV>
<DIV class=clButton id=divBut0><A
href="link.htm"><IMG alt=""
border=0 height=25 name=imgBut0 src="http://www.alixixi.com/UploadPic/userface/no1323.jpg"
width=25></A> </DIV>
<DIV class=clButton id=divBut1><A
href="link.htm"><IMG alt=""
border=0 height=25 name=imgBut1 src="http://www.alixixi.com/UploadPic/userface/no1323.jpg"
width=25></A> </DIV>
<DIV class=clButton id=divBut2><A
href="link.htm"><IMG alt=""
border=0 height=25 name=imgBut2 src="http://www.alixixi.com/UploadPic/userface/no1323.jpg"
width=25></A> </DIV>
<DIV class=clButton id=divBut3><A
href="link.htm"><IMG alt=""
border=0 height=25 name=imgBut3 src="http://www.alixixi.com/UploadPic/userface/no1323.jpg"
width=25></A> </DIV>
<DIV class=clButton id=divBut4><A
href="link.htm"><IMG alt=""
border=0 height=25 name=imgBut4 src="http://www.alixixi.com/UploadPic/userface/no1323.jpg"
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>

<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>

关于超酷的旋转导航效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2008071573.shtml方便下次再访问哦。

·上一篇： 页面顶部的多级导航条
·下一篇： 导航菜单特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

超酷的旋转导航效果

文章分类LIST >>返回首页

最新游戏

最新新闻