以下是 左右布局滑动切换Tab选项卡特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>左右布局滑动切换Tab选项卡</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/event.js"></script>
<script src="js/tween.js"></script>
</head>
<body>
<div class="tabmain">
<div id="outerWrap">
<div id="sliderParent"></div>
<div class="blueline" id="blueline" style="top: 0px; "></div>
<ul class="tabGroup">
<li class="tabOption selectedTab">JavaScript培训</li>
<li class="tabOption">主体课程</li>
<li class="tabOption">高端课程</li>
<li class="tabOption">就业传奇</li>
<li class="tabOption">珠峰学生会</li>
<li class="tabOption">讲师招聘</li>
<li class="tabOption">远程教育</li>
</ul>
<div id="container">
<div id="content">
<div class="tabContent selectedContent"><!-- 1JavaScript培训:优势 -->
<h3 style="">我们专注JavaScript培训</h3>
<dl>
<dt><span class="high">教育理念：</span></dt>
<dd>认识到每个人的优势和价值，进行不同的指导和引导、推荐到更适合的平台。我们不仅仅是努力，不仅仅是传授技术，更重要的是：<span class="colorange">我们是发现你的伯乐！</span></dd>
</dl>
<dl>
<dt><span class="high">传奇就业：</span></dt>
<dd>
<p>超过50%的学员工资翻倍或进入百度、新浪、腾讯等知名公司！</p>
</dd>
</dl>
<dl>
<dt><span class="high">强悍课程：</span></dt>
<dd>
<p>原生javaScript、算法及编程思想、设计模式、Ajax后台技术,HTML5+CSS3移动端客户端开发，Node.js、jQuery、AngularJS、Backbone.js框架讲解 </p>
</dd>
<dd>
<p><a target="_blank" class="fbold colorange" href="#">查看2014年珠峰培训JavaScript培训课程大纲</a></p>
</dd>
<dd>
<p><img src="images/js.png" alt=""></p>
</dd>
</dl>
<dl>
<dt><span class="high">特色</span></dt>
<dd>
<p><a href="###">自编的针对性教材</a><a href="#">超过300讲深度视频</a><a href="###">海量面试题讲解</a><br>
<a href="###">直接进百度等公司的推荐机会</a></p>
</dd>
</dl>
</div>
<div class="tabContent"><!-- 3 主体课程 -->
<h3>内容：全面、系统、深入的JavaScript培训课程</h3>
<dl>
<dt>知识点纵向大纲：</dt>
<p><a target="_blank" href="#">查看2014年珠峰培训JavaScript课程大纲</a></p>
</dl>
<dl>
<dt class="high">重点模块式课程大纲</dt>
<dd>1、实用至上，高效为王的DOM库（单例模式）</dd>
<dd>2、比jQuery动画还精彩的TWEEN算法动画库</dd>
<dd>3、使用观察者设计模式，从原理入手的事件库</dd>
<dd>4、开发自己的Ajax库</dd>
<dd>5、模块化开发之一：选项卡框架</dd>
<dd>6、模块化开发之二：可扩展自定义事件的完美拖拽框架</dd>
<dd>7、模块化开发之三：弹出层框架</dd>
</dl>
<dl>
<dt class="high">特色</dt>
<dd>
<p><a href="###">自己编写的教材</a><a href="#">超过300讲的视频</a><a href="###">海量面试题讲解</a></p>
<p><a href="###">直接进百度等公司的推荐机会</a></p>
</dd>
</dl>
</div>
<div class="tabContent">
<h3>把JavaScript进行到底！</h3>
<dl>
<dt>最大亮点：</dt>
<dd>主流的、引领前沿的新技术，邀请知名公司的前端技术大牛讲解的饕餮大餐，可谓是群星荟萃！我们的目标就是：以珠峰为起点，让你飞的更高！</dd>
</dl>
<dl>
<dt>高端课程：</dt>
<dd>
<p>1、HTML5移动端开发</p>
<p>2、CSS3及响应式布局</p>
<p>3、Node.js</p>
<p>4、MVC富客户端开发</p>
<p>5、angularJS框架</p>
<p><img src="images/gdkc.png" alt=""></p>
</dd>
</dl>
</div>
<div class="tabContent"><!-- 就业传奇 -->
<h3>就业好才是硬道理</h3>
<dl>
<dt>就业是一个培训班最有说服力的结果</dt>
<dd>
<p>网站做的再好，老师吹的再玄乎，看了就业后的选择，才是理性选择。</p>
</dd>
</dl>
<dl>
<dt>奇迹是努力的代名词：就业背后是汗水.</dt>
<dd>以强悍的课程体系为依托，以珠峰同学会为人脉。看一个培训机构的就业，是对一个培训机构最理性的评价。就业不好的培训班，都是在骗钱！！</dd>
</dl>
<dl class="witness">
<dt>奇迹的见证：</dt>
<dd>
<p><span class="ele"></span><a target="_blank" href="#"><em>我和我的小伙伴们都惊呆了：</em>2014新年伊始，四个同学入职进百度</a></p>
<p><span class="ele"></span><a target="_blank" href="#"><em>学完之后工资真的能翻一翻吗？</em>这已经不是个例</a></p>
<p><span class="ele"></span><a target="_blank" href="#"><em>逆天了：</em>一个班上70%的同学工资翻倍或进百度搜狐等公司</a></p>
<p><span class="ele"></span><a target="_blank" href="#">看我们有多少同学在百度新浪网易腾讯这些大公司</a></p>
<p><span class="ele"></span><a target="_blank" href="#"><em>看我们的学员有多牛：</em>应届毕业生，一样也成为百度正式员工</a></p>
<p><span class="ele"></span><a target="_blank" href="#"><em>我们的在线培训同样给力：</em>上海美女月薪超10K进外企</a></p>
</dd>
</dl>
</div>
<div class="tabContent">
<h3>珠峰学生会，大家好才是真的好</h3>
<dl>
<dt>学生会的昨天</dt>
<dd>
<p>珠峰的学生永远是珠峰最宝贵的资源，是珠峰培训发展和壮大的依托。昨天，他们陪珠峰从创业到发展，他们没有嫌弃那个弱小珠峰，他们没有嫌弃那个像农村大叔一样的珠峰老师，没有嫌弃那两间简陋的教室，一起走过最艰难的岁月。</p>
</dd>
</dl>
<dl>
<dt>学生会的今天</dt>
<dd>
<p>今天，同学们遍布北京互联网公司，在百度、腾讯、新浪、搜狐等公司的就有一百多人。珠峰培训传统，一向是学习上老同学带新同学，在工作机会上老同学推荐新同学.正因为广大同学，珠峰培训才有了这么丰富的讲师资源，才有了更多更广的就业渠道。</p>
</dd>
</dl>
<dl>
<dt>学生会的明天</dt>
<dd>
<p>明天，我们会更好！！珠峰和所有同学共同成长！！我们在一起战斗，不孤单！</p>
</dd>
</dl>
<p><span class="high" style="margin:0 10px;">不定期的组织活动</span><span class="high" style="margin:0 10px;">前沿技术分享</span><span class="high" style="margin:0 10px;">工作的交流推荐平台</span><span class="high" style="margin:0 10px;">展示自己的机会</span></p>
<p><a>学生是珠峰的信仰。每一位同学都是佛，我只是一位拜佛人！</a></p>
</div>
<div class="tabContent" style=""><!-- 招聘讲师 -->
<h3>珠峰培训需要优秀的你加入</h3>
<dl>
<dt>招聘兼职讲师</dt>
<dd>长期招聘HTML5移动端开发讲师、node.js讲师、其它经验丰富的JS开发讲师</dd>
</dl>
<dl>
<dt>招聘要求：</dt>
<dd> 1、有一颗慈悲心。佛说：知众生之苦,勇入苦海，以救众生出苦海为乐，是慈悲心。报班的同学，多数没有编程基础，讲师应深刻体会初学者的心理，耐心的有针对性的鼓励、讲解和辅导！</dd>
<dd>2、有一颗平等舍与的心。报班的同学成绩不一，对成绩好的莫偏爱，对成绩不好的冷淡。而应该是让成绩好的更上一层楼，让成绩不好的有信心提高自己。</dd>
<dd>3、有扎实的代码基本功，丰富的开发经验</dd>
</dl>
忌浮燥，忌功利，态度比技术更重要。当老师，不是给自己找存在感，而是通过让别人更好的存在，来成就自己！
<dl>
<dt>薪资待遇</dt>
<dd>按不同级别确定优厚的日薪,奖金另有计算方案。</dd>
<dd>需免费试讲一天后，评估上岗。具体标准，请联系<a href="#" target="blank">QQ咨询:123456789</a></dd>
</dl>
</div>
<div class="tabContent" style=""><!-- 远程教育 -->
<h3>内容（13141618.taobao.com）</h3>
<dl>
<dt>远程教育</dt>
<dd>网站正在升级中，敬请期待</dd>
<dt>内容</dt>
<dd>内容专注于提供免费素材下载,其内容涵盖设计素材,PSD素材,矢量素材,图片素材,图标素材,设计字体等免费素材.下载免费素材尽在内容免费素材网</dd>
<dt>内容</dt>
<dd>内容专注于提供免费素材下载,其内容涵盖设计素材,PSD素材,矢量素材,图片素材,图标素材,设计字体等免费素材.下载免费素材尽在内容免费素材网</dd>
<dt>内容</dt>
<dd>内容专注于提供免费素材下载,其内容涵盖设计素材,PSD素材,矢量素材,图片素材,图标素材,设计字体等免费素材.下载免费素材尽在内容免费素材网</dd>
<dt>内容</dt>
<dd>内容专注于提供免费素材下载,其内容涵盖设计素材,PSD素材,矢量素材,图片素材,图标素材,设计字体等免费素材.下载免费素材尽在内容免费素材网</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<script>
var container=document.getElementById('container');
var content=document.getElementById('content');
var oDivs=DOM.children(content,"div");oDivs[0].st=0;
for(var i=1;i<oDivs.length;i++){oDivs[i].st=oDivs[i].offsetTop;}
var oLis=DOM.getElesByClass("tabOption");
var flag=0;
var upFlag=oLis.length;
;(function(){function fn(e){e=e||window.event;
if(e.wheelDelta){var n=e.wheelDelta;}else if(e.detail){var n=e.detail*-1;}
if(n>0){container.scrollTop-=12;}else if(n<0){ container.scrollTop+=12;}
slider.style.top=container.scrollTop*container.offsetHeight/content.offsetHeight+"px";
slider.offsetTop*(content.offsetHeight/container.offsetHeight);
var st=container.scrollTop;
if(st>this.preSt){
for(var j=0;j<oLis.length;j++){ if(st<oDivs[j].st) break;}
if(oLis[j-2]&&this.preLi!==j){
if((j)>(flag+1)){DOM.removeClass(oLis[j-2],"selectedTab"); DOM.addClass(oLis[j-1],"selectedTab");animate(blueline,{top:(j-1)*48},500,2);}} flag=j-1;
}else if(st<this.preSt){
for(var j=oLis.length-1;j>=0;j--){if(st>oDivs[j].st) break;}
if(oLis[j+2]&&this.preLi!==j){if(flag===undefined)return ;
if((j)<(flag)){ for(var k=0;k<oLis.length;k++){ DOM.removeClass(oLis[k],"selectedTab");};DOM.addClass(oLis[j+1],"selectedTab"); animate(blueline,{top:(j+1)*48},500,2);upFlag=j+1;}}} this.preSt=st;if(e.preventDefault)e.preventDefault();return false;}
container.onmousewheel=fn;
if(container.addEventListener)container.addEventListener("DOMMouseScroll",fn,false);
slider=document.createElement('span');
slider.id="slider";
slider.style.height=container.offsetHeight*(container.offsetHeight/content.offsetHeight)+"px";
sliderParent.appendChild(slider);
on(slider,"mousedown",down);
var blueline=document.getElementById("blueline");
function changeTab(){
var index=DOM.getIndex(this);
for(var i=0;i<oLis.length;i++){ DOM.removeClass(oLis[i],"selectedTab"); }
DOM.addClass(this,"selectedTab");
animate(container,{scrollTop:oDivs[index].st},500,1);
var t=oDivs[index].st*container.offsetHeight/content.offsetHeight;
animate(slider,{top:t},500);animate(blueline,{top:index*48},500,2);
}
var tabPannel1=document.getElementById("outerWrap");
var oLis=DOM.children(DOM.children(tabPannel1,"ul")[0],"li");
for(var i=0;i<oLis.length;i++){ oLis[i].onclick=changeTab;};
})();
</script>
</body>
</html>
JS代码(event.js):
function bind(b,c,d){
var e=function(){
d.call(b)}
;
e.photo=d;
if(!b['a'+c+'521']){
b['a'+c+"521"]=[]}
var a=b['a'+c+"521"];
for(var i=0;
i<a.length;
i++){
if(a[i].photo==d)return}
b['a'+c+"521"].push(e)}
;
function unbind(b,c,d){
var a=b['a'+c+'521'];
if(!a)return;
for(var i=0;
i<a.length;
i++){
if(a[i].photo==d){
b.detachEvent('on'+c,a[i]);
a.splice(i,1);
break}
}
}
;
function fnDisguise(a,b){
return function(e){
b.call(a,e)}
}
;
function on(b,c,d){
if(typeof b['on'+c]=='undefined'){
var a=b['a'+c+'2002-10'];
if(!a){
a=b['a'+c+'2002-10']=[]}
a.push(d);
return}
else if(b.addEventListener){
b.addEventListener(c,d,false);
return}
else{
var a=b['a'+c+'2002-10'];
if(!a){
a=b['a'+c+'2002-10']=[]}
a.push(d);
bind(b,c,run)}
}
;
function fire(b,e){
var a=this['a'+b+'2002-10'];
if(!a)return;
for(var i=0;
i<a.length;
i++){
a[i].call(this,e)}
}
;
function run(e){
e=e||window.event;
if(!e.target)e.target=e.srcElement;
if(typeof e.pageX=="undefined"){
e.pageX=((document.documentElement.scrollLeft||document.body.scrollLeft)+e.clientX);
e.pageY=((document.documentElement.scrollTop||document.body.scrollTop)+e.clientY)}
if(typeof e.stopPropagation=="undefined"){
e.stopPropagation=function(){
e.cancelBubble=true}
}
if(typeof e.preventDefault=="undefined"){
e.preventDefault=function(){
e.returnValue=false}
}
var a=this['a'+e.type+'2002-10'];
if(!a)return;
for(var i=0;
i<a.length;
i++){
a[i].call(this,e)}
}
;
function off(b,c,d){
if(b.removeEventListener){
b.removeEventListener(c,d,false);
return}
var a=b['a'+c+'2002-10'];
if(!a)return;
for(var i=0;
i<a.length;
i++){
if(a[i]==d){
a.splice(i,1);
break}
}
}
;
function down(e){
this.x=this.offsetLeft;
this.y=this.offsetTop;
this.mouseY=e.pageY;
if(this.setCapture){
this.setCapture();
on(this,'mousemove',move);
on(this,'mouseup',up)}
else{
this.MOVE=fnDisguise(this,move);
this.UP=fnDisguise(this,up);
on(document,'mousemove',this.MOVE);
on(document,'mouseup',this.UP)}
e.preventDefault();
this.preSt=0;
fire.call(this,"dragStart",e)}
;
function move(e){
if(this.y+(e.pageY-this.mouseY)<=0)this.style.top=0;
else if(this.y+(e.pageY-this.mouseY)>=(content.offsetHeight*container.offsetHeight/content.offsetHeight-this.offsetHeight)){
this.style.top=content.offsetHeight*container.offsetHeight/content.offsetHeight-this.offsetHeight+'px'}
else{
this.style.top=this.y+(e.pageY-this.mouseY)+'px'}
var a=container.scrollTop=this.offsetTop*(content.offsetHeight/container.offsetHeight);
if(a>this.preSt){
for(var j=0;
j<oLis.length;
j++){
if(a<oDivs[j].st)break}
if(oLis[j-2]&&this.preLi!==j){
if((j)>(flag+1)){
DOM.removeClass(oLis[j-2],"selectedTab");
DOM.addClass(oLis[j-1],"selectedTab");
animate(blueline,{
top:(j-1)*48}
,500,2)}
}
flag=j-1}
else if(a<this.preSt){
for(var j=oLis.length-1;
j>=0;
j--){
if(a>oDivs[j].st)break}
if(oLis[j+2]&&this.preLi!==j){
if(flag===undefined)return;
if((j)<(flag)){
for(var k=0;
k<oLis.length;
k++){
DOM.removeClass(oLis[k],"selectedTab")}
DOM.addClass(oLis[j+1],"selectedTab");
animate(blueline,{
top:(j+1)*48}
,500,2);
upFlag=j+1}
}
}
this.preLi=j;
this.preSt=a;
fire.call(this,"dragging",e)}
;
function up(e){
if(this.releaseCapture){
this.releaseCapture();
off(this,'mousemove',move);
off(this,'mouseup',up)}
else{
off(document,'mousemove',this.MOVE);
off(document,'mouseup',this.UP)}
fire.call(this,"dragEnd",e)}
;
JS代码(tween.js):
var DOM={
}
;
DOM.listToArray=function(eles){
try{
var a=[].slice.call(eles,0)}
catch(e){
var a=[];
for(var i=0;
i<eles.length;
i++){
a.push(eles[i])}
}
return a}
;
DOM.getIndex=function(ele){
var index=0;
for(var p=ele.previousSibling;
p;
){
if(p.nodeType==1){
index++}
p=p.previousSibling}
return index}
;
DOM.getElesByClass=function(strClass,context){
context=context||document;
if(context.getElementsByClassName){
return context.getElementsByClassName(strClass)}
var aClass=strClass.split(/ +/);
var eles=context.getElementsByTagName("*");
for(var i=0;
i<aClass.length;
i++){
eles=byClass(aClass[i],eles)}
return eles;
function byClass(className,eles){
var reg=new RegExp("(?:^| +)"+className+"(?:+|$)");
var a=[];
for(var i=0;
i<eles.length;
i++){
var ele=eles[i];
if(reg.test(ele.className)){
a.push(ele)}
}
return a}
}
;
DOM.addClass=function(ele,strClass){
var reg=new RegExp("(?:^| +)"+strClass+"(?:+|$)");
if(!reg.test(ele.className))ele.className+=" "+strClass}
;
DOM.removeClass=function(ele,strClass){
var reg=new RegExp("(?:^| +)"+strClass+"(?:+|$)","g");
ele.className=ele.className.replace(reg,"")}
;
DOM.children=function(ele,tagName){
var childNodes=ele.childNodes;
var a=[];
if(typeof tagName=="string"){
tagName=tagName.toUpperCase();
for(var i=0;
i<childNodes.length;
i++){
var child=childNodes[i];
if(child.nodeType==1&&child.nodeName==tagName){
a.push(child)}
}
}
return a}
;
function getCss(a,b){
if(b=="scrollTop"){
return a.scrollTop}
if(window.getComputedStyle)return parseFloat(getComputedStyle(a,null)[b]);
else return parseFloat(a.currentStyle[b])}
;
function setCss(a,b,c){
if(b=="opacity"){
a.style.opacity=c;
a.style.filter="alpha(opacity="+c*100+")"}
else if(b=="scrollTop"){
a.scrollTop=c}
else{
a.style[b]=c+"px"}
}
;
function animate(ele,obj,duration,type,fnCallback){
var zhufengEffect={
zfLinear:function(t,b,c,d){
return c*t/d+b}
,Quad:{
easeIn:function(t,b,c,d){
return c*(t/=d)*t+b}
,easeOut:function(t,b,c,d){
return-c*(t/=d)*(t-2)+b}
,easeInOut:function(t,b,c,d){
if((t/=d/2)<1)return c/2*t*t+b;
return-c/2*((--t)*(t-2)-1)+b}
}
,Cubic:{
easeIn:function(t,b,c,d){
return c*(t/=d)*t*t+b}
,easeOut:function(t,b,c,d){
return c*((t=t/d-1)*t*t+1)+b}
,easeInOut:function(t,b,c,d){
if((t/=d/2)<1)return c/2*t*t*t+b;
return c/2*((t-=2)*t*t+2)+b}
}
,Quart:{
easeIn:function(t,b,c,d){
return c*(t/=d)*t*t*t+b}
,easeOut:function(t,b,c,d){
return-c*((t=t/d-1)*t*t*t-1)+b}
,easeInOut:function(t,b,c,d){
if((t/=d/2)<1)return c/2*t*t*t*t+b;
return-c/2*((t-=2)*t*t*t-2)+b}
}
,Quint:{
easeIn:function(t,b,c,d){
return c*(t/=d)*t*t*t*t+b}
,easeOut:function(t,b,c,d){
return c*((t=t/d-1)*t*t*t*t+1)+b}
,easeInOut:function(t,b,c,d){
if((t/=d/2)<1)return c/2*t*t*t*t*t+b;
return c/2*((t-=2)*t*t*t*t+2)+b}
}
,Sine:{
easeIn:function(t,b,c,d){
return-c*Math.cos(t/d*(Math.PI/2))+c+b}
,easeOut:function(t,b,c,d){
return c*Math.sin(t/d*(Math.PI/2))+b}
,easeInOut:function(t,b,c,d){
return-c/2*(Math.cos(Math.PI*t/d)-1)+b}
}
,Expo:{
easeIn:function(t,b,c,d){
return(t==0)?b:c*Math.pow(2,10*(t/d-1))+b}
,easeOut:function(t,b,c,d){
return(t==d)?b+c:c*(-Math.pow(2,-10*t/d)+1)+b}
,easeInOut:function(t,b,c,d){
if(t==0)return b;
if(t==d)return b+c;
if((t/=d/2)<1)return c/2*Math.pow(2,10*(t-1))+b;
return c/2*(-Math.pow(2,-10*--t)+2)+b}
}
,Circ:{
easeIn:function(t,b,c,d){
return-c*(Math.sqrt(1-(t/=d)*t)-1)+b}
,easeOut:function(t,b,c,d){
return c*Math.sqrt(1-(t=t/d-1)*t)+b}
,easeInOut:function(t,b,c,d){
if((t/=d/2)<1)return-c/2*(Math.sqrt(1-t*t)-1)+b;
return c/*�زļ� - www.sucaijiayuan.com*/
/2*(Math.sqrt(1-(t-=2)*t)+1)+b}
}
,Elastic:{
easeIn:function(t,b,c,d,a,p){
if(t==0)return b;
if((t/=d)==1)return b+c;
if(!p)p=d*.3;
if(!a||a<Math.abs(c)){
a=c;
var s=p/4}
else var s=p/(2*Math.PI)*Math.asin(c/a);
return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b}
,easeOut:function(t,b,c,d,a,p){
if(t==0)return b;
if((t/=d)==1)return b+c;
if(!p)p=d*.3;
if(!a||a<Math.abs(c)){
a=c;
var s=p/4}
else var s=p/(2*Math.PI)*Math.asin(c/a);
return(a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b)}
,easeInOut:function(t,b,c,d,a,p){
if(t==0)return b;
if((t/=d/2)==2)return b+c;
if(!p)p=d*(.3*1.5);
if(!a||a<Math.abs(c)){
a=c;
var s=p/4}
else var s=p/(2*Math.PI)*Math.asin(c/a);
if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;
return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b}
}
,Back:{
easeIn:function(t,b,c,d,s){
if(s==undefined)s=1.70158;
return c*(t/=d)*t*((s+1)*t-s)+b}
,easeOut:function(t,b,c,d,s){
if(s==undefined)s=1.70158;
return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b}
,easeInOut:function(t,b,c,d,s){
if(s==undefined)s=1.70158;
if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b}
}
,zfBounce:{
easeIn:function(t,b,c,d){
return c-zhufengEffect.zfBounce.easeOut(d-t,0,c,d)+b}
,easeOut:function(t,b,c,d){
if((t/=d)<(1/2.75)){
return c*(7.5625*t*t)+b}
else if(t<(2/2.75)){
return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b}
else if(t<(2.5/2.75)){
return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b}
else{
return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b}
}
,easeInOut:function(t,b,c,d){
if(t<d/2)return zhufengEffect.zfBounce.easeIn(t*2,0,c,d)*.5+b;
else return zhufengEffect.zfBounce.easeOut(t*2-d,0,c,d)*.5+c*.5+b}
}
}
;
var fnEffect=zhufengEffect.Expo.easeOut;
if(typeof type=="number"){
switch(type){
case 0:break;
case 1:fnEffect=zhufengEffect.zfLinear;
break;
case 2:fnEffect=zhufengEffect.Back.easeOut;
break;
case 3:fnEffect=zhufengEffect.Elastic.easeOut;
break;
case 4:fnEffect=zhufengEffect.zfBounce.easeOut;
break}
}
else if(typeof type=="function"){
fnCallback=type}
;
var oBegin={
}
;
var oChange={
}
;
var flag=0;
for(var attr in obj){
var begin=getCss(ele,attr);
var change=obj[attr]-begin;
if(change){
oBegin[attr]=begin;
oChange[attr]=change;
flag++}
}
if(flag===0)return;
var times=0;
if(document.all)var interval=15;
else var interval=13;
window.clearTimeout(ele.timer);
_move();
function _move(){
times+=interval;
if(times>=duration){
for(var a in oChange){
var b=obj[a];
setCss(ele,a,b)}
ele.timer=null;
if(typeof fnCallback=="function"){
fnCallback.call(ele)}
}
else{
for(var a in oChange){
var c=oChange[a];
var d=oBegin[a];
var e=fnEffect(times,d,c,duration);
setCss(ele,a,e)}
ele.timer=window.setTimeout(_move,interval)}
}
}
;
;
(function(){
oNav=document.getElementById('ulNav');
var b=document.createElement('div');
var c=oNav.getElementsByTagName('li');
b.id="navSlider";
oNav.appendChild(b);
b.style.width=DOM.children(c.item(0),"a")[0].offsetWidth+"px";
for(var i=0;
i<c.length;
i++){
c.item(i).i=i;
c.item(i).onmouseover=function(){
var a=DOM.children(this,"a")[0];
var w=a.offsetWidth;
var l=a.offsetLeft;
animate(b,{
left:l,width:w}
,500,4)}
}
}
)();
CSS代码(style.css):
/* reset */
*{margin:0;padding:0;}
body{font:12px/1.7 Tahoma,\5B8B\4F53;-webkit-text-size-adjust:none;background-color:#fff;overflow-x:hidden;}
h1,h2,h3,h4,h5,h6{*font-size:100%;font-weight:400;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,i,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul,li{list-style:none outside;}
blockquote:before,blockquote:after,q:before,q:after{content:'';}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
input,textarea,select,button{font-family:inherit;font-size:inherit;*font-size:100%;font-weight:inherit;resize:none;}
button{cursor:pointer;}
:focus{outline:0;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
.clr{*zoom:1;}
.clr:before,.clr:after{content:"";display:table;}
.clr:after{clear:both;}
a{color:#487d98;}
.colorange{color:orange;}
.fbold{font-weight:bold;}
.ml10{margin-left:10px;}
.mt10{margin-top:10px;}
/*内容区域*/
.tabmain{width:616px;height:384px;margin:50px auto;background:#F3F3F3;border:1px solid #F3F3F3;}
.tabmain .tabGroup{float:left;width:129px;height:auto;z-index:3;}
.tabmain .tabGroup li{height:48px;line-height:48px;padding-left:8px;text-align:left;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;font-size:14px;font-family:'Microsoft yahei';color:#666;}
.tabmain .tabGroup li.selectedTab{padding-left:10px;background:#fff;color:#1d9fd3;font-weight:bold;}
.tabmain .tabContent{padding:10px 20px;background-color:#fff;color:#777;min-height:384px;}
.tabContent p a{margin-right:15px;text-decoration:none;text-align:center;color:orange;font-weight:bold;}
.tabContent h3{margin-bottom:5px;background:orange;color:#fff;font-size:14px;font-weight:bold;line-height:28px;text-align:center;}
.tabContent dl{line-height:22px;margin-bottom:10px;}
.tabContent dt{color:#1d9fd3;font-weight:bold;}
.tabContent dd img{display:block;}
.tabmain .blueline{position:absolute;top:0px;left:0px;width:3px;height:48px;background:#1d9fd3;overflow:hidden;}
.tabContent .witness p{position:relative;padding-left:20px;}
.tabContent .witness p em{color:orange;font-weight:bold;}
.tabContent .witness p a{color:#666;font-weight:normal;display:block;line-height:24px;text-align:left;}
.tabContent .witness p a:hover{background-color:#efefef;}
.tabContent .witness p .ele{left:0px;}
#container{float:left;width:487px;height:384px;background:#fff;overflow:hidden;}
#slider{position:absolute;top:0px;right:0;width:6px;border-radius:6px;background:#ccc;cursor:pointer;}
#sliderParent{position:absolute;left:0;height:0;width:608px;z-index:999;}
#outerWrap{position:relative;z-index:999}
/*滚动条*/
.wrapacon{position:relative;float:left;width:468px;height:360px;margin-top:5px;overflow:hidden;}
.wrapaconlis{position:absolute;left:0;top:0;width:450px;}
.scrbar{position:relative;width:4px;height:355px;border:1px solid #f4f4f4;border-radius:20px;background-color:#f4f4f4;float:left;left:443px;margin-left:15px;}
.scrbar .barbg{position:absolute;right:-1px;top:50px;width:2px;height:105px;border:2px solid #dadada;background-color:#dadada;border-radius:20px;}
分享到QQ
分享到微博
微信扫一扫
