Un exemple complet d'effet de dégradé de couleur de réponse de souris implémenté en JavaScript-js tutoriel-php.cn

Un exemple complet d'effet de dégradé de couleur de réponse de souris implémenté en JavaScript

高洛峰

Libérer： 2017-02-20 16:43:28

original

1476 Les gens l'ont consulté

Cet article présente principalement l'effet de dégradé de couleur de réponse de la souris implémenté par JavaScript, impliquant une surveillance orientée objet et des événements JavaScript, ainsi que des compétences opérationnelles liées au mécanisme de réponse. Les amis dans le besoin peuvent s'y référer

Cet article décrit JavaScript. implémentation avec exemples La souris réagit à l'effet de dégradé de couleurs. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Le rendu de l'opération est le suivant :

Un exemple complet deffet de dégradé de couleur de réponse de souris implémenté en JavaScript

Le code complet est le suivant :

<!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==&#39;string&#39;?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>
<p id="test" style="height:40px;width:200px;border:1px solid red;">
  嘻嘻!
</p>
<p id="test1" style="height:40px;width:200px;border:1px solid red;">
  呵呵!
</p>
<p id="test2" style="height:40px;width:200px;border:1px solid red;">
  哈哈!
</p>
</body>
<script type="text/javascript">
var colorFade01=new colorFade("test",{StartColor:&#39;#000000&#39;,EndColor:&#39;#8AD4FF&#39;,Background:true});
var colorFade02=new colorFade("test",{StartColor:&#39;#8AD4FF&#39;,EndColor:&#39;#000000&#39;,Background:false});
var colorFade03=new colorFade("test1",{StartColor:&#39;#000000&#39;,EndColor:&#39;#8AD4FF&#39;,Background:true});
var colorFade04=new colorFade("test1",{StartColor:&#39;#8AD4FF&#39;,EndColor:&#39;#000000&#39;,Background:false});
var colorFade05=new colorFade("test2",{StartColor:&#39;#000000&#39;,EndColor:&#39;#8AD4FF&#39;,Background:true});
var colorFade06=new colorFade("test2",{StartColor:&#39;#8AD4FF&#39;,EndColor:&#39;#000000&#39;,Background:false});
</script>
</html>

Copier après la connexion

Pour des exemples plus complets d'effets de dégradé de couleurs de réponse de souris implémentés en JavaScript, veuillez faire attention au site Web PHP chinois !