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

2016年3月25日 星期五

滑鼠滑入圖,跑出圖說。快速!



使用 jQuery 方法
使用 CSS:hover 方法



會滑動的互動圖說。
超快速使用的圖文互動!一次設定就可以到處用,任意用!


這是中標↗


設置jQuery環境程式碼,請放於<body>之後:

 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>


互動模式驅動程式,請放<body>之後:


<script>
$(function() {
$('td.tddivho0325').hover( function(){
$(this).find('>div').eq(1).slideDown(800);
},
function(){
$(this).find('>div').eq(1).stop().slideUp(800);
});
});
</script>

說明:
1、本範例所預計使用之Class名稱:  tddivho0325
2、eq() 的計算,是從「0」開始的,0,1,2,3...
3、只要設定class,本範例可以重覆使用。

教學影音:



影音中所用之CSS:

<style>
/* 插入背景圖*/
.tablebacimg {
background-image: url(https://farm2.staticflickr.com/1679/25071374830_e6a9cb1b29_b.jpg);
baackground-repeat: no-repeat;
background-size: 640px;
}

/* 基本中標(粗)*/
.ironcontentbo0325 {
font-family: Verdana, '微軟正黑體';
font-size: 1.05em;
font-weight: bold;
line-height: 1.8;
text-align: center;
letter-spacing: 0.1em;
margin-bottom: 0.4em;
background-color: rgba(192, 192, 192, 0.6);
color: white;
}

/* 基本黑體內文 */
.ironcontentno0325 {
font-family: Verdana, '微軟正黑體';
font-size: 1.01em;
font-weight: normal;
line-height: 1.4;
text-align: center;
letter-spacing: 0.1em;
background-color: rgba(192, 192, 192, 0.6);
color: white;
}

/* 使div消失 */
.disnone0325 {
display: none;
}

</style>




使用CSS:hover 的互動方法




這是中標
這是內文。
這是內文的文字。這是內文。
這是內文的文字。


<style>
.backimg1214 {
background-image: url(照片網址);
background-repeat: not-repeat;
background-size: 500px;
}

table.backimg1214 >tbody >tr >td >div:nth-of-type(2) {
overflow: hidden;
height: 0px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}

table.backimg1214:hover >tbody >tr >td >div:nth-of-type(2) {
height: 55px;
border: 1px solid darkorange;
}


/* 表格內div中標(粗)*/
.ironcontentbo121214 {
font-family: Verdana, '微軟正黑體';
font-size: 1.05em;
font-weight: bold;
line-height: 1.8;
text-align: center;
letter-spacing: 0.1em;
margin-bottom: 0.4em;
background-color: rgba(192, 192, 192, 0.6);
color: white;
}

/* 表格內div黑體內文 */
.ironcontentno161214 {
font-family: Verdana, '微軟正黑體';
font-size: 1.01em;
font-weight: normal;
line-height: 1.4;
text-align: center;
letter-spacing: 0.1em;
background-color: rgba(192, 192, 192, 0.6);
color: white;
}

</style>

影音教學:





沒有留言:

張貼留言