做了一个动感十足的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>
欢迎大家点评,指点。
分享到:
相关推荐
tabtab增删选项卡<div class="wrap-top"> <div class="tab-left"><<</div> <div class="tab-right">>></div> <div class="cont-tab"> <div class="cont-scroll"> <span>HTML</span> [removed]void(0)">...
如题,项目要用到jeasyui,所以必须要下载它的demo,获取相应的js,css等等的文件 jeasyui的下载地址:http://www.jeasyui.com/download/index.php <!DOCTYPE ...
height:129px}#s_tab{display:none}.s_form{position:relative;top:38.2%}.s_form_wrapper{position:relative;top:-191px}.s_ipt_wr{height:34px}#form{margin:22px auto 0;width:641px;text-align:left;z-index:100...
37. Div Tags V1.0.0 For Adobe Dreamweaver 38. Downloads Counter V1.1.0 For Adobe Dreamweaver 39. DwZone Access DataBase Connection V1.2.0 For Adobe Dreamweaver 40. DwZone Advanced Form Controls V1.3.8...
37. Div Tags V1.0.0 For Adobe Dreamweaver 38. Downloads Counter V1.1.0 For Adobe Dreamweaver 39. DwZone Access DataBase Connection V1.2.0 For Adobe Dreamweaver 40. DwZone Advanced Form Controls V1.3.8...
37. Div Tags V1.0.0 For Adobe Dreamweaver 38. Downloads Counter V1.1.0 For Adobe Dreamweaver 39. DwZone Access DataBase Connection V1.2.0 For Adobe Dreamweaver 40. DwZone Advanced Form Controls V1.3.8...
37. Div Tags V1.0.0 For Adobe Dreamweaver 38. Downloads Counter V1.1.0 For Adobe Dreamweaver 39. DwZone Access DataBase Connection V1.2.0 For Adobe Dreamweaver 40. DwZone Advanced Form Controls V1.3.8...
37. Div Tags V1.0.0 For Adobe Dreamweaver 38. Downloads Counter V1.1.0 For Adobe Dreamweaver 39. DwZone Access DataBase Connection V1.2.0 For Adobe Dreamweaver 40. DwZone Advanced Form Controls V1.3.8...
37. Div Tags V1.0.0 For Adobe Dreamweaver 38. Downloads Counter V1.1.0 For Adobe Dreamweaver 39. DwZone Access DataBase Connection V1.2.0 For Adobe Dreamweaver 40. DwZone Advanced Form Controls V1.3.8...
37. Div Tags V1.0.0 For Adobe Dreamweaver 38. Downloads Counter V1.1.0 For Adobe Dreamweaver 39. DwZone Access DataBase Connection V1.2.0 For Adobe Dreamweaver 40. DwZone Advanced Form Controls V1.3.8...
37. Div Tags V1.0.0 For Adobe Dreamweaver 38. Downloads Counter V1.1.0 For Adobe Dreamweaver 39. DwZone Access DataBase Connection V1.2.0 For Adobe Dreamweaver 40. DwZone Advanced Form Controls V1.3.8...