 |
热门文章 |
|
|
|
|
| 鼠标移入/移出颜色渐变 |
| 来源：源码爱好者 更新时间：2012/2/10 23:57:40 阅读次数： 我要投稿 |
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>鼠标移入/移出颜色渐变</title>
<style>
ul, li{
margin:0;
padding:0;
}
#link{
width:150px;
height:150px;
padding:10px;
list-style:none;
background:#B7B7B7;
font:14px/1.5 Arial;
}
#link a{
color:#FFF;
text-decoration:none;
}
</style>
<script>
window.onload = function() {
var aLink = document.getElementById("link").getElementsByTagName("a");
for(var len = aLink.length; len--;) {
aLink[len].onmouseover = function() {
setColor(this, 15)
};
aLink[len].onmouseout = function() {
setColor(this, 0)
};
}
function setColor(obj, num) {
clearInterval(obj.timer);
var i = num;
obj.timer = setInterval(function() {
obj.style.color = getColor(i)
num ? i-- : i++;
if(i < 0 || i > 15) clearInterval(obj.timer)
}, 30)
}
function getColor(num) {
for(var result = "", len = 3; len--;) {
result += num.toString(16)
}
return "#" + result
}
}
</script>
</head>
<body>
<ul id="link">
<li><a href="javascript:;">CYCLING</a></li>
<li><a href="javascript:;">INLINE</a></li>
<li><a href="javascript:;">QUAD</a></li>
<li><a href="javascript:;">SHORT TRACK</a></li>
<li><a href="javascript:;">LONG TRACK</a></li>
</ul>
</body>
</html> |
| 特效说明： |
鼠标移入/移出颜色渐变，鼠标移入，文字淡入，鼠标移出，文字淡出，淡入淡出的链接文字特效。 |
|
| 上一篇文章： 链接翻滚的文字特效下一篇文章： 单行文字上下无缝循环滚动 |
|
|
|
注册 登录
