スポンサーリンク

web制作

気分mootools:mooSlideを使ってみました1


サイト内検索
スポンサーリンク

サイトコンテンツ

スマホアプリ攻略記事特集

Android,iPhoneスマホゲームアプリの攻略記事です。
他にもたくさんアプリ攻略情報あり!他の Android,iPhoneゲームアプリ攻略情報を見る >>

セール中iPhoneアプリ情報

アプリレビュー

おすすめスマホゲーム・アプリ

おすすめiOS脱出ゲーム Cream room2
おすすめiOS脱出ゲーム Cream room
おすすめiOS脱出ゲーム  世界一簡単な脱出ゲーム
おすすめiOS脱出ゲーム  脱出ゲームStrange rooms Chapter 1
スポンサーリンク

更新日:

デモサイトmooSlide - ajax based slider - lightbox replacement - v3.2 revamp
デモサイトのToggle slider 1か Toggle slider 2をクリックすると効果がわかります。

わかったところだけメモ

・当然ながらデモサイトよりダウンロード「here」を押すとダウンロード開始
・ダウンロードしたファイルを読み込みます。「mootools12.js」と「mooSlide2-moo12.js」
・「mooSlide2-moo12.js」のよみこみ記述が</body>の直前に書いてあります。

スライド設定ソースです。
var px = new mooSlide2({ slideSpeed: 1700, fadeSpeed: 500, toggler:'toggle', content:'test', height:250, removeOnClick: true, opacity:'1', effects:Fx.Transitions.Bounce.easeOut, from:'top', loadExternal:'test.html' });
var p = new mooSlide2({ slideSpeed: 1100, fadeSpeed: 500, toggler:'toggle2', content:'test2', height:233, removeOnClick: true, opacity:'1', effects:Fx.Transitions.Bounce.easeOut , from:'bottom'});
p.run();
})
・var pxとvar p で効果を出すスライドの設定がされます。
p.run();の記述を消すとオンロード表示が消えます。
togglerはリンクID名
heightはスライド効果の表示高さ
contentが表示対称です。デモサイトでは上部のスライド領域を<div id="test">,下部のスライド領域を<div id="test2">で表示させています。
調べきれていないので、不十分ですがこんなもんです。

スポンサーリンク

-web制作

Copyright© LAGRANGE BLOG , 2018 All Rights Reserved.