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

2016年6月3日 星期五

多層次圖說,一個接著一個出場:jQuery





一、請先學會基本功:排隊.請編輯元素一個接著一個出場:easy jQuery
二、本單元著重在應用 1px 技法:讓空白版面消失。1px技法css:   style="width: 1px; height: 1px;"


click the picture


這是超甜的鳳梨!
黃澄澄的顏色保證,好吃!

原產地是台南關廟
團購超搶手。 電話:#0028888888

   ▼ 我削得超漂亮的 ▼






jQuery 程式碼(請放於body之後):

<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">



互動驅動程式 (請放於body之後):

<script>
$(function() {
var flag = 'a0608';
$('#a010608').click(function() {

if(flag == 'a0608') {
$('#b010608').delay(0).show('slide', {direction: 'right'}, 800);
$('#b020608').delay(400).show('slide', {direction: 'left'}, 800);
$('#b030608').delay(1300).show('slide', {direction: 'up'}, 800);

flag = 'b0608';
}

else {
$('#b010608, #b020608, #b030608').hide();
flag = 'a0608';
}

});
});
</script>



CSS 文字語法:

<style>
/* 基本黑體內文(粗):置中*/
.ironcontentbo0601 {
font-family: Verdana, '微軟正黑體';
font-size: 1.19em;
font-weight: bold;
line-height: 1.8;
text-align: center;
letter-spacing: 0.1em;
background-color: rgba(192, 192, 192, 0.5);
}

/* 基本黑體內文 (粗):靠右*/
.ironcontentbo060102 {
font-family: Verdana, '微軟正黑體';
font-size: 1.11em;
font-weight: bold;
line-height: 1.8;
text-align: right;
letter-spacing: 0.1em;
background-color: rgba(192, 192, 192, 0.5);
}

/* div消失 */
.displano {
display: none;
}
</style>



影音教學: