浏览 16502 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (2)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-05-08
做了一个动感十足的TAB不敢独占，写出来大家共享，大家可以到宝宝孕历首页看看效果。
其实现是通过js控制div的scrollLeft属性来实现的，tab分成两个部分tab头部分和tab体部分，tab体是一个很宽的层，此div的overflow被设置成hidden，在鼠标挪动到不同的tab标签上时，逐渐修改tab体的scrollLeft属性。
实现的js代码如下： /*scroll*/
var Scroller = Class.create();
Scroller.prototype = {
initialize:function(options){
this.commandsWrapId = options.commandsWrapId;
this.scrollWrapId = options.scrollWrapId;
this.sectionWidth = options.sectionWidth;
this.step = options.step;
},
scrollTo : function(ev){
if(!ev)ev = window.event;
var otriger = getSrcElement(ev);
while(otriger && otriger.tagName != 'LI'){
otriger = otriger.parentNode;
}
Scroller.runningInstance = otriger.scroller;
var instance = otriger.scroller;
for(var i=0;i<instance.triggers.length;i++){
instance.triggers[i].className = 'command unselected';
}
otriger.className = 'command selected';
var index = otriger.scrollIndex;
if(instance.interval)window.clearInterval(instance.interval);
instance.targetLeft = index * instance.sectionWidth;
//计算一个step,要求在500ms内转到指定位置
instance.step = Math.abs((instance.targetLeft - instance.wrap.scrollLeft)/25);
instance.interval = window.setInterval(instance.scrollByStep,10);
},
scrollByStep : function(){
var i = Scroller.runningInstance;
var current = parseInt(i.wrap.scrollLeft);
if(current > i.targetLeft){
if(current - i.targetLeft < i.step)i.wrap.scrollLeft = i.targetLeft;
else i.wrap.scrollLeft = i.wrap.scrollLeft - i.step ;
}else if(current < i.targetLeft){
if(i.targetLeft - current < i.step)i.wrap.scrollLeft = i.targetLeft;
else i.wrap.scrollLeft = i.wrap.scrollLeft + i.step;
}else{
if(i.interval){
window.clearInterval(i.interval);
}
}
},
bindEvent : function(scroller){
scroller.wrap = $id(scroller.scrollWrapId);
var ocommands = $id(scroller.commandsWrapId);
var olis = $tagsC('LI','command',ocommands);
scroller.triggers = olis;
if(olis){
for(var i=0;i<olis.length;i++){
olis[i].scrollIndex = i;
olis[i].scroller = scroller;
addEvent(olis[i],'mouseover',scroller.scrollTo);
}
}
}
};
/*endscroll*/
需要在页面上调用的css和js代码如下：
<style tpe="text/css">
.scrollCommands{clear:both;width:600px;}
.scrollCommands UL{list-item:none;margin:0px;padding:0px;width:600px;overflow:auto;zoom:1;clear:both}
.scrollCommands UL LI{height:20px;line-height:20px;margin:0px;padding:0px;display:block;float:left;}
.scrollCommands UL LI.command{width:65px;border-top:1px solid #eee;border-left:1px solid #eee;border-right:1px solid #eee;text-align:center}
.scrollCommands UL LI.selected{border-bottom:1px solid #fff;background:#fff;}
.scrollCommands UL LI.unselected{border-bottom:1px solid #f0f0f0;background:#f0f0f0;}
.scrollCommands UL LI.sep{width:10px;border-top:1px solid #fff;border-left:1px solid #fff;border-right:0px solid #fff;border-bottom:1px solid #eee;}
.scrollCommands A{font-size:12px;}
#divScrollWrap{width:600px;overflow:hidden;height:200px;padding:0px;clear:both;margin-bottom:10px;border-bottom:1px solid #eee;border-left:1px solid #eee;border-right:1px solid #eee;}
.scrollSection{width:600px;overflow:hidden;height:200px;background:#fff;float:left}
.scrollSection H3{font-size:14px;display:block;border-bottom:1px solid #f0f0f0;font-weight:normal;margin:0px 0px 5px 0px;padding:2px 2px 2px 10px;}
.scrollSection UL{list-style:none;line-height:20px;padding:0px 0px 0px 6px;margin:0px;}
.scrollSection LI{margin:0px;padding:0px 0px 0px 8px;line-height:20px;background:url(/imgs/punyarrowright.gif) no-repeat left 7px;height:20px;overflow:hidden;}
.w280{width:280px;}
</style>
<script type="text/javascript">
addLoadEvent(function(){
var scroller = new Scroller({commandsWrapId:'divScrollCommands',scrollWrapId:'divScrollWrap',sectionWidth:600,step:10});
scroller.bindEvent(scroller);});
</script>
欢迎大家点评，指点。
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-05-08
需要说明的是文中的代码是关键 实现代码，有一些公用的方法没有给出。
|
| 返回顶楼 | |
|
发表时间：2009-05-08
不错
确实是动感十足 滑动的感觉有点快了。。。 |
| 返回顶楼 | |
|
发表时间：2009-05-11
滑动的速度是计算出来的，在500ms内滑动到目标位置。
|
| 返回顶楼 | |
|
发表时间：2009-06-20
滑动的效果？哪里？我怎么没有看到啊？
|
| 返回顶楼 | |
|
发表时间：2009-06-25
在不同的tab之间切换就会滑动了
|
| 返回顶楼 | |
|
发表时间：2009-11-19
不错，支持一个。
js和css代码可以进一步简化的哦，建议lz基于jquery做成插件，这样以后的可维护性和扩展性更好。 另外组件的说明希望更详细点，易读点。 |
| 返回顶楼 | |
|
发表时间：2010-01-28
希望能提供附件下载，公司访问不了.com网站，以便学习和交流
|
| 返回顶楼 | |
