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

2014年11月29日 星期六

可以隨意拖拉的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://lh5.googleusercontent.com/-LU_-_xzIZDc/VHk3ATnzV1I/AAAAAAAAY_4/GAvVxC5jCz8/w1121-h748-no/IMG_1927.JPG"><br>
</div>


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



圖文的互動搭配:easy jQuery


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

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




CSS:

<style>
.bacimg1128 {
background-image: url(https://lh3.googleusercontent.com/-fz4jPEvDt84/VHM4KF3uN3I/AAAAAAAAY44/RU055geZemo/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秒。紅色字部分。


教學影音:



2014年11月26日 星期三

向左、向右移動: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');


影音教學:


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


2014年11月20日 星期四

讓照片跑開,不要妨礙閱讀: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://lh4.googleusercontent.com/-Ca0y4tvbpdU/VF7XkRVVcUI/AAAAAAAAYmc/DDsIqIOtfYU/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>


教 學影音:



2014年11月19日 星期三

排隊.請編輯元素一個接著一個出場: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>



教學影片:





2014年11月16日 星期日

快速補充要增強資料: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)





2014年11月11日 星期二

按一下讓圖片爆炸,換圖: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://lh5.googleusercontent.com/-3P0sgbJXhEs/VGC4bGPOITI/AAAAAAAAYrw/pyfvPIJfGeM/w1195-h797-no/IMG_9587.JPG').dequeue(); }).show('explode', 800);
flag = 'b';
}

else {
$(this).hide('explode', 800).queue(function () {$(this).attr('src', 'https://lh4.googleusercontent.com/-iqmgQOW6pwA/VGC4fxwmH1I/AAAAAAAAYsQ/1sfqjgoem2Y/w1195-h797-no/IMG_9692.JPG').dequeue(); }).show('explode', 800);
flag = 'a';

}
});
});
</script>


2014年11月8日 星期六

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






Hover to see !
jQuery練習題slideToggle
圖片或媒材要放在DIV裡面,才能平順滑動




這 是我要按下去的地方。
就是表格裡面的TD,
然後在TD裡面要設好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程式寫法影音說明:






2014年11月2日 星期日

按小圖 跑出大圖,加上圖說:easy jQuery




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



陽明山的美軍宿舍

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








一、影音教學:


注意事項:
  1. 一開始的小照片,請要設定 id 。此例 id="a011102"。
  2. 圍繞小照片 div,請設定步驟二的class 。此例 class="div1102" 。
  3. 此範例只能互動一個。要做第二個,請更換新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://lh4.googleusercontent.com/-VaYw_P0WXz4/VEMSxapwDFI/AAAAAAAAYb0/U4JRgGGSQJI/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://lh3.googleusercontent.com/-8MKgjAvUKkY/VEMSwLRkuNI/AAAAAAAAYbs/o3eCYLP-KU8/w1160-h774-no/IMG_1533.JPG').dequeue();}).fadeIn(100);
$(this).parent().find('>div').remove();
flag = 'a';
}

});
});
</script>

說明:
  1. 藍色字體者,即一開始出現的 小照片,所設定的 id 。
  2. 紅色字體者,即是click後所出現的大照片,照片的網址 以及寬度和高度,三項。
  3. 土黃色字體者,是大照片下面 的圖說,要設定寬度及內容,二項。
  4. 綠色字體者,是再click之後 所回復的小照片,照片的寬度和高度以及照片的網址,三項。