株式会社skalのスタッフブログです

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
jQueryを使った画像ギャラリーを作ってみました!

前に春夏秋冬アイコンを作ったので~

同じく春夏秋冬ギャラリーです。

20100708.jpg

アイコンをクリックすると対応した写真が表示され(タブパネルみたいになってます。)

写真をクリックすると写真が大きく表示されます。

このギャラリーは何かと使えそうな気がします。

サンプルページ

参考にさせて頂いているサイト

http://ascii.jp/elem/000/000/438/438206/

http://gihyo.jp/design/serial/01/jquery-site-production

http://semooh.jp/jquery/

skal (スコール)
スポンサーサイト

jQueryを使ってみる!

Webデザイナーにもとっつきやすい、

CSSのセレクターに近い記述方法、

シンプルで軽快、将来有望などなど

評判がとてもいいJavaScriptライブラリjQueryを使ってサンプルを作ってみました!
Flashのこの先がとても心配になってきたので、なので…

今回は初歩的な、春夏秋冬説明アコーディオンパネルを作ってみました。

0626.jpg

矢印のアイコンをクリックするとパネルが出てきて、

$(".up,.down").click(function(){
$("div#menu_list").slideToggle("slow");
$(".up").toggle(); $(".down").toggle();
return false;
});

でてきた春、夏、秋、冬、アイコンにマウスオーバーすると説明を表示させます。

$("#icon1").mouseover(function(){
            $("#skal_blog_content_haru:not(:animated)").fadeIn(); }) ;
$("#icon1").mouseout(function(){
         $("#skal_blog_content_haru").hide("slow"); });

jQuery比較的簡単ということらしいのですが……

もっと勉強してあざやかーーなスクリプトを組めるようになりたいです。

また何か出来たら公開したいと思います。

サンプルページ

参考にさせて頂いているサイト

http://ascii. jp/elem/000/000/438/438206/

http://gihyo.jp/design/serial/01/jquery-site-production

http://semooh.jp/jquery/


skal (スコール)

 | HOME | 

Calendar

« | 2017-09 | »
S M T W T F S
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

Recent Comments

Appendix

skalDesign

skalDesign

skal_design
スコールデザインです。

グラフィックデザインやウェブデザインのことなどいろいろと更新していければな…と考えています。

営業時間のご案内
[月~金] 9:30~18:30

電話番号
052-861-1070

住所
〒467-0037
名古屋市瑞穂区弥富町上山157-1 107号

FC2Ad

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