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秒後再出現。


沒有留言:

張貼留言