可以隨意拖拉的div，讓讀者更具主動性：easy jQuery

你可以拖拉下列三個Div，可以拉到任何地方。↓

Drag me around 01

Drag me around 02

Drag me around 03

jQuery & CSS:

<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script>
$(function() {
$( "#draggable01, #draggable02, #draggable03" ).draggable();

});
</script>

<style>
.div112901 {
font-family: Verdana, '微軟正黑體';
font-size: 1.12em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
padding: 0.5em;
letter-spacing: 0.1em;
margin: 0.5em;
}
</style>


HTML範例：

<div id="draggable01" class="div112901"
style="width: 100px; height: 100px; background-color: red;">
Drag me around<br>
</div>
<div id="draggable02" class="div112901"
style="width: 120px; height: 120px; background-color: green;">
Drag me around 02<br>
</div>
<div id="draggable03" class="div112901"
style="width: 380px; height: 230px; background-color: yellow;">
Drag me around 03<br>
<img style="width: 320px; height: 214px;" alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8tlEjDU5BmPwhEP7vVAv63c2f4aCzEpyl5YnLkRVnGWmGtTTK3V7_6MeXknHSA0FpJ7-HNgVW8HVZCreEbpEFqNfgwaq6zDl1_i8cYwawMreWrvrTN0_FccORJgpHaUI1WyGdyexpdmo/w1121-h748-no/IMG_1927.JPG"><br>
</div>


說明：

1. div內一定要設 id ，同時 id 也要寫入 jQuery 裡面，如範例中紅色 字體。如果一個以上的 id，請用「,」隔開。

圖文的互動搭配：easy jQuery

這 是我很愛思考和變化樣的部分↓ 。

圖文互搭的作法，一直是我最愛思考的互 動文本表現方式。這 中間當然要有某種互動的方式，來串起兩 者之間的連帶關係。
理論上，圖與文是兩種異質性 的媒介，一般常用的圖說，其實是以圖為之主方式；但互動下的圖文互搭，兩者間形成一種敘事關係，就不是某種主、附的關係，而是構成敘事文本都不可或缺的部 分。

CSS：

<style>
.bacimg1128 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnqjfs-w5y23S7Wj46P-MQoVGfCeQfxggCWefJThTGow0mQ6QbNMuzaq_U0H92LcAQHUQIlVk-hseMu3hmbHA5Mj6_TnVldeTEy-tIntJwxGun5RLCScEw1aAL5swXfiMqtvrpBy7YXGs/w1166-h778-no/IMG_0396.JPG);
background-repeat: no-repeat;
background-position: left top;
background-size: 578px 386px;
}
.div2014112801 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.8em;
text-align: left;
padding: 1.5em;
letter-spacing: 0.1em;
background-color: rgba(60, 60, 60, 0.5);
color: white;
}
.divposi2014112801 {
position: relative;
top: 3em;
}

.divdisno {
display: none;
}
</style>


jQuery：

<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">
<script>
$(function() {
$('div.bacimg1128').hover(function() {
$('div.div2014112801').show('slide', {direction: 'left'}, 400);},

function() {
$('div.div2014112801').hide('slide', {direction: 'left'}, 400);
});
});
</script>

使用事項：

1. 文字移動的方向，可以有"left", "right", "up", "down"四種方向，寫入藍色字的地方。
2. 速度的快慢可自調，一秒是1000。400即是0.4秒。紅色字部分。

教學影音：

向左、向右移動：easy jQuery

2017年版，純CSS的做法

後現代風格	遮住文字→	形成 想讀張力
	移動圖像→	進行閱讀過程

---

現代性與後現性之間的矛盾只是一個更大的歷史過程中的一個階段，而不是一個固定的有中心的靜止的結構； 尋找矛盾，發現矛盾，或甚「建構」矛盾， 正是布萊希特的「方法」的核心。

詹姆遜，《布萊希特與方法》陳永國譯。

jQuery:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
var flag1126 = 'a';

$('#d112601').click(function() {

if(flag1126 == 'a') {
$(this).animate({'left': '-=600px'}, {duration: 1400});
flag1126 = 'b';
}

else {
$(this).animate({'left': '+=600px'}, {duration: 1400});
flag1126 = 'a';
}
});
});
</script>

