1.以動畫呈現元素時CSS設定
以動畫方式呈現元素時,必須將CSS的position屬性性質設成absolute,fixed,or relative。
如果沒有設定CSS的position性質(預設為static),就不能使用top,right,left,or buttom等定位方式。
但是如果設定為上述三種性質就可以使用以上定位方式。
ex.
.face{
position:relative;
left:0px;
top:0px;
}
2.Jquery如何動態改變網頁元素
當網頁載入CSS檔案時,將會設定網頁元素的視覺化性質。
使用Jquery內建特效時,JS直譯器改變那些CSS性質。
ex.hide,show改變CSS性質
hide : JS直譯器將被選擇之元素的display性質改成none。
show:JS直譯器將被選擇之元素的display性質,使其變成可見。
3.特效的運行速度
$("#lightning1").fadeIn("fast");
or
$("#lightning1").fadeIn(1000);
上述效果相同。
4.把特效與方法鍊結合起來
例如:將閃電圖示淡入又淡出
$("#lightning1").fadeIn().fadeOut();
5.以定時函數處理問題
//function : 叫Jquery幫忙建立函式
// lightning_one() : 呼叫函式時用的名稱
// t : 定時參數
function lightning_one(t)
{
//Jquery特效
$("#lightning1").fadeIn("fast").fade("fast");
// setTimeout方法告訴JS直翻器執行lightning_one(),並等待 t 秒後再次執行
setTimeout("lightning_one()" , t);
}
上述方法便會不斷執行閃電圖示淡入淡出。
6.使用animate做出Jquery沒有提供的特效
Jquery並沒有提供slideRight or slideLeft等方法,所以Jquery提供了animate方法,讓我們可以建立自己的特效。
animate方法可以讓你動態改變被選擇之元素的CSS性質,並且可以動態的改變多個CSS性質。
note:animate之限制,動畫運用了很多數學,因此animate只可以改變有數值設定之CSS性質之操作。
ex:
$("#my_div").animate({left:"100px"},500);
my_div : 選擇想要改變的原素。
animate : 呼叫animate方法。
left:"100px" : 動態改變之CSS性質為往"left" 移動１００ｐｘ。
500 : 為要花多少時間完成這個動畫。
{left:"100px"}：此為第一個參數（必填）
500 : 選用之參數。
ex2.(改變多項ＣＳＳ性質)
$("#my_div").animate({
opacity: 0, //不透明改成０ －＞ 透明
width: "200",
height: "800"
},5000);
7.究竟從哪裡移動到哪裡
在６我們將#my_div設定left:"100px"，但實際上畫面上發生什麼事完全取決於當前#my_div的ＣＳＳ Left性質為何。
例如：
當前ＣＳＳ：＃ｍｙ＿ｄｉｖ｛ｌｅｆｔ：２００ｐｘ｝
改變Ｊｑｕｅｒｙ：$("#my_div").animate({left:"100px"});
因為原本從２００ｐｘ位址開始，往左移動１００ｐｘ，所以比原本少１００ｐｘ（２００－１００）。
note : 絕對與相對定位
絕對定位可以直接設定元素出現在網頁的某個位子。
相對定位則依照目前ＣＳＳ之設定加上Ｊｑｕｅｒｙ的設定計算後顯現元素。
8.使用運算子組合進行相對移動
$("#box").animate({left:"+=20"});
請注意這裡的+=20 : 由於網頁從左邊開始(0px),所以+=20是將ｂｏｘ每次往右邊推２０ｐｘ。
Example:
1.HTML檔
<!DOCTYPE html>
<html>
<head>
<title>Monster Mash</title>
<link type="text/css" href="styles/my_style.css" rel="stylesheet"/>
</head>
<body>
<header id="top">
<img id="text_top" src="images/Monster_Mashup.png" />
<p>Make your own monster face by clicking on the picture.</p>
</header>
<div id="container">
<img class="lightning" id="lightning1" src='images/lightning-01.jpg' />
<img class="lightning" id="lightning2" src='images/lightning-02.jpg' />
<img class="lightning" id="lightning3" src='images/lightning-03.jpg' />
<div id="frame">
<div id="pic_box">
<div id="head" class="face"><img src="images/headsstrip.jpg"></div>
<div id="eyes" class="face"><img src="images/eyesstrip.jpg"></div>
<div id="nose" class="face"><img src="images/nosesstrip.jpg"></div>
<div id="mouth" class="face"><img src="images/mouthsstrip.jpg"></div>
</div>
</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="scripts/my_scripts.js"></script>
</body>
</html>
2.CSS檔
body{
background-color:#000000;
}
p{
color:#33FF66;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#text_top {
position:relative;
z-index: 4;
}
#top {
position:absolute;
left:191px;
top:15px;
z-index: 4;
}
#container{
position:absolute;
left:0px;
top:0px;
z-index: 0;
}
.lightning{
display:none;
position:absolute;
left:0px;
top:0px;
z-index: 0;
}
#frame {
position:absolute;
left:100px;
top:100px;
width:545px;
height:629px;
background-image:url(../images/frame.png);
z-index: 3;
overflow: hidden;
}
#pic_box{
position:relative;
left:91px;
top:84px;
width:367px;
height:460px;
z-index: 2;
overflow: hidden;
}
.face{
position:relative;
left:0px;
top:0px;
z-index: 1;
}
#head{
height:172px;
}
#eyes{
height:79px;
}
#nose{
height:86px;
}
#mouth{
height:117px;
}
3.JS檔
$(document).ready(function () {
//紀錄案了幾次,9次一循環
var headclix = 0, eyeclix = 0, noseclix = 0, mouthclix = 0;
//call 閃電function
lightning_one();
lightning_two();
lightning_three();
//頭部按下click function
$("#head").click(function () {
//若被按下次數少於9次
if (headclix < 9) {
//head動畫每次往左移動367px,500毫秒內完成動畫
$("#head").animate({ left: "-=367px" }, 500);
//+1
headclix += 1;
}
//若按下次數大於等於9次
else {
//重置回0px位置
$("#head").animate({ left: "0px" }, 500);
headclix = 0;
}
});
$("#eyes").click(function () {
if (eyeclix < 9) {
$("#eyes").animate({ left: "-=367px" }, 500);
eyeclix += 1;
}
else {
$("#eyes").animate({ left: "0px" }, 500);
eyeclix = 0;
}
});
$("#nose").click(function () {
if (noseclix < 9) {
$("#nose").animate({ left: "-=367px" }, 500);
noseclix += 1;
}
else {
$("#nose").animate({ left: "0px" }, 500);
noseclix = 0;
}
}); //end click
$("#mouth").click(function () {
if (mouthclix < 9) {
$("#mouth").animate({ left: "-=367px" }, 500);
mouthclix += 1;
}
else {
$("#mouth").animate({ left: "0px" }, 500);
mouthclix = 0;
}
});
}); //end doc.onready function
function lightning_one() {
//$("#container #lightning1").fadeIn(250).fadeOut(250);
//CSS的ID為lightning1做fadeIn().fadeOut()動畫250毫秒內完成;
$("#lightning1").fadeIn(250).fadeOut(250);
//4000毫秒後自動call lightning_one()
setTimeout("lightning_one()", 4000);
};
function lightning_two() {
//$("#container #lightning2").fadeIn("fast").fadeOut("fast");
$("#lightning2").fadeIn("fast").fadeOut("fast");
setTimeout("lightning_two()", 5000);
};
function lightning_three() {
//$("#container #lightning3").fadeIn("fast").fadeOut("fast");
$("#lightning3").fadeIn("fast").fadeOut("fast");
setTimeout("lightning_three()", 7000);
};
留言列表
RWD (1)
