js实现标签滚动切换效果图_JS实现标签滚动切换效果

【www.bbyears.com--jquery】

本文的JS效果是在鼠标点击ITEM标签的时候，实现下方的内容跟随滚动切换的效果，我们先来看下运行后的效果图。

以下是脚本之家原创的运行代码：

<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script>jQuery.easing["easeOutCubic"] = function (x, t, b, c, d) {
 return c*((t=t/d-1)*t*t + 1) + b;
};
function Tabs(tabs,list,block,item,$){
 var tabs = $(tabs);
 var width = tabs.width();
 tabs.find(list+":first").addClass("active");
 tabs.find(item+":first").addClass("show");
 tabs.find(list).click(function(){
 var $this = $(this);
 var i = tabs.find(block).find(".show").index();
 var n = $this.index();
 $this.addClass("active").siblings(".active").removeClass("active");
 tabs.find(item).eq(n).addClass("show");
 if(n > i){
 tabs.find(block).stop().animate({"left":"-"+width+"px"},600,"easeOutCubic",function(){
  tabs.find(block).css("left","0px");
  tabs.find(item).eq(n).siblings(".show").removeClass("show");
  });
 }else{
 tabs.find(block).css("left","-"+width+"px").stop().animate({"left":0},600,"easeOutCubic",function(){
  tabs.find(item).eq(n).siblings(".show").removeClass("show");
  });
 }
 });
}
</script>


 
 
  list item 1
  list item 2
  list item 3
  list item 4
  list item 5
  list item 6
 
  
 
  list block 1
  list block 2
  list block 3
  list block 4
  list block 5
  list block 6
 
 
<script type="text/javascript">
 jQuery(document).ready(function(){
  var myTabs = new Tabs(".tabs",".list_item",".tabs_block",".list_block",jQuery);
 });
</script>
更多代码请访问：脚本之家

在代码中我们引用了百度的jquery

<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

本文来源：http://www.bbyears.com/wangyezhizuo/144460.html