基 礎概念講解	實戰操作過程

使用CSS的 方法

如果想要：click一下咖啡杯，物件可以移動。這 樣的互動模態之文本形式，可以使用jQuery程 式外，另一種更方使的作法是和CSS配合使用。
我們可以看到簡單的運用jQuery的toggleClass()，再配合使用css trnsition以及transform之語法，就可以創造補間形式的動態效果。
這一作用更直覺，更適合一般人的直覺寫作思考。

CSS:

<style>
.clicsstt170101 {
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
cursor: pointer;
}

.clicsstt170101add01 {
transform: translate(-350px, -140px);
}
</style>


jQuery: click

$(this).toggleClass('clicsstt170101add01');


影音教學：

按一下
下面的圖像就會自動的移開。
以利閱讀的進行！

讓照片跑開，不要妨礙閱讀：easy jQuery

我在想著，數位文本是否也有著布萊希特所愛用的「間離法」的效果。這一用在 戲劇的技法，我總覺得會跟數 位文本中的「互動法」有著理論上接軌的 可能。

貝托爾特·布萊希特                
Bertolt Brecht                  
來源：《維基百科》  Click ↑

布萊希特
間離效果（即陌生化）其 要義概括起來有如下幾點：
　　（1） 布萊希特認為，… …。
　　（2） 陌生化效果就是借助種種戲劇藝術。……總之，使它們失去為人們所熟知的假像，揭示它們的社會本質。
　　（3） 在藝術欣賞中，……，破除催眠般的舞臺幻覺，觸發觀眾藝術鑒賞中的理性 激動，引起深廣的聯想和冷靜的思考。
　　（4） 陌生化效果的目的是引導人們對舞臺表現的人物、事件及其社會過程，採取一種批判、探討的態度，促使他們從社會的角度出發，作出有益的批判，感奮人們改造世 界的行動。”（《試論布萊希特的陌生化效果》 孫君華）

CSS：

<style type="text/css">
.word011120 {
font-family: Verdana, '微軟正黑體';
font-size: 1.4em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
padding-right: 9em;
letter-spacing: 0.1em;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAspAm_tZGTYLXgFpZZohLDRYA7p-C8yKyZAE7ToTDe_0xh-sM9scg43Ywv1cXn9Faw4PqrdcAPNeAYQ6qA-oCoCxY-B9vdWXpReJtaNiUDEKYxet8kkdMWHvaC-9hyQjbtlt6ewII-Yw/w155-h168-no/15884987-mouse-push.jpg);
background-repeat: no-repeat;
background-position: right 45px bottom 15px;
background-size: 36px;
cursor: pointer;
}
</style>

jQuery:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$('#a112001').click(function() {
$(this).animate({'top': '+=220px'}, {duration: 1200}).fadeOut(200);
});
$('#a112002').click(function() {
$('#a112001:hidden').animate({'top': '-=220px'}, {duration: 100}).show(400);
});

});
</script>

教 學影音：

排隊．請編輯元素一個接著一個出場：easy jQuery

一、本範例的進階應用：多層次圖說，一個接著一個出場。
二、本單元著重在對語法邏輯系統的思考理解。不要怕，真的超簡單，又有video教學。

請 你按這一個div，
然後其他的編輯元素，就會
一個接著一個的出場！

一個一個出場，是一種互動表現形式！

互動是一種以形式來呈現意義給出的文本樣 態，重點在於思考「互動樣態」與讀者的互動之 間，可以帶出來的意義感受。這是數位文本可以在文本表現上所帶來的全新方法。

我們以DIV來當作互動元件。 因之，DIV可以呈現的樣子，如表格、圖文整合，都可以用這種方法來表現。

最後，當然，什麼的文本表現意義才是適合這一種 互動樣態的使用，就考驗創作者的思考。

這是後面的文字，主要是讓你知道，這個一互動模態，版面會隨著內容出現而變動。如果你想要讓內容依次跑出來的同時，版面是固定不變的。請參考進階技能，【1px固定版面技法】。

程式碼

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


驅動程式

