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

2014年12月31日 星期三

掀起你的蓋頭來:resizable div:easy jQuery UI


可以隨意調整大小,拉出大小的文本區塊!

123


Resizable

這一行以下是DIV
這是內容文字。
這是內容


↖從這裡拉!
456


請將下列CSS及jQuery程式碼放到<body>之後:

<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() {
$( "#resizable" ).resizable();
});
</script>

<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; overflow: hidden; }
#resizable h3 { text-align: center; margin: 0; }
</style>

說明:
一、紅色字是一開始要出現的div的大小。


請將下列html放到欲編輯處:

<div style="border: 1px solid transparent; width: 170px; height: 170px;">
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
這一行以下是DIV<br>
<div style="width: 352px; height: 282px;">
這是內容文字<br>

這是內容<br>
<img style="width: 320px; height: 213px;" alt=""
src="https://lh4.googleusercontent.com/-Mp2uik-j_ug/VJVr1eeGcoI/AAAAAAAAZNo/wtTc-csrTm8/w759-h506-no/IMG_2083.JPG">
</div>
<br>
</div>
</div>



說明:
一、綠色者字,為固定版型用的,其大小是比一開始出現的多加上20px。
二、橘色字體者是裡面內容的div。可以自由的做內容。裡面的藍色字體是div的大小,請自行設定。



影音教學:







2014年12月26日 星期五

規律互動的背影色 有秩序的文字列


規律互動的背影色 有秩序的文字列

kds dlf  lds fldj djalfdjsl fds
dksf dsj fdjs alfjd safdsh fds fdsalf dsf
dls afdls lfdjsl kfjlkds lfdj sfj dsl fdlsa
fkdsf ljsdlaf lds aflds lfj dslaf lds fld sf ds;lf
ldsf dlsaj fd sfj ldsjf ldjs  dsf dsfd
sfkds fds fdhsa kfhdsk fkdsj flds lf dsf ds
dlsf dsj fds fjd slf dslfj ds
ld slf dslj flds fdjs lfj dlsajf ldsj flds lf dslf ds
dsl dsf ds fds
dlsf ldsjf lds fdjsfj dslf dsf


請 把下列CSS置放於<body>之後:

<style>
/*
這是整體表格的CSS
*/
table.tab20141226 {
border-spacing: 2px 0.1em;
word-break: break-all;
border: 0px;
}

/*
這是奇數列的CSS
*/
table.tab20141226 >tbody >tr:nth-child(odd) >td {
font-family: Verdana, '新細明體';
font-size: 16px;
font-weight: normal;
line-height: 1.6em;
letter-spacing: 0.1em;
border: 0px;
background-color: transparent;
padding: 1em 0em;
}

/*
這是偶數列的CSS
*/
table.tab20141226 >tbody >tr:nth-child(even) >td {
font-family: Verdana, '新細明體';
font-size: 16px;
font-weight: normal;
line-height: 1.6em;
letter-spacing: 0.1em;
border: 0px;
padding: 1em 0em;
background-color: rgba(232, 255, 245, 0.6);
}

/*
這是互動背景色的CSS
*/
table.tab20141226 >tbody >tr >td:hover {
background-color: rgba(240, 240, 240, 0.9);
}
</style>



影 音教學:



有關如何使用網頁顏色的教學:here
顏色代碼網站,及代碼轉換:here


2014年12月21日 星期日

小資料量快速互動list:使用ol / li:easy jQuery






  1. 第一中標
  2. 第一中標的內文。第一中標的內文。第一中標的內文。
  3. 第二中標
  4. 第二中標的內文。第二中標的內文。第二中標的內文。第二中標的內文。
  5. 第三中標
  6. 第三中標的內文。第三中標的內文。第三中標的內文。第三中標的內文。第三中標的內文。
  7. 第四中標



  1. lds dsjfl djs fds f
  2. ldjs fdls fdsfjd sj fdlsj fd slf
  3. dls fdls fds fld sf dsl fdjslfd sf ds
  4. dlsfldsj f dsfj klds fds fj dsfj dkls fds fd s
  5. dskf dsj fdsj fljd slf dsl fdls fds f dslf dsf dsf
  6. ldjs fld sjfjd sljf dsj fljd slf dlsj fdjs flj dslfj dlsj fljd slfj dsljf lds fjdslkfj dlsjf lds fldjs lf dsjf ds f dsf
  7. dlsjfds fds fd fds fds fds






