javascriptで横スクロールさせる方法
Ajaxつかった横スクロールのサイトをつくりたいなーって思って色々探ってたらPerezColomerさんのサイトで使われてるjavascriptが役に立ったのでメモ。
以下のソースを<head></head>内にいれるだけでちょー簡単。マウスホイールで横スクロールだけコロコロできるようになります。
<script>
function handle(delta) {
if (delta < 0) window.scrollBy(50,0); else window.scrollBy(-50,0);}
function wheel(event){ var delta = 0; if (!event) event = window.event; if (event.wheelDelta) { delta = event.wheelDelta/120; if (window.opera) delta = -delta; } else if (event.detail) { delta = -event.detail/3; } if (delta) handle(delta); if (event.preventDefault) event.preventDefault(); event.returnValue = false; }
/* Initialization code. */
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false); window.onmousewheel = document.onmousewheel = wheel;
</script>
以下のソースを<head></head>内にいれるだけでちょー簡単。マウスホイールで横スクロールだけコロコロできるようになります。
<script>
function handle(delta) {
if (delta < 0) window.scrollBy(50,0); else window.scrollBy(-50,0);}
function wheel(event){ var delta = 0; if (!event) event = window.event; if (event.wheelDelta) { delta = event.wheelDelta/120; if (window.opera) delta = -delta; } else if (event.detail) { delta = -event.detail/3; } if (delta) handle(delta); if (event.preventDefault) event.preventDefault(); event.returnValue = false; }
/* Initialization code. */
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false); window.onmousewheel = document.onmousewheel = wheel;
</script>
Ajaxフレームワーク 『Spry』 を試してみる。
今更だけど、ぼちぼち。今回はDreamweaver CS3に入ってる”Spryアコーディオン”機能を使用したいと思います。
�／卦�htmlファイルを作成し、挿入→Spry→Spryのアコーディオンでタグを挿入する。
��cssファイルとjavascriptが外部に自動生成されたことを確認。
��cssとhtmlファイルをカスタムして見栄えを整える。
��javascriptをカスタムして動きなどを整える。
と、こんな感じでさくっと完了。(CS3スゲー・・・いや、Spryスゲー)
試しに作ってみたサンプル→・test
：：追記
同じ要領でSpryの伸縮可能パネルも。
作ったサンプル→・test2
：：追記2
同じ要領でSpryのタブ付きパネルも。
作ったサンプル→・test3
�／卦�htmlファイルを作成し、挿入→Spry→Spryのアコーディオンでタグを挿入する。
��cssファイルとjavascriptが外部に自動生成されたことを確認。
��cssとhtmlファイルをカスタムして見栄えを整える。
��javascriptをカスタムして動きなどを整える。
と、こんな感じでさくっと完了。(CS3スゲー・・・いや、Spryスゲー)
試しに作ってみたサンプル→・test
：：追記
同じ要領でSpryの伸縮可能パネルも。
作ったサンプル→・test2
：：追記2
同じ要領でSpryのタブ付きパネルも。
作ったサンプル→・test3
JSライブラリ（shadowbox）を試してみる。
このshadowboxは複数の形式に対応した、スライドショーJS。画像の他にFlashやFLV、MediaPlayer、htmlなど普段使用する形式を殆どカバーしていたので早速siteに導入してみました。
【準備】
�，泙困�Shadowbox.js一式をダウンロード。
�▲瀬Ε鵐蹇璽匹靴織侫．ぅ襪魄貅阿鬟▲奪廛蹇璽鼻�(必要なさそうなものは削除)
��xhtml内のheadの中に以下のソースを貼り付ける。
<script type="text/javascript"><!--
new wrapScroll("myMenu", "wrap", "static");<!--(01)-->
// --></script>
<script type="text/javascript" src="doc/demo.js"></script>
<script type="text/javascript" src="src/adapter/shadowbox-base.js"></script>
<script type="text/javascript" src="src/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.loadSkin('classic', 'src/skin');
Shadowbox.loadLanguage('en', 'src/lang');
Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], 'src/player');
window.onload = function(){
Shadowbox.init();
initDemos();
};
</script>
【使用例】
■画像やhtmlファイルを表示させる場合→ <a rel="shadowbox" href="test.html"></a>
■swfファイルを表示させる場合→ <a rel="shadowbox;width=400;height=400" href="test.swf"></a>
どんな形式だろうが<a>タグにちょろっと記述するだけで表示できるのでらくちんですね。
ただ表示が不安定な時があったりswfの作りによっては表示されない場合があるのでその辺りはちょい検証が必要のようです。
【準備】
�，泙困�Shadowbox.js一式をダウンロード。
�▲瀬Ε鵐蹇璽匹靴織侫．ぅ襪魄貅阿鬟▲奪廛蹇璽鼻�(必要なさそうなものは削除)
��xhtml内のheadの中に以下のソースを貼り付ける。
<script type="text/javascript"><!--
new wrapScroll("myMenu", "wrap", "static");<!--(01)-->
// --></script>
<script type="text/javascript" src="doc/demo.js"></script>
<script type="text/javascript" src="src/adapter/shadowbox-base.js"></script>
<script type="text/javascript" src="src/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.loadSkin('classic', 'src/skin');
Shadowbox.loadLanguage('en', 'src/lang');
Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], 'src/player');
window.onload = function(){
Shadowbox.init();
initDemos();
};
</script>
【使用例】
■画像やhtmlファイルを表示させる場合→ <a rel="shadowbox" href="test.html"></a>
■swfファイルを表示させる場合→ <a rel="shadowbox;width=400;height=400" href="test.swf"></a>
どんな形式だろうが<a>タグにちょろっと記述するだけで表示できるのでらくちんですね。
ただ表示が不安定な時があったりswfの作りによっては表示されない場合があるのでその辺りはちょい検証が必要のようです。
/ 1 / 1 /