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

2014年11月11日 星期二

按一下讓圖片爆炸,換圖:jQuery: queue();



爆炸吧!圖片。



使用方法:

  1. 請先將圖片貼入。
  2. 要設定圖片id,此例為 id="img1111" 。即藍 色字體者
  3. 將下列jQuery貼入於<body>之後。
  4. 綠色字體者為click後的圖片網址;紅色字體者為再click後的圖片網址。
  5. 一般而言,紅色字體的圖片應是一開始放置的那張。

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://lh5.googleusercontent.com/-3P0sgbJXhEs/VGC4bGPOITI/AAAAAAAAYrw/pyfvPIJfGeM/w1195-h797-no/IMG_9587.JPG').dequeue(); }).show('explode', 800);
flag = 'b';
}

else {
$(this).hide('explode', 800).queue(function () {$(this).attr('src', 'https://lh4.googleusercontent.com/-iqmgQOW6pwA/VGC4fxwmH1I/AAAAAAAAYsQ/1sfqjgoem2Y/w1195-h797-no/IMG_9692.JPG').dequeue(); }).show('explode', 800);
flag = 'a';

}
});
});
</script>


沒有留言:

張貼留言