小菜毛毛技術分享
          
				
          與大家共同成長
          
			          		
		
          
	
          

          

          
	
          
		
          
			
				
 
BlogJava ::
首頁 ::
聯系 ::
聚合
 ::
管理

			
			
			
				

	
          
		
          
			
			
			
				 
				164 
				Posts ::
				141 Stories
				::
				94 Comments
				::
				0 Trackbacks
			
		
          
	
          

			          		
		
          
	
          

          


          

          
	
          
	
					

          
			
	
	
          
		
          JavaScript 顏色梯度和漸變效果 
          

          

          

          很久沒寫blog，太忙了。沒什么時間寫復雜的東西，重新把顏色漸變效果寫一遍。
          
關于顏色的效果一般就兩個，顏色梯度變化和樣式的顏色漸變，前者在ie中一般用濾鏡實現。
          


          
實例效果
          

          

          預覽效果1：
          

          這是一個顏色梯度變化演示：
          

          


          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          

          


          
預覽效果2：
          

          一個顏色漸變的菜單：
          

          


          

          
    
        
          
            
          


          
預覽效果3：
          

          顏色漸變的有趣應用，點擊隨機顏色漸變：
          

          點擊隨機換顏色
          

          

           
          

          程序說明
          

          【ColorGrads顏色梯度】
          

          程序ColorGrads的作用是通過StartColor和EndColor生成顏色梯度集合。
          
顏色都可以用紅(r)、綠(g)、藍(b)三個顏色來表示。
          
程序中先通過GetColor把一般的顏色表示形式轉化成一個用紅(r)、綠(g)、藍(b)三個顏色值作元素的集合。
          
那就首先要知道有什么顏色表示形式，從w3c的Colors部分可以知道有以下形式：
          
關鍵詞模式：
          
em { color: red }
          
RGB顏色模式：
          
