抓狂吧!圖片。
請複製下列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。
<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。
影音教學:
沒有留言:
張貼留言