JS CSS实现鼠标滑过时动态翻转的导航栏效果

本文以JS CSS为例，实现鼠标滑过时动态翻转的导航栏效果。分享给大家参考。具体如下：

这是一个当鼠标悬停时动态滚动的导航栏。请注意，这里使用了两张背景图片。请等待网页加载或刷新几次。这是通过JavaScript实现的，但是代码好像是从jQuery中提取出来的，有点像这样。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/js-CSS-鼠标悬停-导航-滚动-样式-代码/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html tolereta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题动态翻滚的导航条/titlestyle type='text/css '，' clear:after{content: ' .显示：块；高度：0;clear : both visibility : hidden } .清除{display:inline-block} .清除{ display : block } div # nav { height :32 px；背景： URL(图片/yl29。jpg)repeat-x } div # nav ul { width :705 px；列表式：无；边距-top : 0；右边距：自动；保证金-底部： 0;左边距left : 0px } div # nav ul Li { float : leftheight :32 px飞越：隐藏；背景-image : URL(images/yl30。jpg)；背景-重复：重复-y；背景-位置：右0;填充-top : 0；填充-右侧： 1px填充-底部： 0；左填充left : 0pxfont-family : Arial；font-size : 12px线高： 32px字体粗细：粗体；}阿利海军航空公司高度：100%;宽度： 77px背景： URL(图片/yl28。jpg)repeat-x；color: # fff文本装饰：无；填充-top : 0；填充-右侧： 5px填充-底部： 0；左衬垫左： 5px文本对齐：居中；}阿利导航区。悬停{清除：两者；背景-位置：0-32px；宽度： 77px# nav ul Li分区。在{背景位置：0-32px；# nav ul Li分区。nobg { background : none }/*]*//style/head dydiv id=' nav ' ul class=' clear ' lia href=' # '我们/a/lilia href='# '网页特效/a/lilia href='# '工具软件/a/lilia href='# '脚本下载/a/lilia href='# '菜单导航/a/lilia href='# '层和布局/a/lilia href='# '论坛社区/a/lilia href='# '广告联系/a/Lili class=' nobg '/Li/ul/div脚本类型=' text/JavaScript '/*！[CData[*/函数nav(c，config){ this。config=config | | { speed : 10，num : 2 }；这个。容器=(类型为(c)=' object ')？c :文件。getelementbyid(c)；这个。行高=这个。集装箱。偏移光线；这个。滚动时间id=nullvar _ this=this这个_ _ construct=function(){ var inner，el，hrefinner=_ this。集装箱。子节点[0].innerHTMLhref=_ this。集装箱。子节点[0].hrefEl=文档。创建元素(' a ')；El . innerhtml=innerel . href=href . class name=' hover _ this。集装箱。阑尾(El)；_这个。集装箱。onmouseover=function(){ _ this。start()}；_这个。集装箱。onmouseout=function(){ _ this。end()}；}();这个。start=function(){ _ this。clear()；_这个。滚动时间id=setTimeout(函数(){ _ this。scrolup()；}，_这个。配置。速度)；};这个。end=function(){ _ this。clear()；_这个。滚动时间id=setTimeout(函数(){ _ this。向下滚动()；}，_这个。配置。速度)；};这个。scrolup=function(){ var c=_ this。集装箱；if(c .滚动顶部=_ this。行高){ c .滚动顶部=_ this。行高；返回；} c .滚动ToP=_ this。配置。数量；_这个。滚动时间id=setTimeout(函数(){ _ this。scrolup()；}，_这个。配置。速度)；};这个。向下滚动=function(){ var c=_ this。集装箱；if(c .滚动顶部=0){ c .滚动顶部=0；返回；} c . scrollTop-=_ this。配置。数量；_这个。滚动时间id=setTimeout(函数(){ _ this。向下滚动()；}，_这个。配置。速度)；};这个。clear=function(){ clear time out(_ this。滚动时间id)}；}(function(){ var container=document。getelementbyid(' nav ')；var El _ Li=容器。getelementsbytagname(' Li ')；var arr=[]；for(var I=0；我叫李。长；i ){ if(el_li[i]).=' on ')继续；arr[i]=新nav(el_li[i]，{speed: 10，num : 4 })；}})();/*]]*//脚本/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。