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

2015年3月28日 星期六

滑鼠移入,照片就會滑動




滑鼠移入照片動
另一張照片show出來
一段說明文字展現出來
透過互動過程資料的變化,可以形成具有前後形式敘事意義開展


使用jQuery方法
使用CSS方法


  


photos with czj 35/2.4 Thanks to deadfish1206


教學影音:




CSS語法:請 放置於<body>之後

<style>
.baimg032801 {
background-image: url(https://lh3.googleusercontent.com/--SjwjQEH5iw/VRQegF-l_kI/AAAAAAAAaxY/X4Hl4PW5odI/w1049-h700-no/IMG_4621.JPG);
background-repeat: no-repeat;
background-size: 420px;
}
</style>

jQuery程式:請放 到<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">

驅動程式碼:請放到 <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 。

影音教學:





沒有留言:

張貼留言