我的闪烁文字 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://www.cnblogs.com/zjfree/ ]
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· DeepSeek智能编程
· 精选4款基于.NET开源、功能强大的通讯调试工具
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?