レイヤー内のコンテンツをスクロールさせる
2006/06/30 22:31:50
スポンサード リンク
ソースは以下の通り。
<div id="sample_container" style="overflow: scroll; height: 300px; width: 400px;">
<div id="sample_content">
<img alt="collage1.jpg" src="http://blog.fkoji.com/blogimg/collage1.jpg" width="1024" height="768" />
</div>
</div>
<input type="button" value="UP" onClick="document.getElementById("sample_container").scrollTop -= 60;" />
<input type="button" value="DOWN" onClick="document.getElementById("sample_container").scrollTop += 60;" />
<input type="button" value="LEFT" onClick="document.getElementById("sample_container").scrollLeft -= 60;" />
<input type="button" value="RIGHT" onClick="document.getElementById("sample_container").scrollLeft += 60;" />
<div id="sample_content">
<img alt="collage1.jpg" src="http://blog.fkoji.com/blogimg/collage1.jpg" width="1024" height="768" />
</div>
</div>
<input type="button" value="UP" onClick="document.getElementById("sample_container").scrollTop -= 60;" />
<input type="button" value="DOWN" onClick="document.getElementById("sample_container").scrollTop += 60;" />
<input type="button" value="LEFT" onClick="document.getElementById("sample_container").scrollLeft -= 60;" />
<input type="button" value="RIGHT" onClick="document.getElementById("sample_container").scrollLeft += 60;" />
【あわせて読みたい】
- livedoor ReaderでのOPMLインポート後画面の“チェックボックス操作”を再現するJavaScriptサンプル [2007-03-29]
- チェックボックスをマウスでなめるようにドラッグするだけで切り替えるJavaScriptのサンプル [2007-03-28]
- googlemashups.comのサブドメインでマッシュアップを公開できる「Google Mashup Editor」 [2007-06-26]
- Google AJAX Feed API でブログの人気エントリーを表示するサンプル [2007-04-19]
- 話題のショッピング [2006-10-27]
前のエントリー: « そろそろlivedoor Readerに移行したいけど
次のエントリー: 達人の仕事術的プロフィール »
トラックバック
このエントリーのトラックバックURL:
この一覧は、次のエントリーを参照しています: レイヤー内のコンテンツをスクロールさせる:
» ［メモ］overflow:scroll; from corns blog
［CSSのTips忘れないうちにメモ］ overflow:の値にscrollを指... [詳しくはこちら]
このブログをRSSリーダーで簡単購読
タイトル:
URL:
リンク用HTMLタグ:
powered by Google Chart API
