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

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秒。紅色字部分。


教學影音:



沒有留言:

張貼留言