js简略实现tab滚动方法

2012-10-24

js简单实现tab滚动方法方法：主要通过js控制tab所属容器的 scrollLeft 属性值变动即可，连续效果通过 setInt

js简单实现tab滚动方法
方法：主要通过js控制tab所属容器的 scrollLeft 属性值变动即可，连续效果通过 setInterval(function,speed) 方法来控制移动速度
<HTML >
<HEAD>
<TITLE></TITLE>
<META http-equiv=Content-Type CONTENT="text/html; charset=gb2312">
<LINK HREF="<%=request.getContextPath() %>/Css/default.css" type=text/css rel=stylesheet>
<LINK HREF="<%=request.getContextPath() %>/Css/style.css" TYPE="text/css" rel=stylesheet>
<LINK HREF="<%=request.getContextPath() %>/Css/tab2011.css" TYPE="text/css" rel=stylesheet>
<script src="<%=request.getContextPath() %>/Js/tab2011.js" type="text/javascript" ></script>
<style>
html{margin:0px;overflow:hidden;}
body{margin:0px;overflow:hidden;}
</style>
</HEAD>
<body>
<table style="width:100%;height:100%;" cellpadding="0" cellspacing="0">
<tr height="25px">
<td width="100%" style="float:left;margin-bottom:-2px;width:91%;height:25px;overflow:hidden;">
    <div id="spans" style="float:left;width:1300px;">
         <span style="padding:2;float:right;cursor:hand;border:thin dotted 1px red;" onmouseover="scrollR();" onmouseout="scrollStop();">
        <font color=red><B>→</B></font>
</span>
    <span title="鼠标在上向左移动，移开鼠标停止" style="padding:2;float:right;cursor:hand;border:thin dotted 1px red;" onmouseover="scrollL();" onmouseout="scrollStop();">
       <font color=red><b>←</b></font>
</span> 
    </div>
</td>
</tr>

</table>

<script>

var speed=500;

var sd_width=parseInt(spans.offsetWidth);
//spans.style.width=sd_width*1.5;

var MyMar=null;

function getWidth(){
alert('demo.scrollLeft: '+demo.scrollLeft+' demo.offsetWidth: '+demo.offsetWidth+' spans.offsetWidth: '+spans.offsetWidth+' spans.style.width: '+spans.style.width);
}
function scrollL2() { getWidth(); demo.scrollLeft=demo.scrollLeft-100; alert(demo.scrollLeft);}
function scrollR2() { getWidth(); demo.scrollLeft=demo.scrollLeft+100;}

function scrollL() {MyMar=setInterval(MarqueeL,speed);}

function scrollR() {MyMar=setInterval(MarqueeR,speed);}

function scrollStop() {if(!(MyMar==null || MyMar=="")){clearInterval(MyMar);}}

function MarqueeL(){
if(parseInt(demo.scrollLeft)+parseInt(demo.offsetWidth)>parseInt(spans.offsetWidth))
{
scrollStop();
}
demo.scrollLeft+=50;
}

function MarqueeR(){
demo.scrollLeft-=50;
}

</script>
</BODY>
</HTML>

热点排行

JavaScript

js简略实现tab滚动方法