鼠标在字体上移动，字体颜色渐变

浏览数：31 / 时间：2015年06月11日

这里的传参方法跟本博客中javascript"鼠标移入移出背景色渐变"中的传参方式相同，我贴的代码是全部都有的，大家可以复制过去直接看效果，有更好的建议的望留言……

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标在字体上移入移出字体颜色渐变</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            margin:10px auto;
            padding:20px;
            width:100px;
            background-color: #B7B7B7;
            font-size: 20px;
        }
        ul li{
            list-style-type: none;
            height:25px;
            line-height: 25px;
            text-align: center;
        }
        a{
            text-decoration: none;
            color:#fff;
        }
    </style>
</head>
<body>
    <ul id="con">
        <li><a href="javascript:;">one</a></li>
        <li><a href="javascript:;">two</a></li>
        <li><a href="javascript:;">three</a></li>
        <li><a href="javascript:;">four</a></li>
        <li><a href="javascript:;">five</a></li>
        <li><a href="javascript:;">six</a></li>
    </ul>
    <script>
        var links = document.getElementById("con").getElementsByTagName("a");
        for (var i = 0; i < links.length; i++) {
            //这里的传参跟本博客javascript中一个"鼠标渐入渐出背景色变化"中的传参一样，使用临界值
            links[i].onmouseover = function(){
                changeColor(this,15);//这里很巧秒地将对象传递到函数中，这里的this太漂亮了
            }
            links[i].onmouseout = function(){
                changeColor(this,0);
            }
        };
        function changeColor(obj,color_val){
            clearInterval(obj.timer);
            var i = color_val;
            obj.timer = setInterval(function(){
                color_val ? i-- : i++;//这个或许就是高手的写法，color_val相当于将整数转换为布尔值时的规则
                var result = getColor(i);
                obj.style.color = result;
                if(i==0||i==15){
                    clearInterval(obj.timer);
                }
            },30);
        }
        //将颜色值转变为16进制，这里参考一个16进制颜色表示规则，随着数值的变大颜色越浅
        function getColor(color){
            var result = "";
            for(var i=0;i<3;i++){
                result += color.toString(16);
            }
            return "#"+result;
        }
    </script>
</body>
</html>