程式師世界 >> 編程語言 >> 網頁編程 >> ASP編程 >> ASP技巧 >> 用鼠標控制滾動的菜單條！(JavaScript)

用鼠標控制滾動的菜單條！(JavaScript)

編輯：ASP技巧

第一步，將下面的代碼加<head>與</head>之間

//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>之間