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

2015年1月14日 星期三

和讀者玩抓迷藏的互動技法:easy jQuery




在數位文本中,互動的 功能是有著和讀者「對話」的意味。對話,往往是用一種暗示的方法,來讓讀者體 會,或著說「理解」什麼。
「暗示」是一種形式的提示,用形式來表達想法。
例如,我們可以先把文字遮起來,再用互動的方法讓文字顯現。
也可以按一下,讓區塊消失。
這種方法會讓讀者,停下來想一下,思考一下,作者到底在想什麼?這比較接近我們在「對話」中的情境。


補充:那個在下面的按鈕的 html 寫法:

<button type="button">按我區塊會消失!</button><br>

你可以直接把「它」當做一個「字」的概念來想像和構思。
透過buttom,我們可以向讀者提示很多互的暗示和指示。




fldjsfjdsalfjldsj fldjs lf fj dlsj fldsjl fjdls ajf lds
fdslf dslf ldsj f
sfdls fldsj fljdsl;f dls fldsj lfjd slfj dslf ld;sj fldjs lfj dsf
dsfl dslf dsl flds fds
flds fldsj fljd slf lds lfjdsfj lds fdsf
dslfd slf dls flds fld sflj dslf lds fld sfld lf dsfds flds fls fldj slf dslf lsd fds
fdls flds fds lfj ds
dklsf ldsj fldsj fljd slf dslfj dls flds fldsj fldsj
ldf sjfldsj fljds lfj dslj fdsj fljd slfj ds;ljf l;dsj fljd slfj lds f
dslfj ldsjf ldsj fljd slf dlsjf ldsj fldsj fldjs lfj dslfj ds








請先把下列的 jQuery 程式置於<body>之後:

<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">

範例中 DIV 使用的CSS語法:

<style>
.div2015011201 {
background-color: rgba(39, 39, 39, 0.9);
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg64CEwkK-6qvKQbLA-ijLXTpMGG3FIB0qWA_n2mouFbtSvKk255O1m5a0Ybi88_23tVCSVGo2RXNZxc5fWxpeSwP0QtCzKx31epQhlOERoBf1lmae8s2EZIlVvZ-8Os9mtcmPu21nkegI/w162-h166-no/images0112.png);
background-repeat: no-repeat;
background-position: left 0.5em center;
background-size: 32px;
cursor: pointer;
}
</style>









onclick="$(this).hide('slide', {direction: 'up'}, 800);"





onclick="$(this).effect('shake', '4').hide('slide', {direction: 'right'}, 800);"





onclick="$(this).hide('fade', 800);"





onclick="$(this).effect('bounce', '3').hide('fade', 800);"





onclick="$(this).hide('explode');"





onclick="$(this).css({'position': 'relative'}).animate({'top': '-=90px'}).hide('puff');"





onclick="$(this).css({'position': 'relative'}).animate({'left': '+=230px'}).hide('clip');"


補充:還有各種不同的特效,請看此
更多範例,請按此



影音教學:



固定版型的補充說明:




沒有留言:

張貼留言