[转] 鼠标移入/移出颜色渐变
生活随笔
收集整理的這篇文章主要介紹了
[转] 鼠标移入/移出颜色渐变
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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>
轉載于:https://www.cnblogs.com/lccnblog/p/3358794.html
總結
以上是生活随笔為你收集整理的[转] 鼠标移入/移出颜色渐变的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java 操作数据库
- 下一篇： 奋斗目标