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

2014年4月29日 星期二

快速移動圖片的排版+互動功能







如果數位文本的寫作,
是一種需要想像力的創作過程;
那麼,
在空間的強烈位移和變動,
是激發想像力的一種形式。
想像力,不是和一般知性式知識對立的認知形式,
相反的是一種綜合,
根據美學理論而言。



透過CSS語法的安排
我們可以隨心所欲的把圖像置放到版面任何地方
尤其是置放去背圖像
可以強烈的將訴求主題凸顯出來創造文本意圖
當然有時這種圖像移動有時難免會把寫好的文本蓋住
沒關係
可以利用互動語法
click一下可以暫時讓圖像消失讀者便可觀看完整文本
我們可以調整多少時間後圖像可以再度出現


一、請在欲編輯地方寫人文稿並於文稿下置入圖片:


1.很簡單的寫作編輯動作,請看影音教學。
2.裡面還有一些非常有用的小技巧。
3.圖片請一定要記得設 id 。

二、請在<head>xxx</head>之間 或<body>之後置入CSS來移動圖片:

<style>
#pic20140428 {
position: relative;
top: -280px;
left: -10px;
margin-bottom: -280px;
}
</style>

三、請在<head>xxx</head>之間 或<body>之後置入互動程式碼:

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

<script>
$(function() {
$("#pic20140428").click(function() {
$(this).animate({opacity: "0.1"}, 200).delay(6000).animate({opacity: "1"}, 200);
});
});
</script>

四、注意事項:
  1. 紅色字的部分請一定要和照片,即<img id="xxx"  >,的相同。這樣才能控制圖片啊!
  2. 圖像消失後要多少以後才再出現,是第 3 部分的藍色字部分,即 delay(6000) ,以千分之一秒為單位,6000即是6秒後再出現。



沒有留言:

張貼留言