JAVA涂鸦
关于JAVA的点点滴滴
posts - 50,  comments - 689,  trackbacks - 0
< html >
< head >
< title > 仿QQ导航菜单 </ title >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< style  type ="text/css" >
body
{
    text-align
: center ;
}

.titleStyle
{
    width
: 190px ;
    line-height
: 26px ;
    background-color
: #008800 ;
    color
: #ffffff ;
    border-top
: 1px solid #FFFFFF ;
    font-size
: 12px ;
}

.contentStyle
{
    width
: 180px ;
    height
: 340px ;
    background-color
: #eeffee ;
    color
: blue ;
    font-size
: 12px ;
}

a
{
    width
: 178px ;
    height
: 20px ;
    background
: #F9CDB2 ;
    font
: 12px/20px tahoma ;
    display
: block ;
    color
: blue ;
    text-decoration
: none ;
    border-top
: 1px solid #eeffee ;
}

a:hover 
{
    width
: 158px ;
    border-width
: 1px 10px ;
    border-style
: solid ;
    border-color
: #e57939 ;
}

</ style >
< script  language ="javascript1.5"  type ="text/javascript" >
<!--
var  stepNo = 10 ;
var  runtimes = 0 ;
var  toItemIndex = 3 ;
var  onItemIndex = 3 ;

function  changeItem(clickItemIndex) {
    toItemIndex
= clickItemIndex;
    
if (toItemIndex - onItemIndex > 0 )
        moveUp();
    
else  
        moveDown();
    runtimes
++ ;
    
if (runtimes >= stepNo) {
        onItemIndex
= toItemIndex;
        runtimes
= 0 ;
    }

    
else
        setTimeout(
" changeItem(toItemIndex) " , 10 );
}


function  moveUp() {
    
for (i = onItemIndex + 1 ;i <= toItemIndex;i ++ )
        document.getElementById(i).style.top
= parseInt(document.getElementById(i).style.top) - 34 ;
}


function  moveDown() {
    
for (i = onItemIndex;i > toItemIndex;i -- )
        document.getElementById(i).style.top
= parseInt(document.getElementById(i).style.top) + 34 ;
}

// -->
</ script >
</ head >
< body  onload ="changeItem(0)" >
< div  id =itemsLayer  style =" overflow:hidden;position:absolute;border:1px solid #008800;left:50px;top:100px;width:180px;height:445px;" >
< div  id =0  style ="position:relative;left:0;top:0;width:179px;" >
        
< div  onclick =changeItem(0)  class ="titleStyle" > 00 </ div >
        
< div  class ="contentStyle" >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
        
</ div >
</ div >
< div  id =1  style ="position:relative;left:0;top:-340px;width:179px;" >
        
< div  onclick =changeItem(1)  class ="titleStyle" > 01 </ div >
        
< div  class ="contentStyle" >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
        
</ div >
</ div >
< div  id =2  style ="position:relative;left:0;top:-680px;width:179px;" >
        
< div  onclick =changeItem(2)  class ="titleStyle" > 02 </ div >
        
< div  class ="contentStyle" >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
        
</ div >
</ div >
< div  id =3   style ="position:relative;left:0;top:-1020px;width:179px;" >
        
< div  onclick =changeItem(3)  class ="titleStyle" > 03 </ div >
        
< div  class ="contentStyle" >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
                    
< href ="#" > 链接 </ a >
        
</ div >
</ div >
</ div >

</ body >
</ html >
posted on 2007-04-01 16:41 千山鸟飞绝 阅读(254) 评论(0)  编辑  收藏 所属分类: JavaScript

只有注册用户登录后才能发表评论。


网站导航:
 
正在阅读:



<2019年9月>
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345

常用链接

留言簿(35)

随笔档案

文章分类

文章档案

好友的blog

我的其他blog

老婆的Blog

搜索

  •  

积分与排名

  • 积分 - 750298
  • 排名 - 50

最新评论

阅读排行榜

评论排行榜