js渐变颜色、背景、边框

孤者浪人 提交于 2020-01-31 01:00:07
我的闪烁文字 abc123
我的闪烁文字 abc123
边框

代码:

<div id="div1">我的闪烁文字 abc123</div><div id="div2">我的闪烁文字 abc123</div><div id="div3" style="height:200px; width:200px; border:solid 5px black;">边框</div><script type="text/javascript">function blink(strId, strEnd, strBegin, speed, styleName){    strBegin = strBegin || '#000000';    speed = speed || 100;    styleName = styleName || 'color';    //获取当前颜色分量值    var getCur = function(beginValue, endValue, curValue, bo, rateValue)    {        if(beginValue == endValue)        {            return beginValue;        }                rateValue = beginValue < endValue ? rateValue : -rateValue;        curValue += bo ? rateValue : -rateValue;                //防止超出颜色边界        var min = Math.min(beginValue, endValue);        if(curValue < min)        {            curValue = min;        }        var max = Math.max(beginValue, endValue);        if(curValue > max)        {            curValue = max;        }                return curValue;    };    //获取颜色变化步长    var getRate = function(b, e)    {        var obj = new Object();        var step = 10;        obj.r = Math.abs(b.r - e.r) / step;        obj.g = Math.abs(b.g - e.g) / step;        obj.b = Math.abs(b.b - e.b) / step;                return obj;    }    //将#000000转换成 RGB值    var getRGB = function(color)    {        var obj = new Object();        obj.r = parseInt(color.substr(1,2), 16);        obj.g = parseInt(color.substr(3,2), 16);        obj.b = parseInt(color.substr(5,2), 16);                return obj;    }    //将RGB值转换成 #000000    var getColor = function(obj)    {        obj.r = Math.round(obj.r);        obj.g = Math.round(obj.g);        obj.b = Math.round(obj.b);        var color = '#';        color += (obj.r < 16 ? '0':'') + obj.r.toString(16);        color += (obj.g < 16 ? '0':'') + obj.g.toString(16);        color += (obj.b < 16 ? '0':'') + obj.b.toString(16);                return color;    }    var el = document.getElementById(strId);    var begin = getRGB(strBegin);    var end = getRGB(strEnd);    var curColor = getRGB(strBegin);    var bo = true;    var rate = getRate(begin, end);    var wait = 10; //在end颜色上停留10个单元时间    var curWait = 0;    window.setInterval(function(){        if(curWait-->0)return;        curColor.r = getCur(begin.r, end.r, curColor.r, bo, rate.r);        curColor.g = getCur(begin.g, end.g, curColor.g, bo, rate.g);        curColor.b = getCur(begin.b, end.b, curColor.b, bo, rate.b);        el.style[styleName] = getColor(curColor);        if(curColor.r == begin.r && curColor.g == begin.g && curColor.b == begin.b)        {            curWait = wait;            bo = true;        }        if(curColor.r == end.r && curColor.g == end.g && curColor.b == end.b)        {            bo = false;        }    } , speed);};blink('div1', '#ff0000');blink('div2', '#00ff00', '#000000', 500);blink('div2', '#000000', '#00ff00', 500, 'backgroundColor');blink('div3', '#ffffff', '#000000', 100, 'borderColor');</script>

下载:http://files.cnblogs.com/zjfree/blinkFont.rar

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!