JavaScript + Ajax 実践サンプル集 (1530本以上) ◇編集して実行可能◇
jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...
»»jQueryテンプレート42選!
ホーム
jQuery
jQuery プラグイン
jQuery UI
人気順
カテゴリ
キーワード
クール
新着
ツリー
jQuery PDF
ホット
サイト情報
サイトマップ
★ 新着サンプルトップ50のRSSを購読する
◆ DHTMLサンプル(基礎)のRSSを購読する
◆ DHTMLサンプル(応用)のRSSを購読する
◆ AJAXサンプルのRSSを購読する
◆ その他サンプルのRSSを購読する
◆ BOM(Browser Object Model)のRSSを購読する
◆ DOM(Document Object Model)のRSSを購読する
jQueryのCodaSliderプラグインでブログロールを実装する
説明
補足説明
コード
関連書籍
コメント投稿
このサンプルは、jQueryのCodaSliderプラグインを利用してブログロール(Blogroll)を実装しています。 サンプルが表示されたらタブ(PSDTUTS,...)をクリックしてメニューアイテムを切り替えます。タブの他にブログロールの最下位に表示されている[Previous][Next]のボタンをクリックして切り替えることができます。
このサンプルを編集して試してみる
このサンプルのソースコードは、
ここ
からダウンロードしてください。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>A Better Blogroll</title> <link href="jQuery/codaSlider2/style.css" rel="stylesheet" type="text/css" /> <!--[if IE]> <link href="jQuery/codaSlider2/style-ie.css" rel="stylesheet" type="text/css" /> <![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="jQuery/codaSlider2/js/jquery-easing.1.2.js" type="text/javascript"></script> <script src="jQuery/codaSlider2/js/jquery-easing-compatibility.1.2.js" type="text/javascript"></script> <script src="jQuery/codaSlider2/js/coda-slider.1.1.1.js" type="text/javascript"></script> <script type='text/javascript'> $(function () { $("#blogSlider").codaSlider(); }); </script> </head> <body> <div id="blogSliderWrap"> <div id="blogSlider"> <div class="innerWrap"> <div class="panelContainer"> <div class="panel" title="PSDTUTS"> <div class="wrapper"> <ul id="psd-list"> <li><a href="#"> We're Changing Our Name - Meet Envato</a></li> <li><a href="#"> Create a Citrus Fruit Design From Scratch in Photoshop</a></li> <li><a href="#"> ThemeForest is Coming - Get Your Beta Invite</a></li> <li><a href="#"> Photo-Manipulating an Image Into a Realistic Night Scene</a></li> <li><a href="#"> Around the TUTS Sites - July</a></li> <li><a href="#"> Inspiration - Futuristic Graphic User Interface Design</a></li> <li><a href="#"> Best of the Web - July</a></li> <li><a href="#"> PSDTUTS First Tutorial Writing Contest Winners!</a></li> <li><a href="#"> New PLUS Tutorial - Creating Artwork For An Epic Metal Album</a></li> <li><a href="#"> PSDTUTS Photoshop Wiki Launch Contest!</a></li> </ul> </div> </div> <div class="panel" title="NETTUTS"> <div class="wrapper"> <ul id="net-list"> <li><a href="#"> Building a Better Blogroll: Dynamic Fun with SimplePie and jQuery</a></li> <li><a href="#"> 9 Web Developers That MUST Be Followed On Twitter</a></li> <li><a href="#"> We're Changing Our Name - Meet Envato</a></li> <li><a href="#"> Build a Newspaper Theme With WP_Query and the 960 CSS Framework</a></li> <li><a href="#"> How To Implement sIFR3 Into Your Website</a></li> <li><a href="#"> 250 Beta Invites to ThemeForest to Give Away</a></li> <li><a href="#"> Integrating and Customizing Lijit for Your Site</a></li> <li><a href="#"> Around the TUTS Sites - July</a></li> <li><a href="#"> The Weekend Quick Tip: Flex Your Images</a></li> <li><a href="#"> Create a Spectacular Photo Gallery with MooTools</a></li> </ul> </div> </div> <div class="panel" title="VECTORTUTS"> <div class="wrapper"> <ul id="vector-list"> <li><a href="#"> Create An Aperture Style Camera Lens Icon</a></li> <li><a href="#"> Turning a Photo into Lichtenstein Style Pop Art with Illustrator</a></li> <li><a href="#"> We're Changing Our Name - Meet Envato</a></li> <li><a href="#"> Create a Stylish Sports Car Dashboard With Areas of Detailed Realism</a></li> <li><a href="#"> Design Gift Boxes Using Illustrator's 3D Tools</a></li> <li><a href="#"> Create a Twitter Style Bird Mascot</a></li> <li><a href="#"> Around the TUTS Sites - July</a></li> <li><a href="#"> Best of the Web - July</a></li> <li><a href="#"> Create a 3D Push Pin and a Paper Note in Illustrator</a></li> <li><a href="#"> Making A TUTS Style Shield in Illustrator</a></li> </ul> </div> </div> <div class="panel" title="AUDIOTUTS"> <div class="wrapper"> <ul id="audio-list"> <li><a href="#"> How to Make an Insane "Plucky" Trance Lead</a></li> <li><a href="#"> We're Changing Our Name - Meet Envato</a></li> <li><a href="#"> 15 Totally Free Reverb Plug-ins That Rock</a></li> <li><a href="#"> How to Slice Audio into Tempo-Fitted Loops</a></li> <li><a href="#"> Around the TUTS Sites - July</a></li> <li><a href="#"> 3 Tips to Super-charge Your Production Efficiency</a></li> <li><a href="#"> Create a Stereo BPM-locked Delay Effect in Reason</a></li> <li><a href="#"> Make a Punchy Rock Drum Beat Using Reason's Redrum</a></li> <li><a href="#"> Create a Triggered Noise Gate Effect in Logic</a></li> <li><a href="#"> 36 Reason Tutorials, Refills, Applications and Communities</a></li> </ul> </div> </div> </div> </div> </div> <div id="push"></div> </div> </body> </html>
コメント・提案の投稿！
名前
メール
件名
本文
送信中です...
ASP.NET 3.5
|
Akio's Blog