2014年11月2日 星期日

按小圖 跑出大圖，加上圖說：easy jQuery




按 小圖
 跑出大圖，還可寫上圖說



陽明山的美軍宿舍

在美好的陽光下，
看起來是一種享受。
如果，
你再按一下照片，
會跑出大圖來，這圖有更多的細節來補充你的想像。








一、影音教學：


注意事項：
  1. 一開始的小照片，請要設定 id 。此例 id="a011102"。
  2. 圍繞小照片 div，請設定步驟二的class 。此例 class="div1102" 。
  3. 此範例只能互動一個。要做第二個，請更換新id，再重頭做一次。
二、將下列 CSS 貼入到<body>之後：
<style>
.div1102 {
position: relative;
z-index: 99;
}
</style>
三、將下列 jQuery 貼入於<body>之後：
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
var flag = 'a';
$('#a011102').click(function() {

if(flag == 'a') {
$(this).attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEMaUf3VGmihKgCotQ8NkthjdbxF8h9rgmPrmr930eqdbEHP9ouV0x9uSMBNJRXWlmX6AavSEhk8M8jDcpYjUAYisCkOgZP8dK-fSm9D1xHS2As8bnD7SwkWI1ShZP9p6UIg0E32uqWR4/w1160-h774-no/IMG_1536.JPG').animate({'width': '520px', 'height': '347px'}, 400).parent().append('<div style="width: 520px; background-color: rgba(60, 60, 60, 0.3); padding: 0.2em 0em; font-weight: bold; letter-spacing: 0.1em; position: relative; top: -2.5em; color: white;">▲這是圖說<br></div>');
flag = 'b';}

else {
$(this).fadeOut(400, function(){$(this).css({'width': '217px', 'height': '144px'})}).queue(function() {$(this).attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHB81U7fJZWoInwvP9IyJ4xuh_JIjyb_6npoFBT8VOCOsjj-BCT_GbIP8CV2IHtUZKo8yQdtQswbs3PSE8gF5Kz6Wn915-3t2I_CZwwKa4m-bK5hBrisa2XLwtvdBPKZofxxYlpTQPDvY/w1160-h774-no/IMG_1533.JPG').dequeue();}).fadeIn(100);
$(this).parent().find('>div').remove();
flag = 'a';
}

});
});
</script>

說明：
  1. 藍色字體者，即一開始出現的 小照片，所設定的 id 。
  2. 紅色字體者，即是click後所出現的大照片，照片的網址 以及寬度和高度，三項。
  3. 土黃色字體者，是大照片下面 的圖說，要設定寬度及內容，二項。
  4. 綠色字體者，是再click之後 所回復的小照片，照片的寬度和高度以及照片的網址，三項。



沒有留言:

張貼留言