Javascript富有弹性碰撞缓冲的竖向导航效果代码

时间：2022-06-25 21:19:12 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>富有弹性碰撞缓冲的竖向导效果代码</title> 
<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>"> 
* { padding: 0; margin: 0; } 
li { list-style: none; } 
body { background: #fff; } 
ul {  margin: 40px auto 0; position: relative; } 
li {   line- padding-left: 10px; border: 1px solid #ccc; border-left: 3px solid #666; font-size: 14px; color: #333; margin-bottom: 5px; position: relative; z-index: 2; } 
a { color: #333; text-decoration: none; } 
.active { font-weight: bold; background: #fff0f0; } 
#bar {  padding-left: 0; background: #cc6699; border: 1px solid #cc6699; position: absolute; top: 0; left: -14px; z-index: 3; } 
</style> 
<script> 
var obj = null; 
var aLis = null; 
var oBar = null; 
var iTime = null; 
var iSpeed = 0; 
var iAcc = 3; 
var onOff = 0; 
var iPrev = 0; 
var iNext = 0; 
function goTime() 
{ 
for(var i = 0; i < aLis.length; i+=1) 
{ 
if(aLis[i] === this) 
{ 
var iTarget = (aLis[0].offsetHeight + 5) * i; 
iNext = i; 
onOff = iNext - iPrev; 
if(iTime) 
{ 
clearInterval(iTime); 
} 
if(onOff>=0) 
{ 
iTime = setInterval("elasticity("+ iTarget +")",35); 
} 
else 
{ 
iTime = setInterval("postpone("+ iTarget +")",35); 
} 
iPrev = iNext; 
} 
aLis[i].className=""; 
this.className="active"; 
} 
} 
function elasticity(target) 
{ 
var top = oBar.offsetTop; 
iSpeed+=iAcc; 
top += iSpeed; 
if(top >= target) 
{ 
iSpeed*=-0.7; 
if(Math.abs(iSpeed)<=iAcc) 
{ 
clearInterval(iTime); 
iTime=null; 
} 
top=target; 
} 
oBar.style.top = top + "px"; 
} 
function postpone(target) 
{ 
if(oBar.offsetTop===target) 
{ 
clearInterval(iTime); 
iTime=null; 
} 
else 
{ 
iSpeed = (target - oBar.offsetTop)/4; 
oBar.style.top = oBar.offsetTop + iSpeed + "px"; 
} 
} 
window.onload = function(){ 
obj = document.getElementById("nav"); 
aLis = obj.getElementsByTagName("li"); 
oBar = document.getElementById("bar"); 
for(var i = 0; i < aLis.length; i+=1) 
{ 
if(aLis[i].id!="bar") 
{ 
aLis[i].onmouseover = goTime; 
} 
} 
}; 
</script> 
</head> 
<body> 
<ul id="nav"> 
<li class="active"><a href="http://www.111com.net">网站首页</a></li> 
<li><a href="#">关于我们</a></li> 
<li><a href="#">资源下载</a></li> 
<li><a href="#">联系方式</a></li> 
<li id="bar"></li> 
</ul> 
</body> 
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

Javascript富有弹性碰撞缓冲的竖向导航效果代码

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程