js简单实现tab滚动方法 -

leeqoo

浏览: 123938 次

最近访客更多访客>>

PROFANS

blacknike8294

testjiang3

蕃薯耀

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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%" class="td2">
   <div id="demo" style="float:left;margin-bottom:-2px;width:91%;height:25px;overflow:hidden;">
    <div id="spans" style="float:left;width:1300px;">
         <span class="menu6" onclick="linkUrlb('http://www.baidu.com','menu6','menu5');" title="demo1">demo1</span>
         <span class="menu5" onclick="linkUrlb('http://www.baidu.com','menu6','menu5');" title="demo2">demo2</span>
         <span class="menu5" onclick="linkUrlb('http://www.baidu.com','menu6','menu5');" title="demo3">demo3</span>
         <span class="menu5" onclick="linkUrlb('http://www.baidu.com','menu6','menu5');" title="demo4">demo4</span>
         <span class="menu5" onclick="linkUrlb('http://www.baidu.com','menu6','menu5');" title="demo5">demo5</span>
         <span class="menu5" onclick="linkUrlb('http://www.baidu.com','menu6','menu5');" title="demo6">demo6</span>
         <span class="menu5" onclick="linkUrlb('http://www.baidu.com','menu6','menu5');" title="demo7">demo7</span>
         <span class="menu5" onclick="linkUrlb('http://www.baidu.com','menu6','menu5');" title="demo8">demo8</span>
         <span class="menu5" onclick="linkUrlb('http://www.baidu.com','menu6','menu5');" title="demo9">demo9</span>
         <span class="menu5" onclick="linkUrlb('http://www.baidu.com','menu6','menu5');" title="demo10">demo10</span>
         <span class="menu5" onclick="linkUrlb('http://www.baidu.com','menu6','menu5');" title="demo11">demo11</span>
    </div>
   </div>

    <div style="float:right;margin-bottom:-2px;width:8%;height:25px;overflow:hidden;">
    <span title="鼠标在上向右移动，移开鼠标停止" class="menu5" 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="鼠标在上向左移动，移开鼠标停止" class="menu5" 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>

tab_js_css.rar (1.9 KB)
下载次数: 20

查看图片附件

分享到：

SyntaxHighlighter 代码高亮组件 | DB tools 收集

2012-04-17 12:06
浏览 3152
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js简单实现tab滚动方法

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js简单实现tab滚动方法

评论

发表评论

相关推荐

setTimeout , setInterval

常用正在表达式

Window.Open详解

ztree左侧菜单jspDemo

淘宝的菜单树

8款流行经典的企业网站常见css横向导航菜单

简洁网上商城左侧鼠标点击展开与收缩

经典蓝色横向二级导航栏

漂亮的蓝色横向二级导航菜单代码

很好的导航参考网站

绿色质感菜单

jquery左侧点击展开二级菜单导航插件

Jquery实现竖导航网页菜单

防京东左侧菜单

JS 实现滚动条的一个好资料

QUI 的 treeTable

仿 浏览器tab效果实现

SyntaxHighlighter 代码高亮组件

window.showModalDialog 传值

资料收集

最近访客更多访客>>

仿浏览器tab效果实现