數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

2014年11月29日 星期六

圖文的互動搭配: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秒。紅色字部分。


教學影音:



沒有留言:

張貼留言