js渐变颜色、背景、边框
2011-10-20 16:02
267 查看
我的闪烁文字 abc123
我的闪烁文字 abc123
边框
// 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');
// ]]>
代码:
下载:http://files.cnblogs.com/zjfree/blinkFont.rar
我的闪烁文字 abc123
边框
// 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');
// ]]>
代码:
<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
相关文章推荐
- Android 使用xml实现边框阴影,背景渐变效果(附有RGB颜色查询对照表)
- Android 使用xml实现边框阴影,背景渐变效果(附有RGB颜色查询对照表)
- 构建颜色渐变的网页背景(HTML+JS)
- 背景,文字,边框选中后颜色渐变
- js实现页面加载颜色渐变进度条
- 一个模仿图片透明渐变做的表格颜色渐变效果 js脚本特效
- JS实现网页背景颜色与select框中颜色同时变化的方法
- JS实现带圆弧背景渐变效果的导航菜单代码
- android背景颜色渐变
- js 颜色渐变
- Android GradientDrawable类的详解,设置activity的背景颜色渐变效果
- CSS中背景颜色的渐变
- VC++窗体背景颜色渐变 .
- Android GradientDrawable类的详解,设置activity的背景颜色渐变效果
- js 当鼠标移动到表格一行上时,该行背景颜色改变
- CSS背景颜色渐变处理
- js-dom实现字体大小、背景颜色的转换
- JS修改iframe页面背景颜色的方法
- 背景实现颜色渐变
- 边框、内阴影、背景图片、背景颜色、外阴影的呈现级别