<script>
$(function() {
var flag = 'a0528';
$('#a010528').click(function() {

if(flag == 'a0528') {
$('#b010528').delay(0).show('slide', {direction: 'left'}, 800);
$('#b020528').delay(800).show('slide', {direction: 'up'}, 800);
$('#b030528').delay(1600).show('slide', {direction: 'down'}, 800);
$('#b040528').delay(2400).show('slide', {direction: 'right'}, 800);
flag = 'b0528';
}

else {
$('#b010528, #b020528, #b030528, #b040528').hide();
flag = 'a0528';
}

});
});
</script>

紅色字體是要跑出來DIV的 ID 。本例有四個。可自行增加。
你可以自己調整方向："left", "right", "up", "down"，藍色字體者。
數字可以調整速度。一秒是1000。綠色字體者

CSS語法：

<style>

/* 中標 */
.midtitle0528 {
font-family: Verdana, '微軟正黑體';
font-size: 2.13em;
font-weight: bold;
line-height: 1.4;
text-align: left;
letter-spacing: 0.07em;
margin-bottom: 1em;
border-bottom: 1px solid red;
}

/* 基本黑體內文 */
.ironcontent052802 {
font-family: Verdana, '微軟正黑體';
font-size: 1.27em;
font-weight: normal;
line-height: 2;
text-align: left;
letter-spacing: 0.1em;
margin-bottom: 1em;
}

/* 基本黑體內文+粗+背景圖 */
.ironcontent0528 {
font-family: Verdana, '微軟正黑體';
font-size: 1.3em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
padding-left: 35px;
background-image: url(https://goo.gl/MGdgDj);
background-repeat: no-repeat;
background-position: left top 3px;
background-size: 28px;
margin-top: 1em;
}

/* 基本細明體內文 */
.ironcontentmi0528 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.6;
text-align: left;
letter-spacing: 0.1em;
padding-left: 0px 5px 5px 0px;
}

/* 隱藏DIV */
.displno {
display: none;
}

</style>



教學影片：

快速補充要增強資料：CSS：選擇器：父子

CSS：選擇器：父子

快速補充要增強資料：純 css 方法

網路閱讀中，最怕的是一堆字擠 在一 起。因為螢幕是不好的閱讀媒介，這也是為什麼影音在網 路上盛行的原因：在螢幕上看影音並不吃力。所以我們就要想法子，看看有沒有辦法讓文字是更 快速可以被理解。這是我的方法之一，用互動，讓重點的字快速現形 出來，讓讀者來判斷：要不要再讀下去？

◣哇！都是一堆字。

CSS語法：

<style>
.word111301 {
font-family: '微軟正黑體';
font-size: 16px;
font-weight: normal;
line-height: 1.6 ;
letter-spacing: 0.1em;
}

div.word111301:hover >span {
color: red;
}

.relaposi {
position: relative;
}

.absoposi {
position: absolute;
top: -20px;
left: 100px;
}

.dispnone {
display: none;
}

div.word111301:hover >img {
display: block;
}
</style>

影音教學：

css 方法：選擇器：父子（01）	css 方法：選擇器：父子（02）

按一下讓圖片爆炸，換圖：jQuery: queue();

爆炸吧！圖片。

使用方法：

1. 請先將圖片貼入。
2. 要設定圖片id，此例為 id="img1111" 。即藍 色字體者。
3. 將下列jQuery貼入於<body>之後。
4. 綠色字體者為click後的圖片網址；紅色字體者為再click後的圖片網址。
5. 一般而言，紅色字體的圖片應是一開始放置的那張。
   

jQuery語法：

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

