ホームページ >ウェブフロントエンド >jsチュートリアル >Javascript は色のグラデーション変更とグラデーション効果を実装します code_javascript スキル

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

WBOY
WBOYオリジナル
2016-05-16 17:33:101077ブラウズ

このサイトのナビゲーションバーを何とかしたいです。そこで、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)

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。