JS实现标签滚动切换效果

  

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

  

 JS实现标签滚动切换效果

  

以下是原创的运行代码:

        & lt; !DOCTYPE html公共”——//W3C XHTML 1.0//DTD过渡//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”的在   & lt; html xmlns=" http://www.w3.org/1999/xhtml "比;   & lt; head>   & lt;元http-equiv=? type”内容=" text/html;charset=gb2312 "/比;   & lt; title> jQuery实现的平滑滚动选项卡& lt;/title>   & lt;脚本type=" text/javascript " src=" http://libs.baidu.com/jquery/2.0.0/jquery.min.js "祝辞& lt;/script>   & lt; style>   .tabs{宽度:1200 px;保证金:0汽车;身高:336 px;溢出:隐藏;}   .tabs_item{高度:36 px;}   .tabs_block{高度:300 px;}   .list_item{浮动:左;宽度:200 px;高度:36 px;行高:36 px;字体大小:26 px;text-align:中心;background - color: # FC0;游标:指针;}   .list_item。活跃{颜色:# FFF; background - color: #法郎}   .tabs_block{宽度:20000 px;位置:相对;}   .list_block{显示:没有;浮:左;宽度:1200 px;身高:300 px;字体大小:100 px;text-align:中心;行高:300 px; background - color: # F4F4F4}   .list_block。显示{显示:块;}   & lt;/style>   & lt; script> jQuery。宽松[' easeOutCubic ']=函数(x, t, b, c, d) {   返回c * ((t=t/d 1) * t * t + 1) + b;   };   函数标签(标签、列表、块、项,$){=$ var标签(标签);   var=tabs.width宽度();   tabs.find(列表+:首先).addClass(“活跃的”);   tabs.find(物品+“:第一”).addClass(显示);   tabs.find(列表).click(函数(){   var=$美元(这);   我=tabs.find var(块);(,告诉).index ();   var n=$ this.index ();   this.addClass美元(“活跃的”).siblings (.active) .removeClass(“活跃的”);   tabs.find(项).eq (n) .addClass(显示);   如果(n比;我){   tabs.find(块)鸡毛蒜皮().animate({'左':' - ' +宽度+“px”}, 600年,“easeOutCubic”功能(){   tabs.find(块). css('左',' 0 px ');   tabs.find(项).eq (n) .siblings(,告诉).removeClass(显示);   });   其他}{   tabs.find(块). css(‘左’,”——“+宽度+ px)鸡毛蒜皮().animate(600年{‘左’:0},easeOutCubic,函数(){   tabs.find(项).eq (n) .siblings(,告诉).removeClass(显示);   });   }   });   }   & lt;/script>   & lt;/head>   & lt; body>   & lt; div类="标签"比;   & lt; div类=皌abs_item”比;   & lt; div类=" list_item "在列表项1 & lt;/div>   & lt; div类=" list_item "在列表项2 & lt;/div>   & lt; div类=" list_item "在列表项3 & lt;/div>   & lt; div类=" list_item "在列表项4 & lt;/div>   & lt; div类=" list_item "在列表项5 & lt;/div>   & lt; div类=" list_item "在列表项6 & lt;/div>   & lt;/div>   & lt; div类=扒逦北?& lt;/div>   & lt; div类=皌abs_block”比;   & lt; div类=" list_block "祝辞列表块1 & lt;/div>   & lt; div类=" list_block "祝辞列表块2 & lt;/div>   & lt; div类=" list_block "祝辞列表块3 & lt;/div>   & lt; div类=" list_block "祝辞列表块4 & lt;/div>   & lt; div类=" list_block "祝辞列表块5 & lt;/div>   & lt; div类=" list_block "祝辞列表块6 & lt;/div>   & lt;/div>   & lt;/div>   & lt;脚本type=" text/javascript祝辞   jQuery(文档)时函数(){   var myTabs=new选项卡(‘.tabs’,‘.list_item’,‘.tabs_block’,‘.list_block’, jQuery);   });   & lt;/script>   & lt; p祝辞更多代码请访问:& lt; a href=" https://www.jb51.net " target="平等"祝辞& lt;/a> & lt;/p>   & lt;/body>   & lt;/html>      

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

        & lt;脚本type=" text/javascript " src=" http://libs.baidu.com/jquery/2.0.0/jquery.min.js "祝辞& lt;/script>   之前      

需要的朋友跟着学习下吧,感谢你对的支持。

JS实现标签滚动切换效果