JS实现带有弧形背景渐变效果的导航菜单代码

本文以JS为例，实现了带有弧形背景渐变效果的导航菜单代码。分享给大家参考。具体如下：

这是一个个性化的JS CSS导航菜单，鼠标经过时有有趣的曲线背景。其实这里用CSS调用后台，用JavaScript控制后台的移动，用jQuery实现类似的功能。整体感觉很好。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-cicle-cha-nav-menu-demo/

具体代码如下：

！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 '标题圆弧背景的导航菜单/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 '样式类型=' text/CSS ' * { margin :0 px；padd :0 px font-size :12 px；}.div _ menu {位置：绝对；left:100pxtop:100px}。ul _ menu {列表样式：无；}.ul _ menu li { float:left边距-左侧：1 pxborder:1px固体# 33CCCC显示：块；padd :5 px 3px background : URL(图像/菜单_ BG。gif)repeat-x 0px-80px；padding:2px 12px }。ul _菜单阿利{高：40像素宽度：汽车；color : # fffffont-size :20 px；字体粗细：600；文本装饰：无；}/style脚本类型=' text/JavaScript ' var ISie=(文档。全部)？true:falsevar $ ID=函数(ID){返回' string '==的类型？文件。getelementbyid(id): id；} var Class={ create : function(){ return function(){ this。初始化。应用(这个，参数)；} }}var Extend=函数（目标，源){ for(源中的定义变量属性){目标[属性]=源[属性]；} } var Bind=fun(object，fun){ var args=array。原型。切片。调用(参数).切片(2);返回乐趣(){返回乐趣。apply(object，args)；} } var bindasevenlistener=function(object，fun){ var args=Array。原型。切片。调用(参数).切片(2);返回函数（事件){返回乐趣。应用(对象，[事件||window.event].concat(args))；} }函数addEventHandler(otargett，sEventType，fnHandler){ if(otargett。addeventlistener){ otargett。addeventlistener(sEventType，fnHandler，false)；} else if(otargett。attachevent){ otargett。attachevent(' on ' sEventType，fnHandler)；} else { Otarget[' on ' SeventType]=fnHandler；}};函数removeEventHandler(otargett，sEventType，fnHandler){ if(otargett。removeeventlistener){ otargett。removeeventlistener(sEventType，fnHandler，false)；} else if(otargett。separate vent){ otar gett。separate vent(' on ' SeventType，fnHandler)；} else { Otarget[' on ' SeventType]=null；}};/script script type=' text/JavaScript ' var MyMenu=class。create()；我的菜单。prototype={ initi李泽： function(ul){ this。lis=ul。GetElementsBytagname(' Li ')；for(var I=0；我是。利斯。长度；I){新BgChange(这个。lis[I])；} } } var BgChange=class。create()；bgchange。prototype={ initialize : function(Li){ this。李=李；这个绑定(这个，这个.鼠标移过)；这个_fnMouseOut=Bind(这个，这个鼠标移出)；addEventHandler(this.li，' mouseover '，this ._ fnMouseOver)；addEventHandler(this.li，' mouseout '，this ._ fnMouseOut)；this.timer=nullthis。I=-80；}，MouseOver:function(){ this .stop()；这个。I=2；如果(这个。I=0){ window。清除超时(这。计时器)；这个。I=0；}else{ this .显示BG()；这个。定时器=窗口。settimeout(这个._fnMouseOver，10)；} }，MouseOut:function(){ this .stop()；这个。I-=2；如果(这个。I=-80){ window。清除超时(这。计时器)；这个。I=-80；}else{ this .显示BG()；这个。定时器=窗口。settimeout(这个._fnMouseOut，10)；} }，showbg :函数(){ this。李。风格。背景位置=' 0px '这个。I ' px}，停止： FuncTion(){ if(this。计时器){ window。清除超时(这。计时器)；} } } onload=function(){ new MyMenu($ ID(' ul _ menu '))；}/script/head dydiv class=' div _ menu ' ul class=' ul _ menu ' id=' ul _ menu ' lia href=' # '欢迎光临/a/li lia href='# '最新更新/a/li lia href='# '下载排行/a/li lia href='# '网页特效/a/li lia href='# '广告联系/a/li /ul/div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。