您的位置：首页 > Web前端 > CSS

一种文字颜色渐变效果的超级连接特效

2013-03-01 09:27 477 查看
<html>

<head>

<title>一种文字颜色渐变效果的超级连接特效</title>

<script type="text/javascript">

    document.onmouseover = domouseover;

    document.onmouseout = domouseout;

    function domouseover() {

        if (document.all) {

            srcElement = window.event.srcElement;

            if (srcElement.className.indexOf("fade") > -1) {

                var linkName = srcElement.name;

                fadein(linkName);

            }

        }

    }

    function domouseout() {

        if (document.all) {

            srcElement = window.event.srcElement;

            if (srcElement.className.indexOf("fade") > -1) {

                var linkName = srcElement.name;

                fadeout(linkName);

            }

        }

    }

    function makearray(n) {

        this.length = n;

        for (var i = 1; i <= n; i++)

            this[i] = 0;

        return this;

    }

    hexa = new makearray(16);

    for (var i = 0; i < 10; i++)

        hexa[i] = i;

    hexa[10] = "a"; hexa[11] = "b"; hexa[12] = "c";

    hexa[13] = "d"; hexa[14] = "e"; hexa[15] = "f";

    function hex(i) {

        if (i < 0)

            return "00";

        else if (i > 255)

            return "ff";

        else

            return "" + hexa[Math.floor(i / 16)] + hexa[i % 16];

    }

    function setbgColor(r, g, b, element) {

        var hr = hex(r); var hg = hex(g); var hb = hex(b);

        element.style.color = "#" + hr + hg + hb;

    }

    function fade(sr, sg, sb, er, eg, eb, step, direction, element) {

        for (var i = 0; i <= step; i++) {

            setTimeout("setbgColor(Math.floor(" + sr + " *(( " + step + " - " + i + " )/ " + step + " ) + " + er + " * (" + i + "/" + step + ")),Math.floor(" + sg + " * (( " + step + " - " + i + " )/ " + step + " ) + " + eg + " * (" + i + "/" + step + ")),Math.floor("
+ sb + " * ((" + step + "-" + i + ")/" + step + ") + " + eb + " * (" + i + "/" + step + "))," + element + ");", i * step);

        }

    }

    function fadeout(element) {

        fade(255, 153, 0, 0, 0, 0, 30, 1, element);

    }

    /*------------------=[fadein]=----------------------

    ||Fades the text from one color to another color   ||

    ||when the mouse moves over the link.              ||

    ||-------------------------------------------------*/

    function fadein(element) {

        fade(0, 0, 0, 255, 153, 0, 18, 1, element);

    }

    /*ignore this >>>>*/

    function fadeIn2(id) {

        fade(255, 255, 255, 88, 118, 152, 25, 1, id);

    }

    function fadeOut2(id) {

        fade(88, 118, 152, 255, 255, 255, 29, 1, id);

    }

    /*<<<<< stop ignoring =)*/

// -->

</script>

</HEAD>

<BODY>

<a href="#" class=fade name=a>阿里西西WEB开发</a> 

</body>

</html>

<!--说明:更改链接，要注意，每个链接的name不能相同，要一次顺延下去，比如name＝a、name＝b....... 

<a href="#" class=fade name=a>阿里西西WEB开发</a> 

同时，我们再来研究一下颜色的修改，我们可以通过修改javascript代码。鼠标移出链接的渐变代码：

function fadeout(element) {

fade(255,153,0, 0,0,0, 30, 1, element);

}

其中，255,153,0为起始色；0,0,0为终止色；30为渐变步长；颜色都为RGB。

同理，鼠标移入时的渐变代码：

function fadein(element) {

fade(0,0,0, 255,153,0, 18, 1, element);

} 

只要更改这些颜色的RGB，和渐变步长，就能更改效果了！-->
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Css
相关文章推荐
新的分享
章节导航