數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

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。


影音教學:






沒有留言:

張貼留言