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

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>
    就是在圖像的語法前後加上我教的語法

    回覆刪除