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 相关文章推荐
线路分流自动跳转代码;希望对大家有用!
Dec 02 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
vue.js实现简单购物车功能
May 30 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 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中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
Python常用列表数据结构小结
2014/08/06 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
python基于opencv检测程序运行效率
2019/12/28 Python
python把一个字符串切开的实例方法
2020/09/27 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
一名女生的自荐信
2013/12/08 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
关于保护环境的标语
2014/06/09 职场文书
参赛口号
2014/06/16 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python