top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_754

Motion by jQuery:おぉ、これはやってみたい。jQueryを利用した魅力的な画像の拡大処理 ・・・ 【jQuery】

 2009-03-03
 ほんとに、jQuery ってポピュラーになってきましたね。
 いろいろなサンプルや利用例を見ることが出来ます。
 そんな中で、
 「おぉ、これは実現してみたい」
 というチュートリアルを見っけ。
 今後、
 ・世に紹介されているチュートリアル
  私なりに消化・試してみるコーナーを・・・

   またまた「新カテゴリ(コーナー)」ですが・・・
   (そんなに増やしてどうすんだよ)

 ここでは、
素晴らしいチュートリアル記事を紹介
 するだけでなく

 ・かいつまんだ要点整理も兼ね
 ・少し応用して内容を実践利用して

 リポートしてみることにします。

 まずは第一回目。
 次に紹介されている
 ・jQueryを利用した
  小粋な画像拡大の手法をやってみますね。

jQueryアニメ&エフェクト合わせ技で画像を拡大
 ( by ASCII.jp )
jQueryアニメ&エフェクト合わせ技で画像を拡大 こちらのチュートリアルで
 「お手本サイト」として
 紹介されているのが
 ・Contreforme
Contreforme
 リスト形式の表示から、
 画像をクリックすると
 小粋なアニメーションで
 画像が拡大
 詳細表記も現れます



 やってみよ、やってみよ。

  追記に ▼

FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ


more まずは、
 ■お手本サイトを見てみる
  ・Contreforme にアクセス
  ・リスト表示の画像をクリックすると
   おぉ、いいですねぇ。この動き

 すぐさま、実践
 (ASCII.jp)で教えてくれる通り進めてみる


 ■さて、どのように応用するか

  私は強度の活字好きなのだが、よくある「読後レポート」
 をやってみようかな。最初からそれが表示されていると
 見ている方が「鬱陶しい」かも。
  クリックで画像が拡大され、私の「読後レポート」が
 表示されるようにやってみるか。
  ついでに、Amazonのアフィリエイトも加えてみる



 ■クリックされて表示される部分を記述
  ※昨日読み終えた
   ・飯嶋 和一さんの「黄金旅風」について
    少し読後感を記述した

   ・この
    ・読後レポートおよび、Amazonへのリンク部分 を
     "info" という名前のクラス指定で
タグで用意


metaboy 読後感

 歴史ものが好きで、海に関するものが好きで、ハードな陰影に長けた作家が好きで、本屋で目に留まったのは3日前。通勤の電車やトイレ(失礼!)、寝る前の寸暇を利用して、一気に読み上げてしまった。面白い。江戸時代がその300年にわたる栄華を確定する初期において、「鎖国」に向かって流れる時代に乗って、「平蔵」という魅力ある男が、成長し活躍する様が小気味良く描かれており、至福の時間を得させていただいた。

 「長崎」という、時代を創り、時代に翻弄された街が、とても身近に感じられて、「海」に関わる男達の生き様にも刺激されて、単純に楽しい時間を過ごしたこと以上に、得たものがあったということだろう。

 作者「飯嶋和一」。歴史小説の巨人と称されると帯にあったけれど、恥ずかしながら初めて読ませていただいた。他の著作「神無き月十番目の夜」「始祖鳥記」など、タイトルに魅力あるものも多く、また、堪能させていただける作家に出会えて、嬉しい。


出版社/著者からの内容紹介(※引用転載

 あの『始祖鳥記』から三年。数々の賞を辞退し、文壇で知る人ぞ知る歴史小説の巨人が遂に新刊を出します。寛永年間、内外の脅威から海外貿易都市・長崎を守った史上最強の朱印船貿易家・末次平左衛門の迫力の生涯!

 お待たせしました! 飯嶋和一の新作です。あの『始祖鳥記』から3年。数々の賞を辞退し、文壇では知る人ぞ知る歴史小説の巨人が、遂に新刊を出します。今回は、飯嶋作品中最大の長編、原稿枚数一千枚超の大作です。久々の飯嶋ワールドをどうぞご堪能ください!

 いつの世も、希望は人に宿る―江戸寛永年間、海外貿易都市・長崎に2人の大馬鹿者が生まれた。その「金屋町の放蕩息子」「平戸町の悪童」と並び称された 2人の問題児こそ、後に史上最強の朱印船貿易家と呼ばれることになる末次平左衛門(二代目末次平蔵)とその親友、内町火消組惣頭・平尾才介である。卓越した外交政治感覚と骨太の正義感で内外の脅威から長崎を守護し、人々に希望を与え続けた傑物たちの、熱き奔流のような生涯!


    ・"info" という名前のクラスは
     レイアウト設定終えた後、display:none;
     隠しておく
.info {
display:none;
line-height:110%;
}
.infolink {
text-align:right;
font-size:90%;
}



 ■リスト全体のレイアウト指定
  ※上記の
を囲むように
   "listview" という名前のクラス指定で
タグで用意
   最初に表示される部分を記述
amazon.jpg
黄金旅風 - 飯嶋 和一 -

出版社: 小学館 (2004/03)

ISBN-10: 4093861323

ISBN-13: 978-4093861328

    ・"listview" という名前のクラスで
     レイアウト処理を行った後、今回のチュートリアルには
     記述はなかったが、
     ・画像にマスオーバーされたときに、指アイコンに
      なるように
     スタイルシートを設定する
.listview {
float:left;
width:560px;
margin:0px 0px 15px 0px;
padding:10px;
border:1px solid #999966;
font-size:90%;
line-height:110%;
}
.listview img{
margin-right:15px;
cursor:pointer;
}


 準備完了


 ■HTMLファイルにjQueryを組み込み



 ■チュートリアルで説明されている
  JavaScriptソースを記述
lt;!-- Hide from other Browsers
$(function(){
$(".info").fadeOut(0.1);
$(".listview img").toggle(function(){
$(this).animate({
width : 240},
500,null,
function(){
$(this).parent().find(".info").fadeIn(500);
});
},function(){
$(this).parent().find(".info").fadeOut(200,
function(){
$(this).parent().find("img").animate({
width : 75}, 200);
}
);
});
});
//-->


 ポイントは

 【toggle() メソッド
  ・マウスクリックのたびに、切替処理を行う
   $(".listview img").toggle(処理1,処理2);
   ってことだね。

 【animate() メソッド
  ・アニメーションが終了した時の画像サイズ
   を指定している
   ※今回の場合は、幅のみの指定で利用
  ・animate() メソッド の第2引数で
   ・アニメーションさせる速度 を指定
  ・第3引数は
   ・フェードインする処理
  というわけだ

 【fadeIn()/fadeOut() メソッド
  ・第1引数は
   フェードイン/アウト までの時間
   (単位:ミリ秒)

 (隠されている)詳細情報を
 同時に フェードイン/アウト させるために

 【find() メソッド
  ・指定された子の要素を検索
 【parent() メソッド
  ・1つ上の階層にあるタグ(親)を示す

 つまり、
 $(this).parent().find(".info").fadeIn(500);
 としてやることで、

 子の"info"クラスに指定している
 ・詳細情報 共々
 フェードイン処理 できるわけだ。

 なるほどねぇ。
(とりあえず) 完成
   >>> 読後紹介 - 読むmetaboy -

 楽しかったなぁ。
 ありがとうございました。
commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/754-857e8cb1
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

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