捲動式選單

woff · 發表於 2010-1-22 00:41:07

<style type="text/css">
#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 type="text/javascript" language="javascript">
function checkBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new checkBrowser()
sLeft=0
sTop=0
sMenuheight=30
sArrowwidth=15
sScrollspeed=20
sScrollPx=10
/*
Scrolling functions
*/
var tim=0
var noScroll=true
function mLeft(){
if(!noScroll && oMenu.x<sArrowwidth){
oMenu.moveBy(sScrollPx,0)
tim=setTimeout("mLeft()",sScrollspeed)
}
}
function mRight(){
if(!noScroll && oMenu.x>-(oMenu.scrollWidth-(pageWidth))-sArrowwidth){
oMenu.moveBy(-sScrollPx,0)
tim=setTimeout("mRight()",sScrollspeed)
}
}
function noMove(){clearTimeout(tim); noScroll=true}
/*
Object part
*/
function makeObj(obj,nest,menu){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;
this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;
this.scrollWidth=bw.ns4?this.css.document.width:this.evnt.offsetWidth
this.x=(bw.ns4 || bw.ns5)? this.css.left:this.css.pixelLeft;
this.y=(bw.ns4 || bw.ns5)? this.css.top:this.css.pixelTop;
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(bw.ns4){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
*/
function sideInit(){
pageWidth=(bw.ns4 || bw.ns5)?innerWidth:document.body.offsetWidth-20;
oBg=new makeObj('divBg')
oMenu=new makeObj('divMenu','divBg',1)
oArrowRight=new makeObj('divArrowRight','divBg')
oBg.moveIt(sLeft,sTop)
oMenu.moveIt(sArrowwidth,6)
oArrowRight.moveIt(pageWidth-sArrowwidth,9)
if(bw.dom || bw.ie4){ oBg.css.width=pageWidth; oBg.css.overflow="hidden" }
oBg.clipTo(0,pageWidth,sMenuheight,0)
}
onload=sideInit;
</script>
<div id="divBg">
<div id="divMenu"><table><tr><td nowrap>
<a href="<a href=http://topia.yam.com/home/livemusic/pages/index.htm" target=_blank>http://topia.yam.com/home/livemusic/pages/index.htm"</a> target="_blank"><font size="3">連結網頁一</font></a><font size="3">
<a href="<a href=http://topia.yam.com/home/livemusic/pages/index.htm" target=_blank>http://topia.yam.com/home/livemusic/pages/index.htm"</a> target="_blank"><font size="3">連結網頁二</font></a><font size="3">
<a href="<a href=http://topia.yam.com/home/livemusic/pages/index.htm" target=_blank>http://topia.yam.com/home/livemusic/pages/index.htm"</a> target="_blank"><font size="3">連結網頁三</font></a><font size="3">
<a href="<a href=http://topia.yam.com/home/livemusic/pages/index.htm" target=_blank>http://topia.yam.com/home/livemusic/pages/index.htm"</a> target="_blank"><font size="3">連結網頁四</font></a><font size="3">
<a href="<a href=http://topia.yam.com/home/livemusic/pages/index.htm" target=_blank>http://topia.yam.com/home/livemusic/pages/index.htm"</a> target="_blank"><font size="3">連結網頁五</font></a><font size="3">
<a href="<a href=http://topia.yam.com/home/livemusic/pages/index.htm" target=_blank>http://topia.yam.com/home/livemusic/pages/index.htm"</a> target="_blank"><font size="3">連結網頁六</font></a><font size="3">
<a href="<a href=http://topia.yam.com/home/livemusic/pages/index.htm" target=_blank>http://topia.yam.com/home/livemusic/pages/index.htm"</a> target="_blank"><font size="3">連結網頁七</font></a><font size="3">
<a href="<a href=http://topia.yam.com/home/livemusic/pages/index.htm" target=_blank>http://topia.yam.com/home/livemusic/pages/index.htm"</a> target="_blank"><font size="3">連結網頁八</font></a><font size="3">
<a href="<a href=http://topia.yam.com/home/livemusic/pages/index.htm" target=_blank>http://topia.yam.com/home/livemusic/pages/index.htm"</a> target="_blank"><font size="3">連結網頁九</font></a><font size="3">
<a href="<a href=http://topia.yam.com/home/livemusic/pages/index.htm" target=_blank>http://topia.yam.com/home/livemusic/pages/index.htm"</a> target="_blank"><font size="3">連結網頁十</font></a>
</font></font></font></font></font></font></font></font></font></td></tr></table>
</div>
　<div id="divArrowLeft"><a href="javascript://" onmouseover="noScroll=false; mLeft()" onmouseout="noMove()"><img src="<a href=http://home.kimo.com.tw/dislee1/1" target=_blank>http://home.kimo.com.tw/dislee1/1"</a> width=20 height=20 border=0></A></div>
　<div id="divArrowRight"><a href="javascript://" onmouseover="noScroll=false; mRight()" onmouseout="noMove()"><img src="<a href=http://home.kimo.com.tw/dislee1/2" target=_blank>http://home.kimo.com.tw/dislee1/2"</a> width=20 height=20 border=0></a></div>
</div><br>

複製代碼

<a href="http://topia.yam.com/home/livemusic/pages/index.htm" target="_blank"><font size="3">連結網頁一</font></a><font size="3">修改連結文字與大小及連結網址和跳頁方式
<img src="http://home.kimo.com.tw/dislee1/1" width=20 height=20 border=0></A>修改圖片網址

enn1000 · 發表於 2013-11-14 00:43:30

不錯，看看。

dcnddmbr · 發表於 2013-11-14 00:43:30

ding 支持

dcnddmbr · 發表於 2013-11-14 00:43:30

支持~~頂頂~~~

迟汁广必 · 發表於 2014-6-13 00:54:19

呵呵,支持一下！

帳號		自動登錄		找回密碼
密碼				註冊

[教學] 捲動式選單