Heim > Artikel > Web-Frontend > Ein vollständiges Beispiel für einen in JavaScript implementierten Mausreaktions-Farbverlaufseffekt

Ein vollständiges Beispiel für einen in JavaScript implementierten Mausreaktions-Farbverlaufseffekt

高洛峰Original: 2017-02-20 16:43:281433Durchsuche

In diesem Artikel wird hauptsächlich der von JavaScript implementierte Mausreaktions-Farbverlaufseffekt vorgestellt, der die objektorientierte JavaScript-Ereignisüberwachung sowie die Bedienungsfähigkeiten im Zusammenhang mit Reaktionsmechanismen umfasst.

Dieser Artikel beschreibt JavaScript Umsetzung mit Beispielen Die Maus reagiert auf den Farbverlaufseffekt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Die Darstellung der Operation ist wie folgt:

Ein vollständiges Beispiel für einen in JavaScript implementierten Mausreaktions-Farbverlaufseffekt

Der vollständige Code lautet wie folgt:

<!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>

Ausführlichere Beispiele für in JavaScript implementierte Mausreaktions-Farbverlaufseffekte finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Regulärer Ausdruck für die Validierung von JS-FormulardatenNächster Artikel：Regulärer Ausdruck für die Validierung von JS-Formulardaten

In Verbindung stehende Artikel

Mehr sehen