CSS 語法,請複製到<body>之後:

<style>
/*
整個list的CSS語法
*/
ol#ol20141221 {
margin: 0px;
padding-left: 0.5em;
list-style-type: none;
position: relative;
z-index: 99;
}

/*
整個奇數列list的CSS語法
*/
ol#ol20141221 >li:nth-child(odd) {
font-family: Verdana, '微軟正黑體';
font-size: 1.3em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
margin-bottom: 0.5em;
border-bottom: 1px solid black;
cursor: pointer;
background-color: white;
}

/*
整個偶數列list的CSS語法
*/
ol#ol20141221 >li:nth-child(even) {
font-family: Verdana, '新細明體';
font-size: 16px;
font-weight: normal;
line-height: 1.6em;
letter-spacing: 0.1em;
border-bottom: 1px solid black;
margin: 1em 0px;
padding-bottom: 0.3em;
background-color: white;
}

/*
整個偶數列list隱藏的CSS語法
*/
ol.displno >li:nth-child(even) {
display: none;
}
</style>



jQuery 互動語法,請複製於<body>之後:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$('ol#ol20141221').find('li').filter(':even').click(function() {
$(this).next().slideToggle(600);
});
});
</script>



影 音教學:






2014年12月16日 星期二

有變化的版型:表格+CSS:圓角、陰影、旋轉、移動




這裡有很多字。這裡有很多字。 這裡有很多字。這裡有很多字。

這裡共有四種版面編輯動作:圓角、陰影、旋轉、滑鼠移入互動。【mouse enter↙】
這裡有很多字。這裡有很多字。這裡有很多字。這裡有很多字。這裡有很多字。這裡有很多字。這裡有很多字。這裡有 很多字。

在表格的TD中,使用1px div的排版概念(上課術語),形成跨限制的Div面積呈現。【請看教學video】




CSS 語法,請置於<body>之後:

<style>
/*
圓角框CSS語法
*/
.radius1215 {
border-radius: 25px;
}

/*
陰影框CSS語法
*/
.boxshadow1215 {
-webkit-box-shadow: 2px 2px 2px gray;
}

/*
旋轉框CSS語法
*/
.rotate1215 {
-webkit-transform: rotate(-8deg);
}

.rotate121502 {
-webkit-transform: rotate(6deg);
}

/*
相對位置移動CSS語法
*/
.relapo1215 {
position: relative;
top: 1.5em;
left: 2.2em;
}

/*
字的安排的CSS語法
*/
.tdword1215 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.6em;
letter-spacing: 0.1em;
}

/* 滑入有背景色CSS語法
*/
#tdhover1215:hover {
background-color: #CEFFCE;
}
</style>


教 學影音:



2014年12月12日 星期五

有規律呈現文字:使用表格+CSS

表格搭配CSS,文字呈現有規律。
對於要處理大量文字,或是大量資料的版型需求而言,這是很好的解決方法。


這是標題
這是內文這是內文。
這是內文這是內文。
這是內文這是內文。
這是標題
這是內文這是內文。
這是內文這是內文。
這是內文這是內文。




CSS 語法,請放在<body>之後:

<style>


table.tab20141212 {
border-spacing: 2px 0.8em;
word-break: break-all;
border: 0px;
}

/*
這是奇數列的CSS
*/

table.tab20141212 >tbody >tr:nth-child(odd) >td {
font-family: Verdana, '微軟正黑體';
font-size: 1.6em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
border: 0px;
}

/*
這是偶數列的CSS
*/

table.tab20141212 >tbody >tr:nth-child(even) >td {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: normal;
line-height: 1.6em;
letter-spacing: 0.1em;
border: 0px;
}
</style>



教 學影音:



互動css語法補充:

在<style>xxx</style>裡面加入下面二條css,則會互動地產生「有規律」的背景顏色:

table.tab20141212 >tbody >tr:nth-child(odd) >td:hover {
background-color: #DEDEBE;
}

