<!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:#0F0;
text-decoration:none;
}
</style>
<script>
window.onload = function() {
var aLink = document.getElementById("link").getElementsByTagName("a");
var cfg = {
beginColor:0x00FF00,//十六进制,字体开始的色
endColor:0xFF00FF,//十六进制,字体结束的色
duration:10//时长
};
for(var len = aLink.length; len--;) {
aLink[len].onmouseover = function() {
setColor(this, 0)
};
aLink[len].onmouseout = function() {
setColor(this, cfg.duration)
};
}
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 > cfg.duration) clearInterval(obj.timer)
}, 30)
}
function getColor(i) {
var br = Math.floor(cfg.beginColor/(256*256)),
bg = Math.floor((cfg.beginColor%(256*256))/256),
bb = Math.floor(cfg.beginColor%256),
er = Math.floor(cfg.endColor/(256*256)),
eg = Math.floor((cfg.endColor%(256*256))/256),
eb = Math.floor(cfg.endColor%256),
r = br+(er-br)*i/cfg.duration,
g = bg+(eg-bg)*i/cfg.duration,
b = bb+(eb-bb)*i/cfg.duration,
re="#" + toHex(r)+toHex(g)+toHex(b);
//console.log(re);
return re;
}
function toHex(n) {
n = Math.round(n);
n = (n.toString(16).length<2 ? "0"+n.toString(16) : n.toString(16)).toUpperCase();
return n;
}
}
</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>
