李明哲老師多媒體互動寫作教學: 讓更多細節跑出來的互動寫作：jQuery

使用這種互動的寫作時機…video

互動寫作｜按一下文字跑出更多內容來

讓

更多豐富細節秀出來 more…〔←按我〕

1.請將 jQuery 的嵌入語法套用置放於<head>xxx</head>之間（課堂建議）或<body>之後。

2.在需要詳細內容出現的地方置入 Div ，內容可以是文字、影像等等各種數位媒材。再設上 style="display: none;" 讓 Div 先隱藏起來。並給上一個識別代碼 id="xxx" 。

<div id="20131108" style="display: none;">
這是各種圖文的內容，只要是數位媒材都可以。<br>
</div>

3.為那個要按下去的「地方」，設置可以互動的程式碼，上面的範例為文字 more 。

說明：
紅色字 #20131108 正是步驟 2 的 Div 所設的 id="20131108" 。slideToggle(400)，這400是拉下的速度，可以自行更改。

更多變化的形態 jQuery UI

隱藏之物件「跑出來」的形式，或著說形態，可以有再多的可能性。就方向而言，可以是從上、下、左、右等不同方向擇其一「跑出來」，在此，創作者是有其創作上的空間之餘地。

呈現範例：

請按右側選項：從左秀出。從右秀出，從上秀出。從下秀出。

圖文框（id="interpo20171203"）：

請先寫入jQuery UI程式碼於<head>xxx</head>之間：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

按下去地方的「互動程式碼」：

onclick=" $('#interpo20171203').toggle('slide', {direction: 'left', easing: 'linear'}, 800); "

說明：
秀出物件的方向共有四種選項：左、右、上、下 // "left", "right", "up", "down"

HTML語法：

<div id="slit20171206">請
按右側選項：<big
onclick="$('#interpo20171203').toggle('slide', {direction: 'left', easing: 'linear'}, 800);">從
左秀出</big>。<big
onclick="$('#interpo20171203').toggle('slide', {direction: 'right', easing: 'linear'}, 800);">從
右秀出</big>，<big
onclick="$('#interpo20171203').toggle('slide', {direction: 'up', easing: 'linear'}, 800);">從
上秀出</big>。<big
onclick="$('#interpo20171203').toggle('slide', {direction: 'down', easing: 'linear'}, 800);">從
下秀出</big>。</div>
<br>

說明：
display: none; 這是要讓圖文DIV先行消失的css語法。

影音教學：

李明哲老師多媒體互動寫作教學

2013年11月8日星期五

讓更多細節跑出來的互動寫作：jQuery

3 則留言:

2013年11月8日 星期五

讓更多細節跑出來的互動寫作：jQuery

3 則留言:

2013年11月8日星期五