table.tab20141212 >tbody >tr:nth-child(even) >td:hover {
background-color: #CAFFFF;



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之後 所回復的小照片,照片的寬度和高度以及照片的網址,三項。




2014年10月29日 星期三

漂亮彈跳地出現文字說明框:easy JQuery




kdsa fda fdjfda fl fdf jdsaf
lkdafldjf ldja lfjdlajfldj afl;d lf dla fda fldsaf
dlksf ldjfldj lfjdlfj dlj fldj lfj dlf jdj fdj f
dslakf dsf ldfldjfljd lf dlj fdj fl dlf d fdl fdaf
lkd fldjfldlfj dfj dls















一、教學影音:

二、請在<body>之後插入下列 CSS :
<style>

.tabdiv1029 {
background-image:url(https://lh5.googleusercontent.com/-tBDNsvaiOkU/VFCgbbrAbLI/AAAAAAAAYfo/OoyP56WpVVM/w48-h42-no/mouse-2_318-11618.jpg), url(https://lh5.googleusercontent.com/-0CngfpMcgA0/VDqDgCo9MVI/AAAAAAAAYVI/kxdyL4zaSTw/w1285-h857-no/IMG_1076.JPG);
background-repeat: no-repeat, no-repeat;
background-size: 48px 42px, 480px 320px;
background-position: right 3px bottom 3px, left top;
}

.tabword1029 {
font-family: Verdana, '微軟正黑體';
font-size: 1.02em;
font-weight: bold;
line-height: 1.4em;
text-align: left;
padding: 0em 0.3em 0em 0.3em;
width: 75%;
margin: auto;
color: white;
background-color: rgba(60, 60, 60, 0.7);
}
.disheight01 {
overflow: hidden;
height: 0px;
}

.disheight02 {
height: auto;
}
</style>
三、請在<body>之後插入下列  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() {
$( ".tabdiv1029" ).hover(function() {
$( this ).find(">div").addClass("disheight02", 400, "easeOutBounce");
} ,
function() {
$( this ).find(">div").removeClass("disheight02", 200, "easeOutBounce" );
});
});
</script>

注意事項:
如因其他互動模式而使用了 1.9.1以及1.9.2那幾條程式,即紅色字體者,就 可以不用再使用。一篇文章原則上有一次即可。



2014年10月26日 星期日

超快速的 image hover





黃色的燈光

配上的是一種柔和,和一種
黃色的布感。
用的是老鏡,那種跟我幾乎同樣年紀
的老鏡。
一種氛圍,
只有老鏡才能出來。


滑鼠移入,
圖片就會快速地
跑下又跑上。
讓出來的空隙,
就是要說明的文字文本。
可以調整方向、速度,
字的各種字體表現,
都可以用CSS來調校。

超快速的 image hover!!




一、影音教學:


二、複製並貼入下列 CSS 碼於<body>之後:
<style>

.diva1024 {
position: relative;
}

.titlemid1024 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.8em;
text-align: left;
padding: 0.5em;
width: 75%;
margin: auto;
letter-spacing: 0.1em;
}

.word1024 {
font-family: Verdana, '微軟正黑體';
font-size: 1.02em;
font-weight: bold;
line-height: 1.4em;
text-align: left;
padding: 0.3em;
width: 75%;
margin: auto;
letter-spacing: 0.1em;
border-bottom: 1px solid darkred;
}

.img1024 {
position: absolute; left: 0px; top: 0px;
}

</style>
三、請複製並貼入下列 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">

<script>
$(function() {
$( ".diva1024" ).hover(function() {
  $( this ).find(">img").hide("slide", { direction: "down" }, 200);
    } ,
    function() {
    $( this ).find(">img").show("slide", { direction: "up" }, 200 );
});
});
</script>

說明:
  1. 土黃色字體處,請填入一開始 做出來 div  的 calss 。
  2. 紅色字體處,是圖片隱藏和出現的方 向,可以使用down, up, left, right。
  3. 藍色字體處,是圖片進行的速 度。一秒是1000。
  4. 這個互動功能,可以用同一個class,不斷的重覆使用。



2014年10月17日 星期五

超快速任意移動物件:position: relative




超快速
移動編輯物件到任 意的編輯地方




  使用 CSS  position: relative


基礎概念講解:click for video!!


教學影音:


注意事項:
各項參數所在位置



補充資訊:

★ 2013年6月的教學版本,較詳細但複雜一點。按此◥

