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 相关文章推荐
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
jquery移动节点实例
Jan 14 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 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/12/13 PHP
php 文件状态缓存带来的问题
2008/12/14 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
Javascript 自定义类型方法小结
2010/03/02 Javascript
js null undefined 空区别说明
2010/06/13 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
浅谈python可视化包Bokeh
2018/02/07 Python
详解python中index()、find()方法
2019/08/29 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
实习生自我评价
2014/01/18 职场文书
小学毕业家长寄语
2014/01/19 职场文书
采购主管岗位职责
2014/02/01 职场文书
中秋寄语大全
2014/04/11 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
航空学院求职信
2014/06/11 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
营销学习心得体会
2014/09/12 职场文书
民政局未婚证明
2015/06/15 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python