本文的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实现标签滚动切换效果