如何实现li选项卡左右滚动效果

hope96999 2009-09-14 11:06:21

如何实现li选项卡左右滚动效果

< < | tabs1 | tabs2 | tabs3 | >>

假设页面只显示3个选项卡，单击“>>” 第4个左移，第一个消失。这样的效果。

...全文

278 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

hope96999 2009-09-14

打赏
举报

[Quote=引用 2 楼 saishangpeiqian 的回复:]
直接去运行上面的，随便改改就ok了
[/Quote]

这个例子我之前也运行了一下，感觉不是那种我需要的。这个例子在压下Next的时候，当LI已经不存在时将不起作用的，但是这里没有。

我的意思是想实现这种http://www.seyfertdesign.com/jquery/examples.html种的example4，因为这个是用jQuery的UI做的，但是这里的UI库是很老的，而又和新库很多地方不一致，导致我用的新库不能运行。

最好能请兄弟用jQuery解决或者相关插件。谢谢

saishangpeiqian 2009-09-14

打赏
举报

直接去运行上面的，随便改改就ok了

saishangpeiqian 2009-09-14

打赏
举报

<head>
<title>滚动Tab-www.codefans.net</title>
<style type="text/css">
div#box{
float:left;
}
div#box span{
display:block;
cursor:pointer;
width:24px;
height:24px;
}
div#box span#left{
float:left;
background:transparent url(<a href="http://mat1.qq.com/mini2009/images/youhua/all2008.gif" target="_blank" rel="external">http://mat1.qq.com/mini2009/images/youhua/all2008.gif</a>) no-repeat scroll left -82px;
}
div#box span#right{
float:left;
background:transparent url(<a href="http://mat1.qq.com/mini2009/images/youhua/all2008.gif" target="_blank" rel="external">http://mat1.qq.com/mini2009/images/youhua/all2008.gif</a>) no-repeat scroll -384px -82px;
}
div#qqmini{
float:left;
width:345px;
overflow:hidden;
}
ul{
margin:0px;
float:left;
width:9999px;
overflow:hidden;
margin-left:-2.5em;
*margin-left:-1px;
}
li{
list-style-type:none;
float:left;
background:transparent url(<a href="http://mat1.qq.com/mini2009/images/youhua/all2008.gif" target="_blank" rel="external">http://mat1.qq.com/mini2009/images/youhua/all2008.gif</a>) no-repeat scroll 0 -31px;
width:69px;
height:18px;
padding-top:5px;
text-align:center;
cursor:pointer;
}
</style>
</head>
<body>
<div id="box">
<span id="left"><a href="javascript:void(0)">〈〈</a></span>
<div id="qqmini">
<UL>
<LI>新闻</LI>
<LI>财经</LI>
<LI>娱乐</LI>
<LI>体育</LI>
<LI>汽车</LI>
<LI>读书</LI>
<LI>博客</LI>
<LI>游戏</LI>
</UL>
</div>
<span id="right"><a href="javascript:void(0)">〉〉</a></span>
</div>
<script type="text/javascript">
function $(e){
return typeof e == 'string'?document.getElementById(e):e;
}
var Event={
add:function (obj,EventType,fn){
if (obj.attachEvent){
obj['e'+EventType+fn] = fn;
obj[EventType+fn] = function() {obj['e'+EventType+fn](window.event);}
obj.attachEvent('on'+EventType,obj[EventType+fn]);
}else if(obj.addEventListener){
obj.addEventListener(EventType,fn,false);
}else {
obj['on'+EventType]=fn;
}
}
,
remove:function(obj,EventType,fn){
if (obj.detachEvent){
obj.detachEvent('on'+EventType,obj[EventType+fn]);
}else if(obj.removeEventListener){
obj.removeEventListener(EventType,fn,false);
}else {
obj['on'+EventType]=null;
}

}
}
function set(l,r,c,offset){
Event.add(l,'click',function (){c.scrollLeft-=offset});
Event.add(r,'click',function (){c.scrollLeft+=offset});
}
set($('left'),$('right'),$('qqmini'),69);
</script>
</body>