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多物体 任意值 链式 缓冲运动
Aug 10 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 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实现文件安全下载
2006/10/09 PHP
PHP实现MySQL更新记录的代码
2008/06/07 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
Vue动态组件实例解析
2017/08/20 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
python检测某个变量是否有定义的方法
2015/05/20 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
Python实现股市信息下载的方法
2015/06/15 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
python爬取哈尔滨天气信息
2018/07/14 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
安全责任书范本
2014/04/15 职场文书
市场营销调查计划书
2014/05/02 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
以权谋私检举信范文
2015/03/02 职场文书
美丽心灵观后感
2015/06/01 职场文书
python Tkinter模块使用方法详解
2022/04/07 Python
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang