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

2015年1月6日 星期二

抓狂吧!圖片。




抓狂吧!圖片。









請複製下列jQuery碼到<body>之後:


<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script
src="http://newsweek.shu.edu.tw:8080/lmc201410/jquery-animations-tile-master/external/jquery.animations.min.js"></script>
<script
src="http://newsweek.shu.edu.tw:8080/lmc201410/jquery-animations-tile-master/src/jquery.animations-tile.js"></script>

<script>

$(function() {

var flag = 1;
$('#pic001').click(function() {

if(flag == 1){
$(this).attr('src', 'https://lh5.googleusercontent.com/-UOcA6cUq8SQ/VKkkwBjdv5I/AAAAAAAAZYw/OXZm3snJpa0/w1016-h762-no/P1044405.JPG');
$(this).animate('tile', {
"duration": 2000,
"rows": 8,
"cols": 6,
"effect": "flyIn",
"fillMode": "backwards"
});
flag= 0;}

else{
$(this).attr('src', 'https://lh5.googleusercontent.com/-smPTzF7QmMA/VKkkz8tCe3I/AAAAAAAAZZI/y46TBUUp2Tw/w1016-h762-no/P1044582.JPG');
$(this).animate('tile', {
"duration": 2000,
"rows": 8,
"cols": 6,
"effect": "flyIn",
"fillMode": "backwards"
});
flag = 1;
}
});
});

</script>

注意事項:
一、藍色字體者為拼圖過程時間,1秒是1000。
二、褐色是要被拆成幾塊,此例是8x6。
三、綠色字是圖片的網址。
四、紅色字的id,要和一開始圖片所設的id 相同。
五、此範本只能做一張效果,要第二張,請重新複製jQuery碼一次,並更換id。


影音教學:






沒有留言:

張貼留言