jQueryのCycleプラグインで遊んでみました。
まずソース
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://www.malsup.com/jquery/cycle/jquery.cycle.all.js"></script>
<style type="text/css"><!--
#devilman {
width: 272px; height: 352px;
padding:0; margin:0;
overflow: hidden;
}
#devilman img {
width: 240px; height: 320px;
padding: 15px;
border: 1px solid #ccc; background-color: #eee;
top:0; left:0
}
#devilman_serif {
width: 240px; padding: 15px;
border: 1px solid #ccc; background-color: #eee;
top:0; left:0;
margin-top:10px;
font-family: Verdana; font-size: 12px;
}
--></style>
<script type="text/javascript"><!--
$(document).ready(function(){
$('#devilman').cycle({
fx: 'scrollUp',
click: '#devilman img',
timeout: 0,
before: function(next, curr) {
$('#devilman_serif').html('<img src="http://www.ac.cyberhome.ne.jp/~mattn/images/ajax-loader.gif" alt="loading...">');
},
after: function(next, curr) {
curr.title = curr.alt.replace(/<[^>]*>/g,'');
$('#devilman_serif').html(curr.alt);
}
});
});
--></script>
</head>
<body>
<div id="devilman">
<img class="devilman_slide" src="http://farm2.static.flickr.com/1405/601557689_5d0a1304a8.jpg?v=0" width="240" height="320" alt="誰も知らない。<br />知られちゃいけない。<br />デビルマンが誰なのか。" />
<img class="devilman_slide" src="http://farm2.static.flickr.com/1146/601557811_0591344b9d.jpg?v=0" width="240" height="320" alt="何も言えない、話しちゃいけない。<br />デビルマンが誰なのか。<br />人の世に愛があり、<br />人の世に夢がある。<br />その美しい物を守りたいだけ。" />
<img class="devilman_slide" src="http://farm2.static.flickr.com/1398/601842094_322d292a58.jpg?v=0" width="240" height="320" alt="今日もどこかでデビルマン。<br />今日もどこかでデビルマン。" />
</div>
<div id="devilman_serif"></div>
</body>
</html>
画像を3枚使い、clickイベントにてスライドしています。beforeコールバックでajaxローディング画像を、afterコールバックで表示したimgのtitleをメッセージ表示用のdivにコピーしています。
jQueryならこんな簡単に出来ちゃうんすよね。で、ふと思った。jQueryってFLTKに似てる。もちろんFLTKのコールバックはaddEventListenerじゃないけど、なんか
$('#btn').click(function() {alert('ok!');});
で、コールバックが書ける所がカッコイイ。ちなみにFLTKでウィンドウとボタンを出すだけのアプリケーションならば、こんな感じ。
#include <stdio.h>
#include <fltk/run.h>
#include <fltk/Window.h>
#include <fltk/Button.h>
void button_cb(fltk::Widget *, void *) {
printf("clicked!\n");
}
int main(int argc, char* argv[]) {
fltk::Window *window = new fltk::Window(200, 200);
window->begin();
fltk::Button *button= new fltk::Button(20, 20, 160, 160, "click me");
button->callback(button_cb, 0);
window->end();
window->show(argc, argv);
return fltk::run();
}
ポインタ使わず書いたら、もっとそれっぽい。
#include <stdio.h>
#include <fltk/run.h>
#include <fltk/Window.h>
#include <fltk/Button.h>
void button_cb(fltk::Widget *, void *) {
printf("clicked!\n");
}
int main(int argc, char* argv[]) {
fltk::Window window(200, 200);
window.begin();
fltk::Button button(20, 20, 160, 160, "click me");
button.callback(button_cb, 0);
window.end();
window.show(argc, argv);
return fltk::run();
}
話を戻して、javascriptの実行結果は↓
