當前位置:蘿卜系統下載站 > 技術開發教程 > 詳細頁面

運用JS代碼完成文本鏈接的漸變效果

運用JS代碼完成文本鏈接的漸變效果

更新時間:2023-06-21 文章作者:未知 信息來源:網絡 閱讀次數:

編程(Programming)是編定程序的中文簡稱,就是讓計算機代碼解決某個問題,對某個計算體系規定一定的運算方式,使計算體系按照該計算方式運行,并最終得到相應結果的過程。為了使計算機能夠理解(understand)人的意圖,人類就必須將需解決的問題的思路、方法和手段通過計算機能夠理解的形式告訴計算機,使得計算機能夠根據人的指令一步一步去工作,完成某種特定的任務。這種人和計算體系之間交流的過程就是編程。

【實例名稱】

文本鏈接的漸變效果

【實例描述】

漸變效果屬于頁面的特效.可以通過一些鏈接或圖像的漸變.增強用戶的視覺體驗。本例學習如何實現文本鏈接的漸變。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>無標題頁-本站(www.xue51.com)</title> <script language="javascript"> //內部變量 startColor = "#671700"; // 定義鏈接顏色 endColor = "#D8D1C5";   // 定義要漸變到最后的顏色 stepIn = 17; stepOut = 23; autoFade = true;       //定義是否讓所有的文本鏈接自動漸變 sloppyClass = false;   //特殊樣式 hexa = new makearray(16); for(var i = 0; i < 10; i++)     hexa[i] = i; hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; //定義窗體事件 document.onmouseover = domouseover; document.onmouseout = domouseout; //初始設置 startColor = dehexize(startColor.toLowerCase()); endColor = dehexize(endColor.toLowerCase()); var fadeId = new Array();

function dehexize(Color) {  var colorArr = new makearray(3);  for (i=1; i<7; i++){   for (j=0; j<16; j++){    if (Color.charAt(i) == hexa[j]){     if (i%2 !=0)      colorArr[Math.floor((i-1)/2)]=eval(j)*16;     else      colorArr[Math.floor((i-1)/2)]+=eval(j);    }   }  }  return colorArr; } //鼠標移動到鏈接時的顏色變換 function domouseover() {   if(document.all){    var srcElement = event.srcElement;    if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))         fade(startColor,endColor,srcElement.uniqueID,stepIn);         } } //鼠標移走時的顏色變換 function domouseout() {   if (document.all){    var srcElement = event.srcElement;     if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) fade(endColor,startColor,srcElement.uniqueID,stepOut);     } } function makearray(n) //定義數組 {     this.length = n;     for(var i = 1; i <= n; i++)         this[i] = 0;     return this; } //考慮到顏色的16進制表示方法,實現轉換 function hex(i) {     if (i < 0)         return "00";     else if (i > 255)         return "ff";     else        return "" + hexa[Math.floor(i/16)] + hexa[i%16]; } //定義顏色的方法 function setColor(r, g, b, element) {       var hr = hex(r); var hg = hex(g); var hb = hex(b);       element.style.color = "#"+hr+hg+hb; } //實現顏色漸變的關鍵方法 function fade(s,e, element,step) {  var sr = s[0]; var sg = s[1]; var sb = s[2];  var er = e[0]; var eg = e[1]; var eb = e[2];    if (fadeId[0] != null && fade[0] != element){   setColor(sr,sg,sb,eval(fadeId[0]));   var i = 1;   while(i < fadeId.length){    clearTimeout(fadeId[i]);    i++;    }   }     for(var i = 0; i <= step; i++) {      fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +    step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+    ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);   }  fadeId[0] = element; } </script> </head> <body>

需要在body中添加一個文本鏈接,代碼如下所示: <a href="http://www.google.com">最可愛的文本鏈接</a>

<br />        <p>         調試其他進程的能力賦予您極廣泛的權力,這是無法通過其他途經獲得的,在進行遠程調試時更是如此。惡意的調試器可能對正在調試的計算機造成大范圍的損害。因此,對可能進行調試的人要有所限制。有關更多信息,請參見<a            >遠程調試權限</a>。</p>     <p>         但是,許多開發人員沒有意識到安全威脅也可以從相反的方向產生。調試對象進程中的惡意代碼可能危害調試計算機的安全:有許多必須防范的不道德的安全利用。</p>     <h1 >         安全性最佳做法</h1>   </body> </html>

【運行效果】

運行效果

【難點剖析】

本例的重點有3處:判斷頁面中的鏈接、定時變換顏色和顏色RGB的隨機值。本例只對鏈接實現漸變,所以當鼠標移動時,需要判斷指定的元素是否是鏈接,這通過“srcElement.tagName”=="A"”判斷。定時變換顏色是使用定時器結合代碼中提供的”setColor”方法實現。顏色RGB值的獲取非常關鍵,由于RGB是一個16進制的表示方法。所以代碼中還使用了Math對蟓,并利用“Math.floor”來獲取除法運算后的整數部分。

【源碼下載】

如果你不愿復制代碼及提高代碼準確性,你可以點擊:文本鏈接的漸變效果 進行本實例源碼下載 


使用編程語言寫的程序,由于每條指令都對應計算機一個特定的基本動作,所以程序占用內存少、執行效率高。

溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統下載排行

網站地圖xml | 網站地圖html
亚洲嫩草影院久久精品