*YouTube 教學頻道* *影像布落格*
首頁
初學者技能專區
布落格寫作
小世界習作網
《台灣立報》

2016年6月3日 星期五

多層次圖說,一個接著一個出場:jQuery





一、請先學會基本功:排隊.請編輯元素一個接著一個出場:easy jQuery
二、本單元著重在應用 1px 技法:讓空白版面消失。1px技法css:   style="width: 1px; height: 1px;"


click the picture


這是超甜的鳳梨!
黃澄澄的顏色保證,好吃!

原產地是台南關廟
團購超搶手。 電話:#0028888888

   ▼ 我削得超漂亮的 ▼






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() {
var flag = 'a0608';
$('#a010608').click(function() {

if(flag == 'a0608') {
$('#b010608').delay(0).show('slide', {direction: 'right'}, 800);
$('#b020608').delay(400).show('slide', {direction: 'left'}, 800);
$('#b030608').delay(1300).show('slide', {direction: 'up'}, 800);

flag = 'b0608';
}

else {
$('#b010608, #b020608, #b030608').hide();
flag = 'a0608';
}

});
});
</script>



CSS 文字語法:

<style>
/* 基本黑體內文(粗):置中*/
.ironcontentbo0601 {
font-family: Verdana, '微軟正黑體';
font-size: 1.19em;
font-weight: bold;
line-height: 1.8;
text-align: center;
letter-spacing: 0.1em;
background-color: rgba(192, 192, 192, 0.5);
}

/* 基本黑體內文 (粗):靠右*/
.ironcontentbo060102 {
font-family: Verdana, '微軟正黑體';
font-size: 1.11em;
font-weight: bold;
line-height: 1.8;
text-align: right;
letter-spacing: 0.1em;
background-color: rgba(192, 192, 192, 0.5);
}

/* div消失 */
.displano {
display: none;
}
</style>



影音教學: