爆炸吧！圖片。
使用方法：
- 請先將圖片貼入。
- 要設定圖片id，此例為 id="img1111" 。即藍 色字體者。
- 將下列jQuery貼入於<body>之後。
- 綠色字體者為click後的圖片網址；紅色字體者為再click後的圖片網址。
- 一般而言，紅色字體的圖片應是一開始放置的那張。
jQuery語法：
<script
src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">
<script>
$(function() {
var flag = 'a';
$('#img1111').click(function () {
if(flag == 'a') {
$(this).hide('explode', 800).queue(function () {$(this).attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCgdP-_NiePQMxY_cvjoB4kAb6VyOuqIG5pwvVaTEY4Q_QglZsAZOB7bck0LqNUB_f01vpfyCbt3hDUaiA8_keDXz4NkucbPZgFnRH-Qd-Qhz1bB236jd25F-ex1TnMtXK-HdaqYS50Ew/w1195-h797-no/IMG_9587.JPG').dequeue(); }).show('explode', 800);
flag = 'b';
}
else {
$(this).hide('explode', 800).queue(function () {$(this).attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb3QmsCTfHHDacMdUbQF_utp149P9wxN6BQ7pawA0Z6yoDJ-t3EcCDLtbADqsAfjOtkMK4TDSfmVslrTlBX1dI2_J3Y_8wJblJQ7ZIcokvThGofiypb6e0Vr9fepdjt0-mHKRFs-ln9_E/w1195-h797-no/IMG_9692.JPG').dequeue(); }).show('explode', 800);
flag = 'a';
}
});
});
</script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">
<script>
$(function() {
var flag = 'a';
$('#img1111').click(function () {
if(flag == 'a') {
$(this).hide('explode', 800).queue(function () {$(this).attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCgdP-_NiePQMxY_cvjoB4kAb6VyOuqIG5pwvVaTEY4Q_QglZsAZOB7bck0LqNUB_f01vpfyCbt3hDUaiA8_keDXz4NkucbPZgFnRH-Qd-Qhz1bB236jd25F-ex1TnMtXK-HdaqYS50Ew/w1195-h797-no/IMG_9587.JPG').dequeue(); }).show('explode', 800);
flag = 'b';
}
else {
$(this).hide('explode', 800).queue(function () {$(this).attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb3QmsCTfHHDacMdUbQF_utp149P9wxN6BQ7pawA0Z6yoDJ-t3EcCDLtbADqsAfjOtkMK4TDSfmVslrTlBX1dI2_J3Y_8wJblJQ7ZIcokvThGofiypb6e0Vr9fepdjt0-mHKRFs-ln9_E/w1195-h797-no/IMG_9692.JPG').dequeue(); }).show('explode', 800);
flag = 'a';
}
});
});
</script>
沒有留言:
張貼留言