[转] 鼠标移入/移出颜色渐变

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!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>

　　

posted on   都是脚本惹的祸  阅读(399)  评论(0)  编辑  收藏  举报

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示