この記事の例では、JS を使用して色を変更するためのマウスのフェードインとフェードアウトを感知するテキスト リンクを実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。
<頭>
JS は、色を変えるためにマウスのフェードインとフェードアウトを感知するテキスト リンクを実装します
<スクリプト言語="javascript" タイプ="text/javascript">
startColor = "#671700" // リンクの色を定義します
;
endColor = "#D8D1C5" // 最後までグラデーションする色を定義します
;
ステップイン = 17;
ステップアウト = 23;
/*
すべてのテキスト リンクを自動的にグラデーションにするかどうかを定義します。true は「はい」を意味し、false は「いいえ」を意味します
*/
自動フェード = true
/*
ここで CSS スタイルのクラスを定義します: fade。これが true の場合、このフェード スタイルをリンクに追加してグラデーションにする必要があります
*/
ずさんなクラス = false
hexa = new makearray(16);
for(var i = 0; i
hexa[i] = i;
ヘキサ[10]="a"; ヘキサ[11]="b";
ヘキサ[13] = "d"; ヘキサ[14] = "e";
document.onmouseover = domouseover;
document.onmouseout = domouseout;
startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());
var fadeId = new Array();
関数 dehexize(Color){
var colorArr = 新しい makearray(3);
for (i=1; i
for (j=0; j
If (Color.charAt(i) == hexa[j]){
If (i%2 !=0)
colorArr[Math.floor((i-1)/2)]=eval(j)*16;
それ以外
colorArr[Math.floor((i-1)/2)] =eval(j);
}
}
}
colorArr を返します;
}
関数 domouseover() {
if(document.all){
var srcElement = イベント.srcElement;
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
fade(startColor,endColor,srcElement.uniqueID,stepIn);
}
}
関数 domouseout() {
if (document.all){
var srcElement = イベント.srcElement;
If ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
fade(endColor,startColor,srcElement.uniqueID,stepOut);
}
}
関数 makearray(n) {
This.length = n;
for(var i = 1; i
This[i] = 0;
これを返してください;
}
関数 hex(i) {
If (i
return "00";
else if (i > 255)
return "ff";
それ以外
return "" hexa[Math.floor(i/16)] hexa[i ];}
function setColor(r, g, b, element) {
var hr = hex(r); var hg = hex(g);
element.style.color = "#" hr hg hb;
}
関数 fade(s,e, element,step){
var sr = s[0]; var sg = s[1];
var er = e[0] var eg = e[1];
if (fadeId[0] != null && fade[0] != 要素){
setColor(sr,sg,sb,eval(fadeId[0]));
var i = 1;
while(i < fadeId.length){
clearTimeout(fadeId[i]);
私;
}
}
for(var i = 0; i <= step; i ) {
fadeId[i 1] = setTimeout("setColor(Math.floor(" sr " *(( " step " - " i " )/ " step " ) " er " * (" i "/"
ステップ ")),Math.floor(" sg " * (( " ステップ " - " i " )/ " ステップ " ) " 例 " * (" i "/" ステップ
")),Math.floor(" sb " * ((" ステップ "-" i ")/" ステップ ") " eb " * (" i "/" ステップ "))," 要素 ");",i *ステップ);
}
fadeId[0] = 要素;
}
このテキスト リンクにマウスを置くと、プレビュー効果が表示されます
