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

2014年11月19日 星期三

排隊.請編輯元素一個接著一個出場:easy jQuery


一、本範例的進階應用:多層次圖說,一個接著一個出場。
二、本單元著重在對語法邏輯系統的思考理解。不要怕,真的超簡單,又有video教學。

請 你按這一個div,
然後其他的編輯元素,就會
一個接著一個的出場!


一個一個出場,是一種互動表現形式!
互動是一種以形式來呈現意義給出的文本樣 態,重點在於思考「互動樣態」與讀者的互動之 間,可以帶出來的意義感受。這是數位文本可以在文本表現上所帶來的全新方法。


我們以DIV來當作互動元件。
因之,DIV可以呈現的樣子,如表格、圖文整合,都可以用這種方法來表現。


最後,當然,什麼的文本表現意義才是適合這一種 互動樣態的使用,就考驗創作者的思考。



這是後面的文字,主要是讓你知道,這個一互動模態,版面會隨著內容出現而變動。如果你想要讓內容依次跑出來的同時,版面是固定不變的。請參考進階技能,【1px固定版面技法】。



程式碼

<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 = 'a0528';
$('#a010528').click(function() {

if(flag == 'a0528') {
$('#b010528').delay(0).show('slide', {direction: 'left'}, 800);
$('#b020528').delay(800).show('slide', {direction: 'up'}, 800);
$('#b030528').delay(1600).show('slide', {direction: 'down'}, 800);
$('#b040528').delay(2400).show('slide', {direction: 'right'}, 800);
flag = 'b0528';
}

else {
$('#b010528, #b020528, #b030528, #b040528').hide();
flag = 'a0528';
}

});
});
</script>


紅色字體是要跑出來DIV的 ID 。本例有四個。可自行增加。
你可以自己調整方向:"left", "right", "up", "down",藍色字體者。
數字可以調整速度。一秒是1000。綠色字體者


CSS語法:

<style>

/* 中標 */
.midtitle0528 {
font-family: Verdana, '微軟正黑體';
font-size: 2.13em;
font-weight: bold;
line-height: 1.4;
text-align: left;
letter-spacing: 0.07em;
margin-bottom: 1em;
border-bottom: 1px solid red;
}

/* 基本黑體內文 */
.ironcontent052802 {
font-family: Verdana, '微軟正黑體';
font-size: 1.27em;
font-weight: normal;
line-height: 2;
text-align: left;
letter-spacing: 0.1em;
margin-bottom: 1em;
}

/* 基本黑體內文+粗+背景圖 */
.ironcontent0528 {
font-family: Verdana, '微軟正黑體';
font-size: 1.3em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
padding-left: 35px;
background-image: url(https://goo.gl/MGdgDj);
background-repeat: no-repeat;
background-position: left top 3px;
background-size: 28px;
margin-top: 1em;
}

/* 基本細明體內文 */
.ironcontentmi0528 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.6;
text-align: left;
letter-spacing: 0.1em;
padding-left: 0px 5px 5px 0px;
}

/* 隱藏DIV */
.displno {
display: none;
}

</style>



教學影片:





沒有留言:

張貼留言