Javascript は色のグラデーション変更とグラデーション効果を実装します code

Javascript は色のグラデーション変更とグラデーション効果を実装します code_javascript スキル

WBOY

リリース： 2016-05-16 17:33:10

オリジナル

1055 人が閲覧しました

このサイトのナビゲーションバーを何とかしたいです。そこで、jsを使用してナビゲーションバーの色のグラデーションを変更することにしました。
最初は不透明度属性(透明度)を使って色のグラデーションを変えようと思いました。ただし、問題があります。
各ナビゲーションラベルは [li] を使用します。マウスがラベル上に移動すると、[li] の className が onmouseover() によって即座に変更され、setInterval() を使用してその不透明度が 0 から 1 に変更されます。 , マウスが離れると[li]タグの色を元に戻すのが面倒な気がします。したがって、私はすぐにこのアプローチを放棄し、考えを変えました。

Baidu で検索すると、http://www.cnblogs.com/cloudgamer/archive/
2009/03/11/color.html で良い記事を見つけました。その後、簡略化が行われ、解決策が見つかりました。

まず、「#FFFFFF」や「#CCCCCC」などの 2 つの色の値を渡し、一方を開始色、もう一方を終了色にすることをお勧めします。処理により、2つの色が変化したときにさまざまな色の文字列が得られ、文字列の数、つまり取得頻度を調整することができます。配列変数に戻ります。コードは次のとおりです:

コードをコピーコードは次のとおりです:

 
/* *
* @Desc このファイルはカラーグラデーションを変更するためのライブラリです - colorGrad.js 
* @Author GenialX 
* @Date 2013.05.30 
* @QQ 2252065614 
* @URL http: / /www.ihuxu.com 
*/ 

/**
* 色を変更するエントリ関数
* beginColor/endColor は両方とも #FFFFFF の形の 16 進文字列で、rate はグラデーションの速度です。
* @return colorArray # の形の文字の配列FFFFFF 文字列配列
* 呼び出し形式 changeColor("#FFFFFF","#000000",100);*/ 
function getColorArray(bColor,eColor,r){ 
//トランジションのカラー値。 #FFFFFF 
 var curColor = new Object(); 
var endColor = new Object(); 
var rate = new Object(); /各 RGB の成長方向を取得します。 true は増加を表し、false は減少を表します。 
var isTrue = new Object(); 
var colorArray = new Array(); //配列の添字 

beginColor = getRGB (bColor);//ogj タイプに変更
endColor = getRGB(eColor);//ogj タイプに変更
curColor = getRGB(bColor) 
rate = getRate(beginColor,endColor,r); 
isTrue = getIsTrue(beginColor,endColor) 