Memo > mootools > デモをパクる (Fxpack.js)

そのまま使える感じにようにパクったつもりですが、もちろんmootools.jsを読み込んでいるのが条件です。
ただ注意が必要で、今回のデモですが「subversion(svn)版しか対応していない」っぽいです。mootoolsの右側のメニューの「svn」をクリックするとダウンロードできます。ちなみにリンクは（ココ : download svn）

スクロール

このデモは特定のdivの内容(ここではじゅげむ)を「Fx.Scroll」を使ってスクロールします。以下の「下にスクロール」をクリックすると、内容が下がっていきます。逆に「上にスクロール」で上に。カスタムスクロールはスクロールの移動する幅を引数に与えて自ら「50px」移動するように指定しています。

下にスクロール上にスクロールカスタムスクロール

寿限無、寿限無、五劫のすりきれ、海砂利水魚の水行末、雲来末、風来末、食う寝るところに住むところ、やぶらこうじのぶらこうじ、パイポパイポ、パイポのシューリンガン、シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナの長久命の長助。寿限無、寿限無、五劫のすりきれ、海砂利水魚の水行末、雲来末、風来末、食う寝るところに住むところ、やぶらこうじのぶらこうじ、パイポパイポ、パイポのシューリンガン、シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナの長久命の長助。

html code

<a id="demo1run1" href="javascript:void(0)">下にスクロール</a>
<a id="demo1run2" href="javascript:void(0)">上にスクロール</a>
<a id="demo1run3" href="javascript:void(0)">カスタムスクロール</a>
<div id="demo1" style="background: #EEEEEE; color: #111; width: 200px; padding: 10px; height: 100px; overflow: hidden;">
寿限無、寿限無、五劫のすりきれ、海砂利水魚の水行末、雲来末、風来末、食う寝るところに住むところ、やぶらこうじのぶらこうじ、パイポパイポ、パイポのシューリンガン、シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナの長久命の長助。寿限無、寿限無、五劫のすりきれ、海砂利水魚の水行末、雲来末、風来末、食う寝るところに住むところ、やぶらこうじのぶらこうじ、パイポパイポ、パイポのシューリンガン、シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナの長久命の長助。
</div>

javascript code

download: http://jigen.aruko.net/_ext/post/354/01.js

var demo1effect = new Fx.Scroll(‘demo1‘);
$(‘demo1run1‘).addEvent(‘click‘, function(){
demo1effect.down();
});
$(‘demo1run2‘).addEvent(‘click‘, function(){
demo1effect.up();
});
$(‘demo1run3‘).addEvent(‘click‘, function(){
demo1effect.custom(0, 50);
});
});

スライド

指定Div要素を上下、左右にスライドさせて其々高さと幅を変更します。「スライド上/下」をクリックすると高さが変更されて上下に現れたり、隠れたりします。「スライド左/右」も同様に左右の幅が変更されて現れたり、隠れたりします。

スライド上/下スライド左/右

寿限無、寿限無、五劫のすりきれ、海砂利水魚の水行末、雲来末、風来末、食う寝るところに住むところ、やぶらこうじのぶらこうじ、パイポパイポ、パイポのシューリンガン、シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナの長久命の長助。

html code

<a id="demo2run1" href="javascript:void(0)">スライド上/下</a>
<a id="demo2run2" href="javascript:void(0)">スライド左/右</a>
<div id="demo2" style="background: #EEEEEE; color: #111; width: 200px; padding: 10px;">
寿限無、寿限無、五劫のすりきれ、海砂利水魚の水行末、雲来末、風来末、食う寝るところに住むところ、やぶらこうじのぶらこうじ、パイポパイポ、パイポのシューリンガン、シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナの長久命の長助。
</div>

javascript code

download: http://jigen.aruko.net/_ext/post/354/02.js

var demo2effect = new Fx.Slide(‘demo2‘);
$(‘demo2run1‘).addEvent(‘click‘, function(){
demo2effect.toggle(‘vertical‘);
});
$(‘demo2run2‘).addEvent(‘click‘, function(){
demo2effect.toggle(‘horizontal‘);
});

Ｄｉｖ内の色を変更

背景色や文字色を変更してみます。単純に変えるのはStyles等で変更できるので「ジワー」っとです。

html code

<div id="demo3" style="background: #EEEEEE; color: #111; padding: 10px;">
寿限無、寿限無、五劫のすりきれ、海砂利水魚の水行末、雲来末、風来末、食う寝るところに住むところ、やぶらこうじのぶらこうじ、パイポパイポ、パイポのシューリンガン、シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナの長久命の長助。
</div>

javascript code

download: http://jigen.aruko.net/_ext/post/354/03.js

var demo3effect = new Fx.Color(‘demo3‘, ‘background-color‘);
var demo3effect2 = new Fx.Color(‘demo3‘, ‘color‘);
$(‘demo3run1‘).addEvent(‘click‘, function(){
demo3effect.toColor(‘#ff3300‘);
});
$(‘demo3run2‘).addEvent(‘click‘, function(){
demo3effect.fromColor(‘#60b6ed‘);
});
$(‘demo3run3‘).addEvent(‘click‘, function(){
demo3effect.custom(‘#5cd31b‘, ‘#1b7ad3‘);
});
$(‘demo3run4‘).addEvent(‘click‘, function(){
demo3effect2.toColor(‘#fff‘);
});
$(‘demo3run5‘).addEvent(‘click‘, function(){
demo3effect2.toColor(‘#111‘);
});