抓狂吧！圖片。
請複製下列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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq7AyK0DOQx_gNx7LdniY_aV2kp7dgZlQ1SViQU-M8G2JBvdgBeae5Um5Oydanv5r4WBP_sz1QQR6UDIyVRXzqzCy9IoRUcFz8kRzJacxMGsyUtB1q0ErC8bnpK5_n-zIKKgImCABGI8Y/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0G1LoZCzKx-zemO7_m173182cbRR1_oXy40o7aJjcxUdlas16s0Bh4mjtxoK7I_rVDYUcC68AMjV_ob8GqsJSqoWZRWqrMFup2K0goXxF0CoMXQKcmu2VVFv6kjc-PfKN8ri8V6_JPLI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq7AyK0DOQx_gNx7LdniY_aV2kp7dgZlQ1SViQU-M8G2JBvdgBeae5Um5Oydanv5r4WBP_sz1QQR6UDIyVRXzqzCy9IoRUcFz8kRzJacxMGsyUtB1q0ErC8bnpK5_n-zIKKgImCABGI8Y/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0G1LoZCzKx-zemO7_m173182cbRR1_oXy40o7aJjcxUdlas16s0Bh4mjtxoK7I_rVDYUcC68AMjV_ob8GqsJSqoWZRWqrMFup2K0goXxF0CoMXQKcmu2VVFv6kjc-PfKN8ri8V6_JPLI/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。
影音教學：
沒有留言:
張貼留言