滑鼠移入照片動
另一張照片show出來
一段說明文字展現出來
透過互動過程資料的變化，可以形成具有前後形式敘事意義開展
| 使用jQuery方法 |
使用CSS方法 |
教學影音：
CSS語法：請 放置於<head>xxx</head>之間或<body>之後
<style>
.baimg032801 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlmz6uJQQXH57bHkr1uaWvc_jMLTdC1v6rzqYMzE_oTykiNQVPOMozgsd4KHtBHTZOpNq_te7ScQbFzl1u0ax8bUNxkWUOFbr9kEyk_XBu7mABl38K4tCqPD_LqjwCzwBYzcfIip8jbNk/w1049-h700-no/IMG_4621.JPG);
background-repeat: no-repeat;
background-size: 420px;
}
</style>
jQuery程式：請放 到<head>xxx</head>之間或<body>之後
<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">
驅動程式碼：請放到<head>xxx</head>之間或 <body>之後
<script>
$(function() {
$('.baimg032801').hover(function() {
$(this).find('>img').hide('slide', {direction: 'right'}, 400);
},
function() {
$(this).find('>img').show('slide', {direction: 'right'}, 400);
});
});
</script>
說明：
移動的方向有：left, right, up, down 四種方向。
移動的速度是：一秒為1000。所以400是0.4秒。
使用CSS語法方式：
 |
 |
CSS語法：
<style>
/*子孫選擇器；溢出框外即消失語法*/
table.tabpic17010201 td {
overflow: hidden;
}
/*為表格格內設置背景圖*/
#tdbapic17010201 {
background-image: url(https://c4.staticflickr.com/6/5835/30600690323_b183cbb402_b.jpg);
background-repeat: no-repeat;
background-size: 314px;
}
#tdbapic17010202 {
background-image: url();
background-repeat: no-repeat;
background-size: 314px;
}
/*父子選擇器*/
table.tabpic17010201 td >img {
-webkit-transition: 0.5s linear;
-moz-transition: 0.5s linear;
-o-transition: 0.5s linear;
-ms-transition: 0.5s linear;
transition: 0.5s linear;
}
/*hover:滑動的互動指示器*/
table.tabpic17010201 td:hover >img {
transform: translate(314px, 0px);
}
</style>
注意：表格的「格內側補白」的值要設為0 。
影音教學：
←請把滑鼠移到照片。