★ 要旋轉圖的語法:請把class   rotate1017   加入即可。-3deg是角度。

<style>
.rotate1017 {
-webkit-transform: rotate(-3deg);
}
</style>

★ 滑鼠移到就變淡的語法:請把那張圖的id設好,此例為 id="a01"
<style>
#a01:hover {
opacity: 0.2;
}
</style>
補充資訊:教學影音:CSS hover


2014年10月15日 星期三

在div內任意移動編輯物件: position: absolute


基礎概念講解:click for video!!

平面作品參考範例:


數位作品實作示範:





石碇之水

那年的冬季,水清的是一種無法想像。看著天空的顏色在轉化。


藍的與白的,是一種交相印。



教學video:




範例使用 CSS:

<style>
/*主DIV*/
.maindiv01 {
position: relative;
border: 0px solid orange;
}

/*標題大字*/
.divwordbig {
font-family: Verdana, '微軟正黑體';
font-size: 3.4em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
color: green;
text-shadow: 2px 2px 2px black;
}

/*中間內文*/
.divwordsmall {
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: bold;
line-height: 1.8em;
text-align: left;
background-color: whitesmoke;
width: 70%;
}

/*下面內文*/
.divwordsmall02 {
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: bold;
background-color: lightgreen;
position: absolute;
top: 290px;
left: 185px;
}

/*第一張照片*/
.popic01 {
position: absolute;
left: 240px;
top: -10px;
}

/*第二張照片*/
.popic02 {
position: absolute;
left: 260px;
top: 155px;
padding: 3px;
background-color: whitesmoke;
-webkit-transform: rotate(-5deg);
-webkit-box-shadow: 2px 2px 2px 2px silver;
}

/*主div背景圖*/
.bacimg {
background-image: url(https://lh6.googleusercontent.com/-0CngfpMcgA0/VDqDgCo9MVI/AAAAAAAAYVI/kxdyL4zaSTw/w684-h456-no/IMG_1076.JPG);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 455px;
}
</style>



範例補充用 互動CSS:

.popic01:hover {
border: 1px solid transparent;
padding: 3px;
background-color: whitesmoke;
-webkit-box-shadow: 1px 1px 1px 2px silver;
}



2014年10月10日 星期五

互動的照片效果:時間前後的比較



數位新聞寫作利器
比較前、比較後
這個互動模組,是數位新聞的呈現得以有效的超越傳統新聞寫作,很好的一個示範範例 作用。








一、影音教學:


寫作發想:
  1. 要比較時間前後的情況變化時使用。
  2. 請使用範例的互動模組 。
  3. 兩張照片的大小及比例要一致才好看。
  4. 最後一定要記得設定語法中照片的長度和寬度。
二、請把下列 程式碼 複製到<head>xxx</head>之間(建議)或<body>之後:

<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal/src/jquery.imageReveal.css">

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>

<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal/src/jquery.imageReveal.js"></script>

<script>
$(window).load(function() {
$('#Cademo').imageReveal({
barWidth: 15,
touchBarWidth: 40,
paddingLeft: 0,
paddingRight: 0,
startPosition: 0.25,
showCaption: true,
captionChange: 0.5,
width: 576,
height: 384
});
});
</script>

注意事項:
  1. jquery-1.12.4.js 那條程式(橘色字體者), 如已使用了,可以不要再寫入。一篇互動文本,寫入一條即可。最早出現的那條保留即可。
  2. 請記得要設定圖像的長度和寬度,即width & height,暗紅色字體者
三、請把下列 HTML 語法複製到欲呈現之編輯處:

<div id="Cademo" class="imageReveal">
<img src="https://lh6.googleusercontent.com/-zfoS52_k8x0/VDaiOK31kFI/AAAAAAAAYTI/FWb_OwemI_k/w1061-h708-no/IMG_096001.jpg" title="Before">
<img src="https://lh5.googleusercontent.com/-hjokh2l_MWg/VC0a6XIfPII/AAAAAAAAYRU/QmA3K6ICgB4/w1220-h814-no/IMG_0960.JPG" title="After">
</div>

注意事項:
  1. 把照片網址填入src="xxx" 中。即暗紅色字體處。依前、後的時間序填入。


原始語法出處:Image Reveal


2014年10月6日 星期一

移動滑鼠,編輯元素產生變化:jquery addclass / removeclass



請把滑鼠移到這裡來,下面 區塊會加框線。



這裡是文本寫作的區塊,可以透過互動強調作者想表達的想法。

當滑鼠移到這個區塊時,(一)這個區塊的文字會變 顏色,(二)同時背景圖也會換掉。




一、影音教學:




寫作發想:
  1. 請先寫入編輯元素。
  2. 為每個編輯元素設定 class 以及 id 。
  3. class 是媒材呈現的樣貌;id 是互動控制所需的辨識碼。
  4. 最後再寫入 jQuery 程式碼,請注意程式中所設的 id 。
二、請把下列 CSS 複製到<body>之後:
<style type="text/css">
.titlemid01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.4em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
letter-spacing: 0.1em;
border-bottom: 1px solid darkorange;
}

