數位時代的寫作，是一種新形態的文本表達模式！
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作：HTML&CSS
新聞影音剪輯：premiere
匯流寫作基模知識：gravit
基礎影音編輯：shotcut
基礎向量圖像編輯：inkscape
基礎圖像編輯：GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯（上課用）
新聞直播編導／OBS（上課用）
基礎新聞攝影（上課用）
數位排版/敘事（上課用）
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論／研究

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之後 所回復的小照片，照片的寬度和高度以及照片的網址，三項。



沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)