| 使用
jQuery 方法 |
使用
CSS:hover 方法 |
會滑動的互動圖說。
超快速使用的圖文互動！一次設定就可以到處用，任意用！
|
這是中標↗
|
設置jQuery環境程式碼，請放於<body>之後：
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
互動模式驅動程式，請放<body>之後：
<script>
$(function() {
},
function(){
$(this).find('>div').eq(1).stop().slideUp(800);
});
});
</script>
$(function() {
$('td.tddivho0325').hover(
function(){
$(this).find('>div').eq(1).slideDown(800);},
function(){
$(this).find('>div').eq(1).stop().slideUp(800);
});
});
</script>
說明：
１、本範例所預計使用之Class名稱： tddivho0325
２、eq() 的計算，是從「0」開始的，0,1,2,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>
影音教學：
沒有留言:
張貼留言