欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實(shí)現(xiàn)的鼠標(biāo)響應(yīng)顏色漸變效果完整實(shí)例

 更新時(shí)間：2017年02月18日 11:05:02   作者：小炒花生米  
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的鼠標(biāo)響應(yīng)顏色漸變效果,涉及javascript面向?qū)ο蠹笆录O(jiān)聽、響應(yīng)機(jī)制相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)的鼠標(biāo)響應(yīng)顏色漸變效果。分享給大家供大家參考，具體如下：

運(yùn)行效果圖如下：

完整代碼如下：

<!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>顏色漸變實(shí)例</title>
<script type="text/javascript">
//--------------------------------------------------------------------
//基礎(chǔ)類庫(kù):
//1.獲取對(duì)象：
function $(id){
  return typeof id=='string'?document.getElementById(id):id;
  }
//2.添加事件監(jiān)聽：
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.自定"義產(chǎn)生對(duì)象"類：
var Class={
    Create:function(){
        return function(){
            this.initialize.apply(this,arguments);
          }
      }
  }
//4.對(duì)象屬性合并：
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);//當(dāng)前要改變顏色的對(duì)象。
        this._timer=null;//計(jì)時(shí)器。
        this.SetOptions(options);//傳入的數(shù)組參數(shù)。
        this.Steps=Math.abs(this.options.Steps);
        this.Speed=Math.abs(this.options.Speed);
        //this._colorArr:用來寄存當(dāng)前顏色的r.g.b信息。
        this.StartColorArr=this._colorArr=this.getColorArr(this.options.StartColor);
        this.EndColorArr=this.getColorArr(this.options.EndColor);
        this.Background=this.options.Background;
        //從開始到結(jié)束，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])];
        //設(shè)置對(duì)象顏色：
        this._setObjColor=this.Background?function(sColor){
            this._obj.style.backgroundColor=sColor;
          }:function(sColor){
            this._obj.style.color=sColor;
          };
        this._setObjColor(this.options.StartColor);
        //為對(duì)象添加事件：
        var oThis=this;
        addEventHandler(this._obj,"mouseover",
          function(){
              oThis.Fade(oThis.EndColorArr);
            }
        );
        addEventHandler(this._obj,"mouseout",function(){
            oThis.Fade(oThis.StartColorArr);
          });
      },
    /*
      2.對(duì)象屬性初始化：
    */
    SetOptions:function(options){
        this.options={
          StartColor:  "#000000",
          EndColor:  "#ffffff",
          Steps:    20,//漸變次數(shù)
          Speed:    20,//漸變速度，即每隔多少（Speed）毫秒漸變一次。
          Background: true//是否為對(duì)象背景漸變。
        }
        //合并屬性：
        Object.extend(this.options,options||{});
      },
    /*
      3.得到某個(gè)顏色的"r.g.b"信息數(shù)組：
      sColor：被計(jì)算的顏色值，格式為"#ccc000"。
      返回的一個(gè)數(shù)組。
    */
    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;
        }
        //返回“十六進(jìn)制”數(shù)據(jù)的“十進(jìn)制”值：
        return [parseInt(r,16),parseInt(g,16),parseInt(b,16)];
      },
    /*
      4.得到當(dāng)前原色值（r.g.b）漸變的梯度值。
      sRGB：開始顏色值（十進(jìn)制）
      eRGB：結(jié)束的顏色值（十進(jìn)制）
    */
    getColorAddValue:function(sRGB,eRGB){
      var stepValue=Math.abs((eRGB-sRGB)/this.Steps);
      if(stepValue>0&&stepValue<1){
        stepValue=1;
      }
      return parseInt(stepValue);
    },
    /*
      5.得到當(dāng)前漸變顏色的"r.g.b"信息數(shù)組。
      startColor:開始的顏色，格式為"#ccc000"；
      iStep:當(dāng)前漸變的級(jí)數(shù)（即當(dāng)前漸變的次數(shù)）。
      返回顏色值，如 #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:目標(biāo)顏色，為r.g.b信息數(shù)組。
    */
    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進(jìn)制數(shù)
function Hex(i) {
  if (i < 0) return "00";
  else if (i > 255) return "ff";
  else {
    //十進(jìn)制 轉(zhuǎn)成 十六進(jìn)制：
    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>

PS：這里再為大家推薦幾款網(wǎng)頁元素樣式相關(guān)工具供大家參考使用：

在線特效文字/彩色文字生成工具：
http://tools.jb51.net/aideddesign/colortext

Firefox的Linear Gradients (線性漸變)在線調(diào)試工具：
http://tools.jb51.net/aideddesign/moz_LinearGradients

webkit內(nèi)核safari/Chrome的Linear Gradients(線性漸變)在線調(diào)試工具
http://tools.jb51.net/aideddesign/webkit_LinearGradients

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論