圖文的互動搭配：easy jQuery

這 是我很愛思考和變化樣的部分↓ 。

圖文互搭的作法，一直是我最愛思考的互 動文本表現方式。這 中間當然要有某種互動的方式，來串起兩 者之間的連帶關係。
理論上，圖與文是兩種異質性 的媒介，一般常用的圖說，其實是以圖為之主方式；但互動下的圖文互搭，兩者間形成一種敘事關係，就不是某種主、附的關係，而是構成敘事文本都不可或缺的部 分。

CSS：

<style>
.bacimg1128 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnqjfs-w5y23S7Wj46P-MQoVGfCeQfxggCWefJThTGow0mQ6QbNMuzaq_U0H92LcAQHUQIlVk-hseMu3hmbHA5Mj6_TnVldeTEy-tIntJwxGun5RLCScEw1aAL5swXfiMqtvrpBy7YXGs/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秒。紅色字部分。

教學影音：