JS实现标签滚动切换效果

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

以下是我们原创的运行代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=gb2312' /titlejQuery实现的平滑滚动选项卡/title脚本类型=' text/JavaScript ' src=' http :3358 libs。百度。com/jquery/2。0 .0/jquery。量滴js '/脚本样式。tab {宽度： 1200 px余量： 0自动高度： 336px飞越：隐藏；}.tabs _ item { height: 36px }。tabs _ block { height: 300px }。列表项{左侧浮动：宽度： 200像素；高度： 36px线高： 36pxfont-size : 26px文本对齐：中心；背景-颜色： # FC0光标：指针；}.列表项。主动{ color : # FFF；背景-color:#F60} .tabs _ block { width: 20000px相对位置：}.list _ block { display: none向左浮动：宽度： 1200像素；height : 300 px font-size : 100 px；文本对齐：中心；线高： 300像素；背景色-颜色： # F4F 4 } .list _ block.show { display: block块块；}/stylescriptjquery。宽松[' easeoctubic ']=函数(x，t，b，c，d){ return c *(t=t/d-1)* t * t ^ 1)b；};功能标签（标签、列表、块、项目、$){ var标签=$(标签);var width=tab。宽度()；tabs.find(列表“:first”).添加CLaSS(' active ')；tabs.find(项目“:first”).添加CLaSS(' show ')；tabs.find(列表)。单击(function(){ var $ this=$(this)；var i=tabs.find(块)。查找('。显示').index()；var n=$ this。index()；$this.addClass('active ').兄弟姐妹('。活动')。移除CLaSS(' active ')；tabs.find(项目)。方程式(n)1 .添加CLaSS(' show ')；if(n I){ tab。查找(块)。停止()。animate({ ' left ' : '-' width ' px ' }，600，' easeOutCubic '，function(){ tab。查找(阻止).css('left '，' 0px ')；tabs.find(项目)。方程式(n)1 .兄弟姐妹('。显示').移除类(' show ')；});} else { tabs.find(阻止)。css('左'，'-'宽' px ').停止()。animate({'left':0}，600，' easeOutCubic '，function(){ tab。查找(项目).方程式(n)1 .兄弟姐妹('。显示').移除类(' show ')；});} });}/script/head body div class=' tab ' div class=' tab _ item ' div class=' list _ item '列表项1/div class=' list _ item '列表项2/div class=' list _ item '列表项3/div class=' list _ item '列表项4/div class=' list _ item '列表项5/div class=' list _ item '列表项6/div/div class=' clear /div class=' TAb _ block ' div class=' list _ block ' list _ block ' list block ready(function(){ var my TAb=new TAb ').制表符","。 list_item '，' .tabs _ block '，' .list_block '，jQuery)；});/script p style=' text-align : center '更多代码请访问：a href='//www .JB 51。net ' target=' _ blank '我们/a/p/body/html在代码中我们引用了百度的框架

脚本类型=' text/JAVAScript ' src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js /脚本需要的朋友跟着学习下吧，感谢你对我们的支持。