JavaScript实现的鼠标响应颜色渐变效果完整实例
本文实例讲述了JavaScript实现的鼠标响应颜色渐变效果。分享给大家供大家参考，具体如下：
运行效果图如下：
完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>颜色渐变实例</title>
<script type="text/javascript">
//--------------------------------------------------------------------
//基础类库:
//1.获取对象：
function $(id){
return typeof id=='string'?document.getElementById(id):id;
}
//2.添加事件监听：
function addEventHandler(oTarget,sEventType,fnHandler){
if(oTarget.addEventListener){
oTarget.addEventListener(sEventType,fnHandler,false);
}else if(oTarget.attachEvent){
oTarget.attachEvent("on"+sEventType,fnHandler);
}else{
oTarget["on"+sEventType]=fnHandler;
}
}
//3.自定"义产生对象"类：
var Class={
Create:function(){
return function(){
this.initialize.apply(this,arguments);
}
}
}
//4.对象属性合并：
Object.extend=function(destination,source){
for(var property in source){
destination[property]=source[property];
}
return destination;
}
//--------------------------------------------------------------------
var colorFade=Class.Create();
colorFade.prototype={
//1.类的初始化：
initialize:function(obj,options){
this._obj=$(obj);//当前要改变颜色的对象。
this._timer=null;//计时器。
this.SetOptions(options);//传入的数组参数。
this.Steps=Math.abs(this.options.Steps);
this.Speed=Math.abs(this.options.Speed);
//this._colorArr:用来寄存当前颜色的r.g.b信息。
this.StartColorArr=this._colorArr=this.getColorArr(this.options.StartColor);
this.EndColorArr=this.getColorArr(this.options.EndColor);
this.Background=this.options.Background;
//从开始到结束，r.g.b三种原色渐变的梯度值（即，每次渐变要增加/减少的值）。
this._stepAddValueArr=[this.getColorAddValue(this.StartColorArr[0],this.EndColorArr[0]),this.getColorAddValue(this.StartColorArr[1],this.EndColorArr[1]),this.getColorAddValue(this.StartColorArr[2],this.EndColorArr[2])];
//设置对象颜色：
this._setObjColor=this.Background?function(sColor){
this._obj.style.backgroundColor=sColor;
}:function(sColor){
this._obj.style.color=sColor;
};
this._setObjColor(this.options.StartColor);
//为对象添加事件：
var oThis=this;
addEventHandler(this._obj,"mouseover",
function(){
oThis.Fade(oThis.EndColorArr);
}
);
addEventHandler(this._obj,"mouseout",function(){
oThis.Fade(oThis.StartColorArr);
});
},
/*
2.对象属性初始化：
*/
SetOptions:function(options){
this.options={
StartColor: "#000000",
EndColor: "#ffffff",
Steps: 20,//渐变次数
Speed: 20,//渐变速度，即每隔多少（Speed）毫秒渐变一次。
Background: true//是否为对象背景渐变。
}
//合并属性：
Object.extend(this.options,options||{});
},
/*
3.得到某个颜色的"r.g.b"信息数组：
sColor：被计算的颜色值，格式为"#ccc000"。
返回的一个数组。
*/
getColorArr:function(sColor){
var curColor=sColor.replace("#","");
var r,g,b;
if(curColor.length>3){//六位值
r=curColor.substr(0,2);
g=curColor.substr(2,2);
b=curColor.substr(4,2);
}else{
r=curColor.substr(0,1);
g=curColor.substr(1,1);
b=curColor.substr(2,1);
r+=r;
g+=g;
b+=b;
}
//返回“十六进制”数据的“十进制”值：
return [parseInt(r,16),parseInt(g,16),parseInt(b,16)];
},
/*
4.得到当前原色值（r.g.b）渐变的梯度值。
sRGB：开始颜色值（十进制）
eRGB：结束的颜色值（十进制）
*/
getColorAddValue:function(sRGB,eRGB){
var stepValue=Math.abs((eRGB-sRGB)/this.Steps);
if(stepValue>0&&stepValue<1){
stepValue=1;
}
return parseInt(stepValue);
},
/*
5.得到当前渐变颜色的"r.g.b"信息数组。
startColor:开始的颜色，格式为"#ccc000"；
iStep:当前渐变的级数（即当前渐变的次数）。
返回颜色值，如 #fff000。
*/
getStepColor:function(sColor,eColor,addValue){
if(sColor==eColor){
return sColor;
}else if(sColor<eColor){
return (sColor+addValue)>eColor?eColor:(sColor+addValue);
}else if(sColor>eColor){
return (sColor-addValue)<eColor?eColor:(sColor-addValue);
}
},
/*
6.开始渐变：
endColorArr:目标颜色，为r.g.b信息数组。
*/
Fade:function(endColorArr){
clearTimeout(this._timer);
var er=endColorArr[0],
eg=endColorArr[1],
eb=endColorArr[2],
r=this.getStepColor(this._colorArr[0],er,this._stepAddValueArr[0]),
g=this.getStepColor(this._colorArr[1],eg,this._stepAddValueArr[1]),
b=this.getStepColor(this._colorArr[2],eb,this._stepAddValueArr[2]);
this._colorArr=[r,g,b];
this._setObjColor("#"+Hex(r) + Hex(g) + Hex(b));
if(r!=er||g!=eg||b!=eb){
var oThis=this;
oThis._timer=setTimeout(function(){oThis.Fade(endColorArr)},oThis.Speed);
}
}
}
//返回16进制数
function Hex(i) {
if (i < 0) return "00";
else if (i > 255) return "ff";
else {
//十进制 转成 十六进制：
var str = "0" + i.toString(16);
return str.substring(str.length - 2);
}
}
</script>
</head>
<body>
<div id="test" style="height:40px;width:200px;border:1px solid red;">
嘻嘻!
</div>
<div id="test1" style="height:40px;width:200px;border:1px solid red;">
呵呵!
</div>
<div id="test2" style="height:40px;width:200px;border:1px solid red;">
哈哈!
</div>
</body>
<script type="text/javascript">
var colorFade01=new colorFade("test",{StartColor:'#000000',EndColor:'#8AD4FF',Background:true});
var colorFade02=new colorFade("test",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false});
var colorFade03=new colorFade("test1",{StartColor:'#000000',EndColor:'#8AD4FF',Background:true});
var colorFade04=new colorFade("test1",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false});
var colorFade05=new colorFade("test2",{StartColor:'#000000',EndColor:'#8AD4FF',Background:true});
var colorFade06=new colorFade("test2",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false});
</script>
</html>
PS：这里再为大家推荐几款网页元素样式相关工具供大家参考使用：
在线特效文字/彩色文字生成工具：
http://tools.jb51.net/aideddesign/colortext
Firefox的Linear Gradients (线性渐变)在线调试工具：
http://tools.jb51.net/aideddesign/moz_LinearGradients
webkit内核safari/Chrome的Linear Gradients(线性渐变)在线调试工具
http://tools.jb51.net/aideddesign/webkit_LinearGradients
更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript事件相关操作与技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
js实现颜色阶梯渐变效果（Gradient算法）
html中颜色可以使用rgb和hex方式来表示. 在色彩中,色相.明度.纯度也都可以产生渐变效果,并会表现出具有丰富层次的美感.本文主要讲述两种颜色RGB数值的梯级渐变算法. 其中如如16进制颜色如#336600分别表示rgb模式中r的值为16进制33(即),g的值为16进制的66,和b为16进制的00,转换后用rgb完整表述为:rgb(51,102,0). 其中使用16进制进行加减乘除不方便,尤其还使用了rgb的16进制颜色组合(#336600).因此我们可以将16进制转换为rgb单个进行梯级
-
使用three.js 画渐变的直线
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象.你可以在它的主页上看到许多精彩的演示.不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js的代码托管在github上面. http://github.com/mrdoob/three.js/ 我们来看实例吧 <!DOCTYPE html> <html> <head>
-
js实现有过渡渐变效果的图片轮播相册（兼容IE,ff）
本文实例介绍了js实现图片轮播相册,具有过渡渐变效果,分享给大家供大家参考,具体内容如下 思路很简单,用2个属性保存当前图片和上一张图片,用2个定时器分别控制透明度和当前过渡的图片. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <style> #cnt{width:100%;height:80%;} .ctrl{text-align:center;border:1px solid gray;font-s
-
神奇！js+CSS+DIV实现文字颜色渐变效果
本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果,供大家参考,具体内容如下 下面是 CSS 部分代码: <!--CSS代码开始--> body{ font:12px/1.5 Microsoft Yahei; } h3{ padding:10px; margin:0; background-color:#999; color:#fff; font:16px/1.5 Microsoft Yahei; text-align:center; } .box{ position:relati
-
漂亮! js实现颜色渐变效果
今天做组织机构,要分级别显示颜色,自己计算半天也没算出颜色渐变的方法,出来总是花里胡哨的难看的不要不要的,所以查了一下,找到一个js代码,试了试,很完美哦! <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script src
-
JS实现颜色梯度与渐变效果完整实例
本文实例讲述了JS实现颜色梯度与渐变效果的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht
-
javascript计算渐变颜色的实例
javascript计算渐变颜色的实例 有时候,一个表格或者一片区域内,需要若干同色系从浅到深的颜色,如图所示: 如果需要的颜色少,则颜色的差异较大,需要的颜色多,则颜色差异小,如下图: 这时,就用到了同色系渐变颜色的计算,算法如下: function getItemColors (colorLevel) { var colors= []; //默认的最深颜色 var red = 134,green = 108, blue = 184; //最浅颜色是239,239,239 比如:最浅颜色的re
-
jQuery与js实现颜色渐变的方法
本文实例讲述了jQuery与js实现颜色渐变的方法.分享给大家供大家参考,具体如下: 1.目的 本来想的是 提示用户应该点某个按钮 这个功能,就想着让这个按钮div的边框变成醒目的颜色然后逐渐变白. 在网上搜了搜,本来想使用jQuery的animate,后来发现这个方法只能用来进行长度的渐变.还有就是需要下载jQuery的颜色渐变插件来实现,感觉挺麻烦的,就自己用土办法实现了. 2.原理 先获得初始颜色的rgb,再获得终止颜色的rgb,使用rgb三个数字的差值,从初始颜色的rgb逐渐过渡到终止颜
-
JavaScript实现的鼠标响应颜色渐变效果完整实例
本文实例讲述了JavaScript实现的鼠标响应颜色渐变效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199
-
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
实例如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div> <div> <!--<input type="button" id="open" value="open&q
-
JS实现的颜色实时渐变效果完整实例
本文实例讲述了JS实现的颜色实时渐变效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head
-
javascript绘制漂亮的心型线效果完整实例
本文实例讲述了javascript绘制漂亮的心型线效果实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>JS心型线</title> <style> div{ position:absolute; } .xx-box{ left:50%; top:50%;
-
JS实现鼠标框选效果完整实例
本文实例讲述了JS实现鼠标框选效果的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; char
-
javascript实现的猜数小游戏完整实例代码
本文实例讲述了javascript实现的猜数小游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <
-
JavaScript+html5 canvas制作的百花齐放效果完整实例
本文实例讲述了JavaScript+html5 canvas制作的百花齐放效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { border:5px solid gra
-
Javascript实现的Map集合工具类完整实例
本文实例讲述了Javascript实现的Map集合工具类.分享给大家供大家参考.具体如下: var Map = function(){ // 构造entry实体 var Entry = function(key, value){ this.key = key; this.value = value; } this.entries = new Array(); // 构造put方法在数组中放入一个Entry this.put = function(key, value){ // 数组中已存在就不放
-
学习JavaScript鼠标响应事件
本文为大家分享了一个简单的鼠标模拟案例,供大家参考,具体实现内容如下 如何实现捕抓鼠标事件,当鼠标滑动时,获取当前鼠标的坐标,接着在一个透明区域里绑定捕抓的位移,这样就能在模拟的透明区域里实现鼠标滑动的模型. 效果图: HTML代码: <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title> the mouse </title> <link r