使用 這種互動的寫作時機…video
互動 寫作｜按一下文字跑出更多內容來
1.請將 jQuery 的嵌入語法套用置放於<head>xxx</head>之間（課堂建議）或<body>之後。
<script
src="https://code.jquery.com/jquery-1.12.4.js"></script>
2.在需要詳細內容出現的地方置入 Div ，內容可以是文字、影像等等各種數位媒材。再設上 style="display: none;" 讓 Div 先隱藏起來。並給上一個識別代碼 id="xxx" 。
<div id="20131108" style="display: none;">
這是各種圖文的內容，只要是數位媒材都可以。<br>
</div>
這是各種圖文的內容，只要是數位媒材都可以。<br>
</div>
3.為那個要按下去的「地方」，設置可以互動的程式碼，上面的範例為文字 more 。
<a href="javascript:
$('#20131108').slideToggle(400);">more…</a>
說明：紅色字 #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>
<div
id="interpo20171203" style="display:
none;"><br>
<span
style="text-decoration: underline; font-style: italic; color: rgb(0, 102, 0);">晴
天的顏色</span><br>
<br>
<img style="width: 560px; height: 420px;" alt=""
src="圖像網址"><br>
</div>
<span
style="text-decoration: underline; font-style: italic; color: rgb(0, 102, 0);">晴
天的顏色</span><br>
<br>
<img style="width: 560px; height: 420px;" alt=""
src="圖像網址"><br>
</div>
說明：
display: none; 這是要讓圖文DIV先行消失的css語法。
影音教學：
請問如果點擊的區域物件是圖片!要怎麼達到同樣的效果呢 謝謝
回覆刪除<a href="javascript: $('#20131108').slideToggle(400);"><img
刪除src="xxx"/></a>
就是在圖像的語法前後加上我教的語法
<a href="javascript: $('#20131108').slideToggle(400);"><img
回覆刪除src="xxx"/></a>
就是在圖像的語法前後加上我教的語法