JS CSS实现带有碰撞缓冲效果的竖向导航条代码

本文实例讲述了JS CSS实现带有碰撞缓冲效果的竖向导航条代码。分享给大家供大家参考。具体如下：

这是一款碰撞缓冲效果的导航条，JavaScript妙味课堂奉献给大家的作品，很不错的竖向菜单，希望大家喜欢。所用技术是射流研究…和CSS。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-pzxg-r-nav-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。' DTD '标题碰撞缓冲效果的导航条/title style type=' text/CSS ' * { padd : 0；保证金： 0；}李{列表式：无；}车身{ background : # fff } ul { width : 202 pmx margin : 40px自动0;相对位置：} li {宽度： 200像素重量： 30像素线高： 30px左填充： 10pxborder: 1px固体# ccc边框-左侧： 3px实心# 666;font-size : 14px颜色： # 333边距-底部： 5px相对位置：z-index : 2；} a { color: # 333文本装饰：无；}.活动{ font-weight : bold；背景# fff0f0} # bar { width: 10px左填充： 0;背景# cc6699border: 1px固体# cc6699绝对位置：top : 0；左侧：-14px；z-index : 3；}/stylescriptvar obj=null；var ALis=nul var ObaR=nul var Itime=nul var isPeed=0；var IAcc=3；var ONoff=0；var IPrev=0；var Inte=0；函数{ for(var I=0；I ALIs . lengthi=1){ if(ALIs[I]===this){ var itar get=(ALIs[0]).偏右5)*一；iNext=I；on off=Inte-IPrev；if(Itime){ clearInterval(Itime)；} if(onOff=0){ Itime=set interval(' elastic(' itar get ')，35)；} else { iTime=setInterval('顺延(“iTarget ')”，35)；} IPrev=InTe } ALis[I].CLaSS name=this . CLaSS name=' active } }函数弹性(目标){ var top=obar。偏移；iSpeed=iactop=iSpeedif(top=target){ iSpeed *=-0.7；if(数学。ABS(iSpeed)=IAcc){ clearInterval(Itime)；iTime=null } top=target } ObaR . style . top=top ' px }函数顺延(target){ if(obar。offset top===target){ clearInterval(Itime)；iTime=null } else { isPeed=(target-ObaR。offset top)/4；ObaR。风格。top=ObaR。offsettop isPeed ' px} }窗口。onload=function(){ obj=document。getelementbyid(' nav ')；aLis=obj。getelementsbytagname(' Li ')；oBar=文档。getelementbyid(' bar ')；for(var I=0；I ALi . lengthi=1){ if(ALi[I]).身份证！=' bar '){ ALi[I].onmouseover=goTime } } }/script/head dyul id=' nav ' Li class=' active ' a href=' # '首页/a/li lia href='# '我们/a/li lia href='# '妙味课程/a/li lia href='# '联系方式/a/li li id='bar'/ul/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。