em { color: #f00 }
          
em { color: #ff0000 }
          
em { color: rgb(255,0,0) }      
          
em { color: rgb(100%, 0%, 0%) } 
          
以上都是表示同一種顏色（紅色）。
          
獲取顏色屬性的形式在ie和ff并不同，ff統一返回RGB顏色模式的第三種形式，ie則按照設置時的形式返回。
          

          先說說RGB顏色模式，前兩種比較常用應該都明白他們的區別吧，它用的是16進制表示形式，而我們想要10進制的。
          
把一個16進制表示的字符轉成10進制數字，一般用parseInt，在substr截取字符之后就可以用parseInt轉換。
          
對于#ff0000這個形式可以這樣轉換：
          

          Code
          


          
parseInt的第二個參數就是第一個參數的進制值。
          
對于#f00形式，跟上一個差不多，只是轉換之前要先換成完整表示形式：
          

          Code
          

           
          

          后面兩種可能用的就比較少了，一個用10進制的rgb顏色值表示，另一個用百分比來表示。
          
ff嚴格按照那樣的格式來表示，而ie就“放松”很多，例如：
          
ie可以允許數字百分比混用，ff不可以；
          
ff必須有逗號分隔，ie可以只用空格分隔；
          
當然我們使用時最好是按照w3c的標準來設置了。
          
ps：那個DHTML 手冊上寫的 EM { color: rgb 1.0 0.0 0.0 } 根本不能用的，不要被誤導了。
          
對這個形式，程序用正則取得數值，如果有%就根據百分比計算出對應數值：
          

          Code
          

           
          

          而關鍵詞大家都很熟悉，要轉化卻很麻煩，因為沒有一定規律只能一個一個對應：
          

          Code
          

           
          

          在Create創建顏色集合程序中獲得開始顏色和結束顏色的數據后，再根據Step（多少步）就可以獲得步長了：
          

          Code
          


          
再根據步長生成集合：
          

          Code
          

           
          

          正確的顏色值是在0到255之間的，而且是不帶小數的，所以最好修正一下：
          

          Code
          

           
          


          
【ColorTrans顏色漸變】
          

          有了顏色梯度集合，只需要設個定時器把集合的值依次顯示就是一個漸變效果了。
          
這個漸變一般是分兩個步驟，分別是（FadeIn）和漸出（FadeOut）。
          
原理就是通過改變_index集合索引，漸入時逐漸變大，漸出時逐漸變小：
          

          Code
          


          
在SetColor設置樣式程序中，通過CssColor來設置要修改的樣式屬性，例如字體顏色是"color"，背景色是"backgroundColor"：
          

          var color = this._colors[Math.min(Math.max(0, this._index), this._colors.length - 1)];
          
          this._obj.style[this.CssColor] = "rgb(" + color[0] + "," + color[1] + "," + color[2] + ")";
          

           
          

          

          由于顏色集合是根據開始顏色、結束顏色和步數生成的，所以如果要修改這些屬性必須重新生成過集合。
          
Reset程序就是用來修改這些屬性并重新生成集合的，集合重新生成后索引也要設回0：
          

          Code
          

           
          


          
使用技巧
          

          在顏色漸變菜單中，并沒有使用鏈接標簽a，原因是a的偽類的顏色并不能直接用js來修改（除非改class）。
          
暫時沒想到很好的方法，只好用onclick跳轉代替了。
          

          在測試過程中還發現一個關于數組的問題，在ie和ff運行alert([,,].length)會分別顯示3和2。
          
最后一個元素不寫的話ff就會忽略這個元素，只要寫的話就不會忽略即使是undefined和null，看了下文檔也找到原因。
          
所以這個情況還是插一個東西進去，覺得不好看就new Array好了。
          

          測試中還發現chrome(1.0.154.48)的map一個問題，map是js1.6的Array的方法，ff和chrome都支持（具體看這里）。
          
在ff中[,,1].map(function(){return 0})返回的是[0,0,0]，但chrome卻返回[,,0]。
          
即在chrome中如果元素是空(不包括null和undefined)的話就一律返回空，用new Array來創建也一樣。
          
感覺這樣不太合理，應該以后會改進吧。
          

           
          

          使用說明
          

          ColorGrads只有3個屬性設置：
          
StartColor: "#fff",//開始顏色
          
EndColor: "#000",//結束顏色
          
Step:  20//漸變級數
          
設置好屬性后用Create生成集合就行了。
          

          ColorTrans只要一個參數，要實現漸變的對象，可設置以下屬性：
          
StartColor: "",//開始顏色
          
EndColor: "#000",//結束顏色
          
Step:  20,//漸變級數
          
Speed:  20,//漸變速度
          
CssColor: "color"http://設置屬性（Scripting屬性）
          
如果不設置StartColor會自動使用CurrentStyle獲取的樣式值。
          
其中StartColor、EndColor和Step在實例化后要重新設置的話需要用Reset來設置。
          

          具體使用請參考實例。
          

           
          

          程序代碼
          

          ColorGrads部分：
          

          Code
          

           
          

           ColorTrans部分：
          


          
var ColorTrans = function(obj, options){
          
    
          
              this._obj = $(obj);
          
              this._timer = null;//定時器
          
              this._index = 0;//索引
          
              this._colors = [];//顏色集合
          
              this._grads = new ColorGrads();
          
    
          
              this.SetOptions(options);
          
    
          
              this.Speed = Math.abs(this.options.Speed);
          
              this.CssColor = this.options.CssColor;
          
    
          
              this._startColor = this.options.StartColor || CurrentStyle(this._obj)[this.CssColor];
          
              this._endColor = this.options.EndColor;
          
              this._step = Math.abs(this.options.Step);
          
    
          
              this.Reset();
          
              this.SetColor();
          
};
          
ColorTrans.prototype           = {
          
            //設置默認屬性
          
            SetOptions: function(options) {
          
              this.options = {//默認值
          
                  StartColor:    "",//開始顏色
          
                  EndColor:    "#000",//結束顏色
          
                  Step:        20,//漸變級數
          
                  Speed:        20,//漸變速度
          
                  CssColor:    "color"//設置屬性（Scripting屬性）
          
              };
          
    Extend(          this.options, options || {});
          
  },
          
            //重設顏色集合
          
            Reset: function(color) {
          
              //修改顏色后必須重新獲取顏色集合
          
              color = Extend({ StartColor: this._startColor, EndColor: this._endColor, Step: this._step }, color || {});
          
              //設置屬性
          
              this._grads.StartColor = this._startColor = color.StartColor;
          
              this._grads.EndColor = this._endColor = color.EndColor;
          
              this._grads.Step = this._step = color.Step;
          
              //獲取顏色集合
          
              this._colors = this._grads.Create();
          
              this._index = 0;
          
  },
          
            //顏色漸入
          
            FadeIn: function() {
          
              this.Stop(); this._index++; this.SetColor();
          
              if(this._index < this._colors.length - 1){
          
                  this._timer = setTimeout(Bind(this, this.FadeIn), this.Speed);
          
    }
          
  },
          
            //顏色漸出
          
            FadeOut: function() {
          
              this.Stop(); this._index--; this.SetColor();
          
              if(this._index > 0){
          
                  this._timer = setTimeout(Bind(this, this.FadeOut), this.Speed);
          
    }
          
  },
          
            //顏色設置
          
            SetColor: function() {
          
              var color = this._colors[Math.min(Math.max(0, this._index), this._colors.length - 1)];
          
              this._obj.style[this.CssColor] = "rgb(" + color[0] + "," + color[1] + "," + color[2] + ")";
          
  },
          
            //停止
          
            Stop: function() {
          
    clearTimeout(          this._timer);
          
  }
          
};
          

           
          

          下載完整實例
          

          轉載請注明出處：http://www.cnblogs.com/cloudgamer/ 
          




	
	
	
          
		posted on 2009-09-14 10:19 小菜毛毛 閱讀(542) 評論(0)  編輯  收藏  所屬分類: HTML+div+css實踐 
	
          








          
	    
    




          








          

				

          

          




    







        
	




主站蜘蛛池模板：
徐水县|
基隆市|
蕲春县|
塔河县|
康乐县|
金昌市|
怀来县|
平凉市|
陇川县|
环江|
舟山市|
商洛市|
清水县|
漾濞|
彩票|
宝应县|
江都市|
永济市|
凤冈县|
石泉县|
区。|
寿阳县|
宁夏|
扬州市|
女性|
洛浦县|
雅江县|
达拉特旗|
阿荣旗|
宜川县|
湖南省|
竹北市|
泸水县|
玛多县|
龙江县|
马关县|
秀山|
海宁市|
寿光市|
方城县|
定西市|


          <del id="iuacw"></del>
        1. <strike id="iuacw"></strike>
          <strike id="iuacw"></strike>
          <strike id="iuacw"><rt id="iuacw"></rt></strike>
          <del id="iuacw"><sup id="iuacw"></sup></del>