用鼠标控制滚动的菜单条！JavaScript -pc6资讯

您的位置：首页 → 技术开发 → ASP技巧 → 用鼠标控制滚动的菜单条！JavaScript

用鼠标控制滚动的菜单条！JavaScript 时间：2004/11/7 4:04:00来源：本站整理作者：蓝点我要评论(0)

第一步，将下面的代码加与之间

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}

" _ue_custom_node_="true">

//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-(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;

" _ue_custom_node_="true">

文章评论

查看所有0条评论>>

热门文章 没有查询到任何记录。