|
|---|
課題を作る中で、javascriptを使って画像を切り替えて
フラッシュっぽく動きがあるようなのができないかなぁ
と思って調べてみました。
背景画像を切り替えるプラグインというのは見つかりましたが、背景に使う画像ファイルを切り替えているもののようでした。
背景を切り替えるんだったら、CSSスプライトを使った方がいいんじゃないかなということで、結局自作したほうがよさそうだという判断で考えてみました。
まずjQueryでcssの設定を行う方法は、例えばp要素の文字の色を変えたい場合
$("p").css("color", "red")
というように書くらしいので、これを参考にすればCSSの変更はできそうなのが分かりました。
次にタイマーのようなものがないか調べると
javascriptのsetIntervalというのを使うと、指定時間で繰り返し処理が行われるようなので
これを使えば何とかなりそうでした。
これらを使って作ったjQueryのpluginと、このpluginを呼び出し方は次のようになります。
// タイマーでCSSの背景位置を切り替える
$.fn.changeCSSspritePosition = function(targetID, potisionArray, timer) {
// 処理中の配列番号
var current_count = 0;
// 切り替え処理を行う
function ChangeCSSPotsition(node, array) {
$(node).css("background-position",array[current_count][0] + 'px ' + array[current_count][1] + 'px');
}
// 起動時に処理を開始する
$(function(){
// 対象ノードを取得
var node = $(targetID);
var tId = setInterval(function()
{
ChangeCSSPotsition(node, potisionArray);
current_count++;
// 配列数とカウント数が同じになったら処理終了
if (potisionArray.length == current_count) {
clearInterval(tId);
}
}, timer);
});
}
htmlの指定はこんな感じです。
<script type="text/javascript">
$(function () {
$("body").changeCSSspritePosition("#changelink",
[[0,-180],
[0,-360]]
, 1000 );
});
</script></p>
全部説明すると長くなるし、説明するほど詳しくないので引数の部分だけ説明します。
引数を変える必要があるのは
changeCSSspritePosition("#changelink",
[[0,-180],
[0,-360]]
, 1000 );の()の中の部分です。
#changelinkのところはセレクタを入れます。対象となる要素が特定できるようにします。
ここではchangelinkというidが設定してある要素が対象となります。
[[0,-180],[0,-360]]のところは、指定する背景の位置を2次元の配列で指定します。
1000のところは、画像の切り替えの時間でミリ秒単位で設定します。
単に画像を切り替えるものがほしかっただけなので大したものではないけど
手を加えればもっといろいろできそうです。
この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。
退職するのに完璧で、以前のブレットに来る人は誰ですか？
ファヴレ？より良い10人の俳優のリストへの戦略
クリスチャンベールよりもその役割に合っていました。お父さんさえも、1ヵ月か2ヵ月以上かけて盗みに耐えることはできません。
by Luther (2017-08-25 03:42)
このウェブサイトの管理者が働いているので、質の高い内容のため、すぐにはそれは有名になるでしょう。
by Luke (2017-09-05 12:50)
Howdy I am so glad I found your webpage, I really found you by error, while I was researching on Aol for something else,
Regardless I am here now and would just like to say many thanks for a incredible post and a all
round enjoyable blog (I also love the theme/design), I don’t have time to look over
it all at the moment but I have bookmarked it and also added your RSS feeds,
so when I have time I will be back to read much more, Please do keep up the superb b.
by Shelley (2017-09-10 11:26)
ハレイ！最後に私は実際に役立つ事実を得ることができるところからウェブページを得ました
私の研究と知識に関して。
by Nathan (2017-09-11 03:12)
良い情報。ラッキー私はあなたのウェブサイトを偶然（stumbleupon）訪れました。
私は後でそれを記した本を持っています！
by Rochelle (2017-09-11 03:52)
素晴らしい問題がここにあります。私はあなたのポストを見て非常にうれしいです。
おかげさまで、私はあなたに触れることを楽しみにしています。どうぞ
私に電子メールを落とす？
by Amanda (2017-09-11 05:13)
人は本質的に私が述べる著しい投稿をするのを助ける。
それが私のウェブページを頻繁に訪れたのは初めてのことです
今までですか？私はあなたがこれを実際に立てるために作った分析に驚いた。
素晴らしい仕事！
by Nora (2017-09-11 07:43)
こんにちは、私はあなたの記事のすべてを読むのが楽しいです。私はあなたをサポートするために少しコメントを書くのが好きです。
by Bettina (2017-09-11 10:33)
ハレイ！結局のところ私は実際に私の研究と知識に関する有用な事実を得ることができるところからウェブページを得ました。
by Caitlin (2017-11-05 04:13)
かなり！これは非常に素晴らしい記事でした。
この情報を提供していただきありがとうございます。
by Kam (2017-11-05 04:25)
ちょっと、そこ！これは私の最初のコメントですので、
すばらしい叫び声を出して、私が本当に読んで楽しむことを伝えてください
あなたの投稿。カバーする他のブログ/ウェブサイト/フォーラムを提案することはできますか
同じ主題ですか？ありがとう！
by Jonelle (2017-11-05 04:27)
うわー、それは奇妙だった。私はちょうど本当に長いコメントを書いたが、私が投稿をクリックした後、私のコメントは表示されなかった。
Grrrr...うーん、私はそれをもう一度書いているわけではない。とにかく、ちょうど言ってみたかった
すばらしいブログ！
by Alfie (2017-11-05 04:37)
私は本当にこの素晴らしい記事を共有しているこのウェブサイトの所有者に感謝しています。
この場所で。
by Roseann (2017-11-10 02:40)
あなたがあなたのサイトに入れた永続性と存在する詳細情報を賞賛してください。
それはしばらくの間、毎回ブログに出てくるのはいいことです
同じ古くからの再解体物。優れた読書！
私はあなたのサイトをブックマークして、自分のRSSフィードを私のサイトに追加しています
Googleアカウント。
by Monroe (2017-12-07 06:53)
ありがとう、私は最近、このテーマについての情報をしばらく検索しています。
私が今までに発見した最高のものです。しかし、結論はどうですか？ Are
あなたは供給に関して肯定的ですか？
by Dotty (2017-12-08 05:13)
こんにちは、私はこれが優れたサイトだと信じています。私はそれをつまずいた
;）私は好きなものとして救ったので、私はもう一度戻ってくるつもりです。
お金と自由が変わる最大の方法です。あなたは金持ちで他人を助け続けるかもしれません。
by Karine (2017-12-13 04:59)
あなたの情報がどこに届いているのかは分かりませんが、すばらしいトピックです。
私はもっと多くのことを学び、より多くのことを理解するのに少し時間を費やす必要がある。
私がこれを探していた素晴らしい情報をありがとう
私の使命のための情報。
by Terra (2017-12-29 00:53)
こんにちは！これはあなたのブログへの私の最初の訪問です！私たちはボランティアチームであり、同じニッチのコミュニティで新しいプロジェクトを開始しています。
あなたのブログは私たちに仕事に役立つ情報を提供しました。あなたは素晴らしい仕事をしています！
by Bradly (2018-01-17 07:34)
私が味わったのは、私が探していたものを発見したからです。
あなたは私の4日間の長い狩りを終えました！神はあなたの人を祝福します。良い一日を。
さようなら
by Alycia (2018-02-20 04:50)
こんにちは私はあなたのブログを見つけて本当に感謝しています
そうでなければ、私は今ここにいて、多くのことを言いたい
素晴らしい投稿とすべてのラウンドのスリリングなブログ（私もテーマ/デザインが大好き）のおかげで、
私は現時点でそれを閲覧する時間がありませんが、私はそれを保存してあなたのRSSフィードにも追加しました。
私はもっと多くを読むために戻ってきます、素晴らしい仕事を続けてください。
by Earle (2018-02-26 23:13)
優れた作品。あなたのサイトにこの種の情報を書き留めておいてください。
私は本当にそれに感銘を受けました。
こんにちは、あなたは素晴らしい仕事をしました。
私は確かにそれをdiggし、私の一部は私の友人にお勧めします。
私は彼らがこのウェブサイトから恩恵を受けると確信しています。
by Chase (2018-03-02 02:29)