*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2015年1月9日 星期五

請讓圖隨風而逝吧!:image effect:easy jQuery




★ 請讓圖吧!★
 

Click
構思方向:
  1. 在 Div 內設一背景圖。
  2. 在 Div 內再加入一張圖。這樣就會有二張圖重疊。
  3. 利用互動程式,讓上面那張產生被風吹走的效果,下面的圖就跑出來了。
  4. 接在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>



請複製下列 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>


注意事項:
  1. 紅色字為要消失圖的 id 。在圖片也要記得設相同的 id 。
  2. 綠色字為速度。1000為一秒。


影音教學:



資料來源:Tile plugin


沒有留言:

張貼留言