數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

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,不斷的重覆使用。



沒有留言:

張貼留言