googleで
カスタム検索
プロフィール

けろ&ひな

Author:けろ&ひな
大阪在住。
親ばか。
最近、転職したよ。でも、やってることは一緒なんだけどね。;-P

最近の記事
カテゴリー
月別アーカイブ
最近のコメント
最近のトラックバック
スポンサード リンク

スポンサーサイト--------(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[fc2][jQuery][プラグイン]背景色のグラデーション2011-06-14(Tue)

jQueryの勉強として、背景色グラデーションをタイル状に並べるプラグインを作ってみた。
ちなみに、ブログのタイトル部分のグラデーションアニメーションがそうです。

まず、グラデーションの計算方法がわからなかったので、以下のサイトでお勉強。
ソフゲート グラデーション配色の計算方法

なるほど、等比計算と等差計算があるようで
簡単そうな等比計算を使ってみました。

    /**
* グラデーション用の配色を取得(RGBの各色ごとに計算値を取得)
* @param sRGB グラデーションの開始色(R/G/BのHEX値)
* @param sRGB グラデーションの終了色(R/G/BのHEX値)
* @param p 色の比率(パーセント:最大100)
* @return グラデーション開始から終了までの比率に対応した色(16進文字列)
**/
gradient:function(sRGB, eRGB, p) {
// 計算のために10進変換を行う
var a = parseInt(sRGB,16);
var b = parseInt(eRGB,16);
// 等比計算でグラデーションの計算を行う。
var r = (b - a) * p / 100 + a;
var sr = Math.floor(r).toString(16);
if (sr.length == 1) {
sr = '0' + sr;
}
// return to hex string
return sr;
}


それから、アニメーションするためにsetTimeoutを使用。
timeoutでthisが変わってしまうので、$.fn.ckty2の中でthisを退避するようにしてます。
(こんなやり方でいいのか、、、?)
// plugin cktry2()の初期設定
$.fn.cktry2 || (function(){
$.fn.cktry2 = function() {
$.extend({
cktry2$this:this
});
return $(this).cktry2;
};
})();


あと、objectのディープコピーとobjectの配列化のためにメソッドを追加。
    /**
* オブジェクトの配列化
*/
toArray:function(object) {
var ret = [];
$.each(object, function() {
ret.push(this);
});
return ret;
},
    /**
* オブジェクトのディープコピー
*/
clone:function (object)
{
return $.extend({}, object);
},


で、あとはdivのappend時の位置計算とかが入ってます。
使い方は2つ。

一つは、アニメーション無しでグラデーション。
$(≪element≫).cktry2().colorTileGradient(≪縦方向のタイル数≫, ≪横のタイル数≫, ≪グラデーション開始色≫, ≪グラデーション終了色≫);
例)
$("#cakey2try2").cktry2().colorTileGradient(10, 1, "#AACCDD", "#110055");

もうひとつはアニメーション。
(このブログのタイトルみたいなの)
$(≪element≫").cktry2().colorTileGradientInterval(≪縦方向のタイル数≫, ≪横のタイル数≫, [{startColor:≪グラデーション開始色≫, endColor:≪グラデーション終了色≫},{startColor:≪グラデーション開始色≫, endColor:≪グラデーション終了色≫},...], ≪右・下からのグラデーション指定:"right bottom"≫, ≪アニメーションスピード≫);
例)
$("#cakey2try2").cktry2().colorTileGradientInterval(5, 10, [{startColor:"#AACCDD", endColor:"#110055"},{startColor:"#CCDDAA", endColor:"#005511"},{startColor:"#DDAACC", endColor:"#551100"}], null, 0);

みたいな感じです。

で、こんな感じに。
<script type="text/javascript" src="http://blog-imgs-45.fc2.com/c/a/k/cakey2/jquery-1-5-1-min.js"></script>
<script type="text/javascript" src="./cktry-base.js"></script>
<script type="text/javascript" src="./cktry1.js"></script>
<script type="text/javascript" src="./cktry2.js"></script>
<script>
$(document).ready(function(){
$("#cakey2try2").cktry2().colorTileGradient(1, 10, "#DDAACC", "#551100", "right")
.cktry2().colorTileGradientInterval(1, 10
, [{startColor:"#AACCDD", endColor:"#110055"},{startColor:"#CCDDAA", endColor:"#005511"},{startColor:"#DDAACC", endColor:"#551100"}], "right", 100);
});
</script>


使ってみるなら、下のjsを使ってみて。

http://blog-imgs-17.fc2.com/c/a/k/cakey2/cktry-base.js
http://blog-imgs-17.fc2.com/c/a/k/cakey2/cktry1.js
http://blog-imgs-17.fc2.com/c/a/k/cakey2/cktry2.js
関連記事

テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

管理者にだけ表示を許可する

コメント

工事中
RSSフィード
リンク

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。