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

2014年10月26日 星期日

超快速的 image hover





黃色的燈光

配上的是一種柔和,和一種
黃色的布感。
用的是老鏡,那種跟我幾乎同樣年紀
的老鏡。
一種氛圍,
只有老鏡才能出來。


滑鼠移入,
圖片就會快速地
跑下又跑上。
讓出來的空隙,
就是要說明的文字文本。
可以調整方向、速度,
字的各種字體表現,
都可以用CSS來調校。

超快速的 image hover!!




一、影音教學:


二、複製並貼入下列 CSS 碼於<body>之後:
<style>

.diva1024 {
position: relative;
}

.titlemid1024 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.8em;
text-align: left;
padding: 0.5em;
width: 75%;
margin: auto;
letter-spacing: 0.1em;
}

.word1024 {
font-family: Verdana, '微軟正黑體';
font-size: 1.02em;
font-weight: bold;
line-height: 1.4em;
text-align: left;
padding: 0.3em;
width: 75%;
margin: auto;
letter-spacing: 0.1em;
border-bottom: 1px solid darkred;
}

.img1024 {
position: absolute; left: 0px; top: 0px;
}

</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">

<script>
$(function() {
$( ".diva1024" ).hover(function() {
  $( this ).find(">img").hide("slide", { direction: "down" }, 200);
    } ,
    function() {
    $( this ).find(">img").show("slide", { direction: "up" }, 200 );
});
});
</script>

說明:
  1. 土黃色字體處,請填入一開始 做出來 div  的 calss 。
  2. 紅色字體處,是圖片隱藏和出現的方 向,可以使用down, up, left, right。
  3. 藍色字體處,是圖片進行的速 度。一秒是1000。
  4. 這個互動功能,可以用同一個class,不斷的重覆使用。



沒有留言:

張貼留言