读书人

js简略实现tab滚动方法

发布时间: 2012-10-24 14:15:58 作者: rapoo

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

热点推荐