.contword01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: bold;
line-height: 1.8em;
text-align: left;
letter-spacing: 0.1em;
padding-right: 55%;
background-image: url(https://lh4.googleusercontent.com/-KuKFR5LQMq0/UqHeCoWFxSI/AAAAAAAAQNo/BfumwLGH8k8/w829-h814-no/34561%2B%28102%29.png);
background-repeat:no-repeat;
background-position: right center;
background-size: 300px;
}

.contword02 {
border: 1px solid darkred;
}

.contword03 {
color: orange;
background-image: url(https://lh3.googleusercontent.com/-vnG3PMO07w0/UqBpLSboe3I/AAAAAAAAQKY/8m3xNB8SdbA/s256-no/256px-Information_green.svg.png);
}
</style>
三、請把下列 jQuery 語法複製到<body>之後:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>
$(document).ready(function () {
$("#a01").hover(function () {
$("#a02").addClass("contword02");
}, function () {
$("#a02").removeClass("contword02");
});
});
</script>

<script>
$(document).ready(function () {
$("#a02").hover(function () {
$("#a02").addClass("contword03");
}, function () {
$("#a02").removeClass("contword03");
});
});
</script>


注意事項:
  1. 1.9.1.js 那條程式(橘色字體者), 如已因使用其他互動功能而被使用了,可以不要再寫入。一篇互動數位文章中,寫入一條即可。請保留最早出現的那條。



2014年10月1日 星期三

用背景圖拼貼圖像 plus 文字安排的大、中、小






可以同時使用很多張
背景圖拼貼圖像
利用多張圖像的位置關係,來呈現文本,不只是「美感」而已。
事實 上,從空間性的文本結構而言,圖像在文本空間位置的變化,即是意義的變化。
未來的文本敘述者, 必須要能使用圖像拼貼的敘事結構,來講故事。






一、影音教學:

二、教學使用的 CSS:請放置於<body>之後
<style>

.backi093001 {
background-image: url(第一張圖像網址), url(第二張圖像網址);
background-repeat: no-repeat, no-repeat;
background-position: right  bottom, right 210px top 7px;
background-size: 360px, 160px;
}

.backi093002 {
background-position: right bottom, right 170px top 47px;
}

.titlebig {
font-family: Verdana, '微軟正黑體';
font-size: 2.4em;
font-weight: bold;
line-height: 1.4em;
text-align: left;
letter-spacing: 0.1em;
text-shadow: 1px 1px 1px black;
color: darkorange;
}

.titlemid {
font-family: Verdana, '微軟正黑體';
font-size: 1.6em;
font-weight: bold;
line-height: 1.4em;
text-align: left;
letter-spacing: 0.1em;
border-bottom: 1px solid darkred;
}

.word01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.01em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
letter-spacing: 0.1em;
}

</style>
三、注意事項:
  1. 要移動背景圖的位置,請注意(上面紅色字體者) background-position: right bottom, right 210px top 7px; 。right【left/ center/ right,三選一】,是指靠 div 的右邊。 bottom【top/ center/ bottom,三選一】,是指靠 div 的底部。而 right 210px top 7px,是指距離右邊210px,同時距離頂部 7px。
  2. .titlebig 是指大標,.titlemid 是指中標,.word01 是指內文的 class。
四、補充的互動語法:請放置於<body>之後
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$('.backi093001').hover(function () {
$(this).addClass('backi093002');
}, function () {
$(this).removeClass('backi093002');
});
});
</script>