您的位置：首页 > Web前端 > JavaScript

用鼠标控制滚动的菜单条！(JavaScript)

2008-05-01 06:23 260 查看

第一步，将下面的代码加<head>与</head>之间

<style>

body{background-color:#ffffff}

a{color:navy; text-decoration:none}

a:hover{color:red}

a:visited:{color:#808080}

td{font-family:arial,helvetica; font-size:10pt}

#divbg{position:absolute; z-index:10; width:200; left:0; height:100; clip:rect(0,10,10,0)}

#divmenu{position:absolute; left:15; top:6; font-weight:bold}

#divarrowleft{position:absolute; width:20; height:20; left:0; top:9}

#divarrowright{position:absolute; width:20; height:20; top:9}

</style><script>

//simple browsercheck

var n = (document.layers) ? 1:0;

var ie = (document.all) ? 1:0;

//the height of the menu

menuheight=22

//width of the arrows

arrowwidth=16

//scroll speed: (in milliseconds, change this one and the next variable to change the speed)

scrollspeed=20

//pixels to scroll per timeout.

scrollpx=10

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

scrolling functions

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

var tim;

var noscroll=true

function mleft(){

if(!noscroll && omenu.x<arrowwidth){

omenu.moveby(scrollpx,0)

tim=settimeout("mleft()",scrollspeed)

}

}

function mright(){

if(!noscroll && omenu.x>-(omenu.scrollwidth-(pagewidth))-arrowwidth){

omenu.moveby(-scrollpx,0)

tim=settimeout("mright()",scrollspeed)

}

}

function nomove(){cleartimeout(tim); noscroll=true}

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

object part

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

function makeobj(obj,nest,num){

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

this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')

this.evnt=(n)? eval(nest+'document.'+obj):eval(obj);

this.scrollwidth=n?this.css.document.width:this.evnt.offsetwidth

this.x=(n)? this.css.left:this.evnt.offsetleft; this.y=(n)?

this.css.top:this.evnt.offsettop;

this.moveby=b_moveby; this.moveit=b_moveit; this.showit=b_showit;this.clipto=b_clipto;

return this

}

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

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

function b_clipto(t,r,b,l){

if(n){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l

}else this.css.clip="rect("+t+","+r+","+b+","+l+")";

}

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

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

object part end

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

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

init function. set the placements of the objects here.

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

function side_init(){

//width of the menu, currently set to the width of the document.

//if you want the menu to be 500px wide for instance, just

//set the the pagewidth=500 in stead.

pagewidth=(n)?innerwidth:document.body.offsetwidth-20;

obg=new makeobj('divbg')

omenu=new makeobj('divmenu','divbg')

oarrowright=new makeobj('divarrowright','divbg')

//placement

obg.moveit(0,0) //main div, holds all the other divs.

omenu.moveit(arrowwidth,6)

oarrowright.moveit(pagewidth-arrowwidth,9)

//setting the width and the visible area of the links.

if(ie){ obg.css.width=pagewidth; obg.css.overflow="hidden"}

obg.clipto(0,pagewidth,menuheight,0)

}

//executing the init function on pageload.

onload=side_init;

</script>

第二步：将下面的原代码加入<body>与</body>之间

<div id="divbg">

<div id="divmenu">

<table><tr><td nowrap>

[<a href="#">link 1</a>] ? [<a href="#">link

2</a>] ? [<a href="#">link 3</a>] ? [<a href="#">link

4</a>] ? [<a href="#">link 5</a>] ?

[<a href="#">link 6</a>] ?

[<a href="#">link 7</a>] ?

[<a href="#">link 8</a>] ?

[<a href="#">link 9</a>] ?

[<a href="#">link 10</a>] ?

[<a href="#">link 11</a>] ?

[<a href="#">link 12</a>] ?

[<a href="#">link 13</a>] ?

[<a href="#">link 14</a>] ?

[<a href="#">link 15</a>] ?

[<a href="#">link 16</a>] ?

[<a href="#">link 17</a>] ?

[<a href="#">link 18</a>] ?

[<a href="#">link 19</a>] ?

[<a href="#">link 20</a>] ?

[<a href="#">link 21</a>] ?

[<a href="#">link 22</a>] ?

[<a href="#">link 23</a>] ?

[<a href="#">link 24</a>] ?

[<a href="#">link 25</a>] ?

[<a href="#">link 26</a>] ?

[<a href="#">link 27</a>] ?

[<a href="#">link 28</a>] ?

[<a href="#">link 29</a>] ?

[<a href="#">link 30</a>]

</td></tr></table>

</div>

<div id="divarrowleft"><a href="javascript://" onmouseover="noscroll=false; mleft()" onmouseout="nomove

()"><img src="images/013-r.gif" width=16 height=16 border=0></a></div>

<div id="divarrowright"><a href="javascript://" onmouseover="noscroll=false; mright()" onmouseout="nomove

()"><img src="images/013-l.gif" width=16 height=16 border=0></a></div>

</div>

<

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航