我的闪烁文字 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
来源:https://www.cnblogs.com/zjfree/archive/2011/10/20/2219071.html