1
今天国庆节后第一天上班，公司没有什么活，就写了一个小效果玩：
点击下载：>>demo
实现这个效果的关键点是：当鼠标离开一个没有完成动画的按钮，移到另一个按钮上，前一个按钮的动画也要继续执行；
代码如下：
<!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=utf-8″ />
<title>仿FLASH的竖排导航 —— 妙味课堂 www.miaov.com</title>
<style>
li { margin-bottom: 2px; list-style: none; background: url(bg.gif) repeat-x 0 1px; float: left; clear: left; cursor: pointer-; }
a { display: block; width: 120px; height: 25px; line-height: 25px; position: relative; padding: 0 5px; border: 1px solid #d6d6d6; text-decoration: none; font-size: 12px; color: #555; }
a:hover { font-weight: bold; border: 1px solid #b5b5b5; }
span { display: block; width: 9px; height: 8px; overflow: hidden; background: url(ico.gif) no-repeat; position: absolute; top: 8px; right: 10px; }
</style>
<script>
window.onload = function() {
var nav = new Nav(”menu”);
}
var Nav = function(id) {
var obj = document.getElementById(id); if(!obj) return;
var arr = []; // 设定计时器变量的存储容器、很关键！
for( var i = 0, olink; olink = obj.getElementsByTagName(”a”)[i]; i+=1 ) {
olink.setAttribute(”num”, i);
olink.onmouseover = function() { var objIndex = this.getAttribute(”num”); blockFn(objIndex, this); }
olink.onmouseout = function() { var objIndex = this.getAttribute(”num”); noneFn(objIndex, this); }
}
var blockFn = function(n, link) {
clearInterval(arr["n"+n]); var speed = 5;
arr["b"+n] = setInterval(function(){ speed += 1; if( speed === 30 ) { clearInterval(arr["b"+n]); }
link.style.paddingLeft = speed + “px”; link.style.paddingRight = speed + “px”;
}, 10);
}
var noneFn = function(n, link) {
clearInterval(arr["b"+n]); var speed = 30;
arr["n"+n] = setInterval(function(){ speed -= 1; if( speed === 5 ) { clearInterval(arr["n"+n]); }
link.style.paddingLeft = speed + “px”; link.style.paddingRight = speed + “px”;
}, 10);
}
}
</script>
</head>
<body>
<ul id=”menu”>
<li><a href=”http://www.miaov.com” target=”_blank”>首页<span></span></a></li>
<li><a href=”http://www.miaov.com/9.html” target=”_blank”>妙味精品课程<span></span></a></li>
<li><a href=”http://www.miaov.com” target=”_blank”>CSS相关知识<span></span></a></li>
<li><a href=”http://www.miaov.com/63.html” target=”_blank”>关于我<span></span></a></li>
<li><a href=”http://www.miaov.com” target=”_blank”>联系我们<span></span></a></li>
</ul>
</body>
</html>
这个效果不错。