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

2013年11月8日 星期五

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


使用 這種互動的寫作時機…video
互動 寫作|按一下文字跑出更多內容來



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




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>



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>

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


影音教學:






3 則留言:

  1. 請問如果點擊的區域物件是圖片!要怎麼達到同樣的效果呢 謝謝

    回覆刪除
    回覆
    1. <a href="javascript: $('#20131108').slideToggle(400);"><img
      src="xxx"/></a>
      就是在圖像的語法前後加上我教的語法

      刪除
  2. <a href="javascript: $('#20131108').slideToggle(400);"><img
    src="xxx"/></a>
    就是在圖像的語法前後加上我教的語法

    回覆刪除