<script>
$(function() {
var flag = 'a';
$('#img1111').click(function () {

if(flag == 'a') {
$(this).hide('explode', 800).queue(function () {$(this).attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCgdP-_NiePQMxY_cvjoB4kAb6VyOuqIG5pwvVaTEY4Q_QglZsAZOB7bck0LqNUB_f01vpfyCbt3hDUaiA8_keDXz4NkucbPZgFnRH-Qd-Qhz1bB236jd25F-ex1TnMtXK-HdaqYS50Ew/w1195-h797-no/IMG_9587.JPG').dequeue(); }).show('explode', 800);
flag = 'b';
}

else {
$(this).hide('explode', 800).queue(function () {$(this).attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb3QmsCTfHHDacMdUbQF_utp149P9wxN6BQ7pawA0Z6yoDJ-t3EcCDLtbADqsAfjOtkMK4TDSfmVslrTlBX1dI2_J3Y_8wJblJQ7ZIcokvThGofiypb6e0Vr9fepdjt0-mHKRFs-ln9_E/w1195-h797-no/IMG_9692.JPG').dequeue(); }).show('explode', 800);
flag = 'a';

}
});
});
</script>

easy jQuery 程式寫作練習：平順的滑顯和滑隱

Hover to see !

jQuery練習題slideToggle

圖片或媒材要放在DIV裡面，才能平順滑動

這 是我要按下去的地方。 就是表格裡面的ＴＤ， 然後在ＴＤ裡面要設好id。

  click▲照片也要設上id，才能進行互動設置。

構思重點：（一）將媒材放到
DIV裡，對DIV進行互動設定。
可以看到，不管是從圖像、videos
或是文字 都可以平順地控制變化。
（二）互動文本中，讀者是無法被
精準預 期閱讀行為。
所以，為一種閱讀內容設定
多種可行 的到達途徑，例如
設定二個以上的click點來到達，
是一位互動作者的
基本寫作思考態度。

這個課程範例，互動程式的使用是老套的，早教過。但，要寫出來，因為一些操作技巧可以幫助同學更多。這些寫作上／使用kompozer的操作技巧很重要，但同學似乎掌握的不是很好。如果你已跟著我學了一陣子，這個課程案例，會對你有真正提升功力的助益。

一、影音教學：

二、範例中的 jQuery:：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> $(function() { $('#im2014110801').click(function() { $(this).slideToggle(600); }); $('#ta2014110801').click(function() { $('#im2014110801').slideToggle(600); }); }); </script>

三、jQuery程式寫法影音說明：

按小圖 跑出大圖，加上圖說：easy jQuery

按 小圖	跑出大圖，還可寫上圖說

陽明山的美軍宿舍 在美好的陽光下， 看起來是一種享受。 如果， 你再按一下照片， 會跑出大圖來，這圖有更多的細節來補充你的想像。

一、影音教學：

注意事項： 一開始的小照片，請要設定 id 。此例 id="a011102"。 圍繞小照片 div，請設定步驟二的class 。此例 class="div1102" 。 此範例只能互動一個。要做第二個，請更換新id，再重頭做一次。

二、將下列 CSS 貼入到<body>之後：

<style> .div1102 { position: relative; z-index: 99; } </style>

三、將下列 jQuery 貼入於<body>之後：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> $(function() { var flag = 'a'; $('#a011102').click(function() { if(flag == 'a') { $(this).attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEMaUf3VGmihKgCotQ8NkthjdbxF8h9rgmPrmr930eqdbEHP9ouV0x9uSMBNJRXWlmX6AavSEhk8M8jDcpYjUAYisCkOgZP8dK-fSm9D1xHS2As8bnD7SwkWI1ShZP9p6UIg0E32uqWR4/w1160-h774-no/IMG_1536.JPG').animate({'width': '520px', 'height': '347px'}, 400).parent().append('<div style="width: 520px; background-color: rgba(60, 60, 60, 0.3); padding: 0.2em 0em; font-weight: bold; letter-spacing: 0.1em; position: relative; top: -2.5em; color: white;">▲這是圖說<br></div>'); flag = 'b';} else { $(this).fadeOut(400, function(){$(this).css({'width': '217px', 'height': '144px'})}).queue(function() {$(this).attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHB81U7fJZWoInwvP9IyJ4xuh_JIjyb_6npoFBT8VOCOsjj-BCT_GbIP8CV2IHtUZKo8yQdtQswbs3PSE8gF5Kz6Wn915-3t2I_CZwwKa4m-bK5hBrisa2XLwtvdBPKZofxxYlpTQPDvY/w1160-h774-no/IMG_1533.JPG').dequeue();}).fadeIn(100); $(this).parent().find('>div').remove(); flag = 'a'; } }); }); </script> 說明： 藍色字體者，即一開始出現的 小照片，所設定的 id 。 紅色字體者，即是click後所出現的大照片，照片的網址 以及寬度和高度，三項。 土黃色字體者，是大照片下面 的圖說，要設定寬度及內容，二項。 綠色字體者，是再click之後 所回復的小照片，照片的寬度和高度以及照片的網址，三項。