滚动菜单栏实现-优快云博客

[code]<html>
<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>

</head>

<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://" οnmοuseοver="noScroll=false; mLeft()" οnmοuseοut="noMove()">
<img src="images/013-r.gif" width=16 height=16 border=0></A></div>

<div id="divArrowRight"><a href="javascript://" οnmοuseοver="noScroll=false; mRight()" οnmοuseοut="noMove()">
<img src="images/013-l.gif" width=16 height=16 border=0></a></div>
</div>
</body>
</html>[/code]

鼠标控制滚动的菜单条