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

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://lh4.googleusercontent.com/-VaYw_P0WXz4/VEMSxapwDFI/AAAAAAAAYb0/U4JRgGGSQJI/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://lh3.googleusercontent.com/-8MKgjAvUKkY/VEMSwLRkuNI/AAAAAAAAYbs/o3eCYLP-KU8/w1160-h774-no/IMG_1533.JPG').dequeue();}).fadeIn(100);
$(this).parent().find('>div').remove();
flag = 'a';
}

});
});
</script>

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




沒有留言:

張貼留言