本文通过实例说明jquery可以实现动画菜单的左右滚动、渐变和背景滚动等效果。分享给大家参考。具体如下：

这里展示了基于jquery的动画菜单，它包含四种网站菜单。第一个是没有效果的传统导航菜单，第二个是图形滚动背景的菜单，第三个是从右向左背景滚动的菜单，第四个是渐变背景色的网站菜单，每一个都很精彩。喜欢Js菜单的可以借鉴一下。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/jquery-flash-style-cha-menu-codes/

具体代码如下：

！DOCTYPE html heart heta http-equiv=' Content-TYPe ' Content=' text/html；charset=gbk' /titlejQuery动态背景导航菜单/title style type=' text/CSS ' H2 { clear : both；衬垫-顶部： 20px} ul { list-style :无；保证金： 0；padd : 0；} li {左侧浮动：宽度： 100像素；保证金： 0；padd : 0；文本对齐：中心；}阿利{ display : block padding : 5px 10px高度： 100%;颜色： # FFF；文本装饰：无；右边框： 1px实心# FFF；}阿利{背景： URL(图片/bg2。jpg)重复0 0;}li a:悬停，li a:对焦，li a:活动{背景-位置：-150 px 0；} # a a {背景： URL(图片/BG。jpg)repeat-20px 35px；} # b a {背景： URL(图片/bg2。jpg)重复0 0;} # c a {背景： URL(图片/bg3。jpg)重复0 0;} # d a {背景： URL(图片/bg4。jpg)重复0 0;}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript '(函数($) { $)。extend($.fx.step，{背景位置：函数(FX){ if(FX。FX的状态===0类型。end==' string '){ var start=$ .curcs(FX。elem，‘背景位置’)；start=toArray(开始);fx.start=[start[0]，start[2]]；var end=to数组(FX。结束)；fx.end=[end[0]，end[2]]；fx.unit=[end[1]，end[3]]；} var now posx=[]；现在posx[0]=((FX。end[0]-FX。start[0])* FX。pos)FX。开始[0]FX。单元[0]；现在posx[1]=((FX。end[1]-FX。start[1])* FX。pos)FX。启动[1]FX。单元[1]；外汇。艾伦。风格。背景位置=now posx[0]' ' now posx[1]；函数至数组(strg){ strg=strg。替换(/left | top/g，' 0px ')；strg=strg。替换(/right | bottom/g，' 100% ')；strg=strg.replace(/([0-9).] )(s|)|$)/g，' $ 1px $ 2 ')；var res=strg.match(/(-？[0-9.] )(px|%|em|pt)s(-？[0-9.])(px | % | em | pt)/)；返回[parseFloat(res[1]，10)，res[2]，parseFloat(res[3]，10)，RES[4]]；} } });})(jQuery)；/script script type=' text/JavaScript ' $(function(){ $(' # a a ')).CSS({背景位置： '-20px 35px ' }).mouseover(函数(){ $(this)).停止()。动画({背景位置： '(-20px 94px)' }，{ duration 3360500 })}).mouseout(函数(){ $(此)).停止()。动画({背景位置： '(40px 35px)')}，{duration:200，complete : function(){ $(this)} .CSS({背景位置： '-20px 35px ' })})})$(' # b a ').CSS({背景位置： ' 0 0 ' }).mouseover(函数(){ $(this)).停止()。动画({背景位置： '(-150 px 0)' }，{duration:500}) }).mouseout(函数(){ $(此)).停止()。动画({背景位置： '(-300 px 0)')}，{duration:200，complete:function(){ $(this).CSS({背景位置： ' 0 0 ' })})})$(' # c a ').CSS({背景位置： ' 0 0 ' }).mouseover(函数(){ $(this)).停止()。动画({背景位置： '(0-250像素)' }，{工期：500}) }).mouseout(函数(){ $(此)).停止()。动画({背景位置： '(0 0)' }，{持续时间：500 })} $(' # d a ').CSS({背景位置： ' 0 0 ' }).mouseover(函数(){ $(this)).停止()。动画({背景位置： '(0-250像素)' }，{工期：500}) }).mouseout(函数(){ $(此)).停止()。动画({背景位置： '(0 0)' }，{持续时间：500 })}))；/script meta http-equiv=' Content-Type ' Content=' text/html；charset=gbk/headdy h1j查询背景位置/h1 H2示例0:无脚本/H2 ul id='无脚本' lia href=' # '主页/a/Li lia href=' # '关于/a/Li lia href=' # '联系人/a/Li/ulh2示例A:自上而下/H2 ul id=' a ' lia href=' # '主页/a/Li lia href=' # '关于/a/Li lia href=' # '联系人/a/a希望本文所述对大家的jquery程序设计有所帮助。