JavaScript实现的鼠标响应颜色渐变效果完整实例


Posted in Javascript onFebruary 18, 2017

本文实例讲述了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>
Javascript 相关文章推荐
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
js实现二级导航功能
Mar 03 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
vue项目实现github在线预览功能
Jun 20 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
JavaScript实现点击切换功能
Jan 27 Javascript
JS设置时间无效问题的解决办法
Feb 18 #Javascript
js的OOP继承实现(必看篇)
Feb 18 #Javascript
jQuery仿IOS弹出框插件
Feb 18 #Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 #Javascript
angular ng-repeat数组中的数组实例
Feb 18 #Javascript
js Canvas绘制圆形时钟效果
Feb 17 #Javascript
Bootstrap风格的zTree右键菜单
Feb 17 #Javascript
You might like
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
javascript replace()正则替换实现代码
2010/02/26 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
vue的一个分页组件的示例代码
2017/12/25 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
Python学习笔记之os模块使用总结
2014/11/03 Python
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
硕士研究生自我鉴定范文
2013/12/27 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
国庆促销活动总结
2014/08/29 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
检讨书范文500字
2015/01/28 职场文书
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
Java异常体系非正常停止和分类
2022/06/14 Java/Android