本文实例讲述了jQuery实现标签菜单滚动切换的方法。分享给大家供大家参考。具体如下：

这是一款jQuery实现让你的标签菜单滚动的代码，先运行一下看看效果咋样？是不是超不错，让你的网页变得灵动起来，不再静止，学习jquery的朋友也可作为范例来参考吧。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-tab-menu-cha-style-codes/

具体代码如下：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN ' ' http://www .w3。org/TR/HTML 4/严格。DTD ' HTML lang=' EN '标题jquery让你的标签菜单滚动的代码/title脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/脚本样式正文{ font-family : arialfont-size :12 px} a { color: # 333文本装饰：无；显示：块；} a:hover { color: # 888文本装饰：无；} # moveing _ tab {溢出：隐藏；宽度宽度：300像素位置：相对边界：1px实心# cccmargin :0 auto } # moveing _ tab .制表符{位置：相对高度：30 px填充-top :5 px；cursor : default } # moveing _ tab .标签。项目{ position:relativez索引：10;float:left显示：块；宽度宽度：150像素文本对齐：居中；font-size :14 px字体粗细：700；} #移动标签.标签。熔岩{ position : absolutetop :0 left :0 z指数：0;宽度宽度：150像素高度：30 px背景# abe3eb } # moving _ tab .内容{位置：相对飞越：隐藏；背景： # abe3ebborder-top:1px实心# d9fafa } # moving _ tab .面板{位置：相对；宽度宽度：600px} #移动标签.面板ul { float:left宽度宽度：300像素划水：0;margin:0list列表式：无；} #移动标签.面板ul Li { padd :5 px 0 5px 10px border-bottom :1 px虚线# fff} /style脚本$(文档)。ready(function () { $(')).熔岩')。CSS({ left : $(' span。第：项第一').position()[' left ']})；$('.项目')。mouseover(function () { $(')).熔岩')。停止()。动画({left:$(this)).position()['left']}，{ duration :200 })；$('.面板')。停止()。动画({left:$(this)).position()['left'] * (-2)}，{ duration :200 })；});});/script/head dydiv id=' moveing _ tab ' div class=' tab ' div class=' lava '/div span class=' Item '热门帖子/span span class='item '最近的帖子/span/div=' content ' div=' Panel ' ul lia href=' # ' Panel 01项目01/a/Li lia href=' # ' Panel 01项目02/a/Li lia href=' # ' Panel 01项目03/a/Li lia href=' # ' Panel 01项目04希望本文所述对大家的jQuery程序设计有所帮助。