★ 請讓圖隨風而逝吧！★
▲ Click
構思方向：
- 在 Div 內設一背景圖。
- 在 Div 內再加入一張圖。這樣就會有二張圖重疊。
- 利用互動程式，讓上面那張產生被風吹走的效果，下面的圖就跑出來了。
- 接在div下面再做一個div，裡面寫入click。
請複製下列jQuery程式碼到< body>之後：
<script
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery-animations-tile-master/external/jquery.animations.min.js"></script>
<script
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery-animations-tile-master/src/jquery.animations-tile.js"></script>
<script
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery-animations-tile-master/external/jquery.animations.min.js"></script>
<script
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jquery-animations-tile-master/src/jquery.animations-tile.js"></script>
請複製下列 jQuery 驅動碼到<body>之後：
<script>
$(function() {
$('#ima150109').click(function() {
$(this).parent().next().css({'visibility': 'hidden'});
$(this).animate('tile', {
"duration": 2500,
"rows": 12,
"cols": 8,
"effect": "rotate flipX flyToLeft flyToUp",
"fillMode": "forwards"
});
});
});
</script>
$(function() {
$('#ima150109').click(function() {
$(this).parent().next().css({'visibility': 'hidden'});
$(this).animate('tile', {
"duration": 2500,
"rows": 12,
"cols": 8,
"effect": "rotate flipX flyToLeft flyToUp",
"fillMode": "forwards"
});
});
});
</script>
注意事項：
- 紅色字為要消失圖的 id 。在圖片也要記得設相同的 id 。
- 綠色字為速度。1000為一秒。
影音教學：
資料來源：Tile plugin
沒有留言:
張貼留言