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');"


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



影音教學:



固定版型的補充說明:




沒有留言:

張貼留言