 |
|
|
 首页 |
名片设计 CorelDRAW Illustrator AuotoCAD Painter 其他软件 Photoshop Fireworks Flash |
|
第一步，将下面的代码加<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> 返回类别: 教程 上一教程: JAVA线程的深入探讨 下一教程: JSP页面文件目录树源码(递归算法) 您可以阅读与"用鼠标控制滚动的菜单条！(JAVASCRIPT)"相关的教程: · 加入一客户定义的菜单项到已有的应用程序中(BlackBerry,Model:7520) · JSP+JAVASCRIPT打造二级级联下拉菜单 · 用Java创建带图像的菜单 · JSP+JAVASCRIPT打造级连菜单 · 怎样让Java图形界面程序启动时没有控制台窗口？ |
  |
| 快精灵印艺坊 版权所有 |
首页 会员中心在线印刷在线编辑付款方式索取样品设计指南连锁门店
|
||
