jQuery循環(huán)動(dòng)畫(huà)與獲取組件尺寸的方法
本文實(shí)例講述了jQuery循環(huán)動(dòng)畫(huà)與獲取組件尺寸的方法。分享給大家供大家參考。具體分析如下：
一、前言
1、jQuery中的animate()方法允許您創(chuàng)建自定義的動(dòng)畫(huà)。
animate() 方法幾乎可以操作所有 CSS 屬性，不過(guò)當(dāng)使用 animate() 時(shí)，必須使用Camel標(biāo)記法書(shū)寫(xiě)所有的屬性名，比如，必須使用paddingLeft而不是padding-left，使用marginRight而不是margin-right，等等。同時(shí)，色彩動(dòng)畫(huà)并不包含在核心 jQuery 庫(kù)中。如果需要生成顏色動(dòng)畫(huà)，您需要從 jquery.com 下載 Color Animations 插件。
2、通過(guò)jQuery，很容易處理元素和瀏覽器窗口的尺寸。
jQuery提供如下屬性獲取元素和瀏覽器窗口的尺寸。
二、基本目標(biāo)
如下圖：
在網(wǎng)頁(yè)中創(chuàng)建兩個(gè)按鈕，一個(gè)按鈕能夠使組件的尺寸在顯示與隱藏狀態(tài)中切換，一個(gè)按鈕能夠使循環(huán)動(dòng)畫(huà)在開(kāi)始與停止?fàn)顟B(tài)中切換
單純的JQ沒(méi)有暫停與開(kāi)始動(dòng)畫(huà)播放的功能，必須下載jQuery Pause插件完成。本例而僅僅通過(guò)JavaScript去控制循環(huán)動(dòng)畫(huà)，所以每次暫停僅能在其完成一次循環(huán)體才能夠打斷，并不能做到在隨意位置暫停開(kāi)始的功能。
三、制作過(guò)程
以下是網(wǎng)頁(yè)所有代碼，之后再一部分一部分地解釋?zhuān)?/p>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ動(dòng)畫(huà)</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
var interval;
var i = 0;
var j = 0;
function divanimate() {
$(".d_class").animate( {left : "+=100px"}, 500);
$(".d_class").animate( {top : "+=100px" }, 500);
$(".d_class").animate( {left : "-=100px"}, 500);
$(".d_class").animate( {top : "-=100px" }, 500);
}
function cycle() {
divanimate();
interval = setInterval("divanimate()", 2000);
}
$(document).ready(function() {
$("#stop").click(function() {
i++;
if (i % 2 != 0)
cycle();
else
clearInterval(interval);
});
$("#show").click(function() {
j++;
if (j % 2 != 0) {
var txt = "";
txt += "<p align=\"center\">高: " + $("#d_id").height() + "px</br>";
txt += "寬: " + $("#d_id").width() + "px</p>";
$("#d_id").html(txt);
} else {
var txt = "";
$("#d_id").html(txt);
}
});
})
</script>
</head>
<body>
<button id="show">
顯示/隱藏方塊尺寸
</button>
<button id="stop">
開(kāi)始/停止動(dòng)畫(huà)的循環(huán)
</button>
<div id="d_id" class="d_class"
style="width: 100px; height: 100px; background-color: #000; position: absolute; top: 50px; color: #FFF; left:50px;"></div>
</body>
</html>
1、<body>部分
沒(méi)有什么特別的，就是定義兩個(gè)按鈕在與一個(gè)圖層。值得注意的是，在圖層的style參數(shù)值中必須加入position:absolute一項(xiàng)，否則此圖層無(wú)法在網(wǎng)頁(yè)中隨意移動(dòng)
background-color是圖層的背景顏色。color是圖層中的字體顏色。
需要定義id與class兩個(gè)參數(shù)，因?yàn)镴Q動(dòng)畫(huà)需要通過(guò)class來(lái)控制，而JQ獲取組件尺寸則需要通過(guò)id來(lái)控制。
同時(shí)，擺放圖層的位置需要注意，是用left與top來(lái)放置，而不是margin-left與margin-top去放置，因?yàn)镴Q動(dòng)畫(huà)控制代碼是用left與top去控制的。如果使用margin-left與margin-top去放置在動(dòng)畫(huà)開(kāi)始的瞬間會(huì)有小幅度的失真。
2、<head>部分
也就是核心代碼部分：
<!--網(wǎng)頁(yè)編碼，標(biāo)題，使用JQ-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ動(dòng)畫(huà)</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
/*這相當(dāng)于記錄循環(huán)狀態(tài)的指針，為下面清理clearInterval()所用*/
var interval;
/*i是用來(lái)記錄點(diǎn)擊“開(kāi)始/停止動(dòng)畫(huà)的循環(huán)”按鈕的次數(shù)，如果此按鈕點(diǎn)擊奇數(shù)次就開(kāi)始循環(huán)，偶數(shù)次就終止循環(huán)*/
var i = 0;
/*j是用來(lái)記錄點(diǎn)擊“顯示/隱藏方塊尺寸”按鈕的次數(shù)，如果此按鈕點(diǎn)擊奇數(shù)次就顯示尺寸，偶數(shù)次就隱藏尺寸*/
var j = 0;
/*由于沒(méi)有封裝好的toggle()方法，我們需要這么做*/
function divanimate() {
/*這里只能通過(guò)圖層的class值來(lái)控制圖層，獲取class值的前面的符號(hào)是.，而不是#*/
<!--要求class為d_class的圖層，先向右偏移100px，再向下偏移100px，之后向左偏移100px，最后向上偏移100px回到原位，每個(gè)動(dòng)作500毫秒以?xún)?nèi)完成，也就是0.5秒-->
<!--這里注意的是left的意義是x軸的正方向，屏幕最左為0px，越往右數(shù)值越大，top是y軸的負(fù)方向，屏幕最上為0px，越往下數(shù)值越大-->
$(".d_class").animate( {left : "+=100px"}, 500);
$(".d_class").animate( {top : "+=100px" }, 500);
$(".d_class").animate( {left : "-=100px"}, 500);
$(".d_class").animate( {top : "-=100px" }, 500);
}
function cycle() {
/*此函數(shù)是首先執(zhí)行divanimate()函數(shù)，之后，每2000毫秒，也就是每2秒執(zhí)行divanimate()一次。這個(gè)間隔剛好是一次動(dòng)畫(huà)所完成時(shí)間，如果不打斷此循環(huán)的話(huà)，剛好能夠無(wú)間隔地?zé)o縫完美執(zhí)行循環(huán)動(dòng)畫(huà)。*/
/*第一行必須存在，否則每次點(diǎn)擊開(kāi)始按鈕，都要等2秒，才開(kāi)始動(dòng)畫(huà)*/
divanimate();
interval = setInterval("divanimate()", 2000);
}
/*$(document).ready(function(){})意為一加載網(wǎng)頁(yè)就加載的函數(shù)，所有按鈕的動(dòng)作類(lèi)，必須放在其中*/
$(document).ready(function() {
$("#stop").click(function() {
i++;
if (i % 2 != 0)
cycle();
else
/*終止循環(huán)與上面的開(kāi)始循環(huán)是javascript的函數(shù)，都說(shuō)了jquery僅僅是javascript的擴(kuò)展。*/
clearInterval(interval);
});
$("#show").click(function() {
j++;
if (j % 2 != 0) {
var txt = "";
txt += "<p align=\"center\">高: " + $("#d_id").height() + "px</br>";
txt += "寬: " + $("#d_id").width() + "px</p>";
/*這個(gè)方法能夠在相應(yīng)的組件標(biāo)簽中輸出文本*/
$("#d_id").html(txt);
} else {
var txt = "";
$("#d_id").html(txt);
}
});
})
</script>
</head>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery簡(jiǎn)單實(shí)現(xiàn)點(diǎn)擊文本框復(fù)制內(nèi)容到剪貼板上的方法
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)點(diǎn)擊文本框復(fù)制內(nèi)容到剪貼板上的方法,涉及jQuery針對(duì)瀏覽器的判定與剪貼板的讀寫(xiě)操作技巧,需要的朋友可以參考下2016-08-08
jQuery添加/改變/移除CSS類(lèi)及判斷是否已經(jīng)存在CSS
正如標(biāo)題所言會(huì)用到removeClass移除CSS類(lèi)、addClass添加CSS類(lèi)、toggleClass添加或者移除CSS類(lèi)，hasClass判斷是否已經(jīng)存在CSS2014-08-08
jQuery實(shí)現(xiàn)的網(wǎng)格線(xiàn)繪制方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)的網(wǎng)格線(xiàn)繪制方法,涉及jQuery針對(duì)頁(yè)面元素的獲取及樣式動(dòng)態(tài)操作相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
Jquery跨域獲得Json時(shí)invalid label錯(cuò)誤的解決辦法
這兩天用 Jquery 跨域取數(shù)據(jù)的時(shí)候，經(jīng)常碰到 invalid label 這個(gè)錯(cuò)誤，十分的郁悶，老是取不到服務(wù)器端發(fā)送回來(lái)的 json 值，一般跨域用到的兩個(gè)方法為：$.ajax 和 $.getJson2011-01-01
jQuery插件jQuery-JSONP開(kāi)發(fā)ajax調(diào)用使用注意事項(xiàng)
jQuery-JSONP是一個(gè)支持 JSONP 調(diào)用的 jQuery 插件，使用它是因?yàn)樗С殖鲥e(cuò)時(shí)的 ajax 回調(diào)，而 jQuery 的 $.ajax 不支持，我們已經(jīng)在實(shí)際項(xiàng)目中使用，在開(kāi)始使用時(shí)遇到了2個(gè)問(wèn)題，在這里記錄并分享一下。2013-11-11
Jquery中ajax方法data參數(shù)的用法小結(jié)
本篇文章主要是對(duì)Jquery中ajax方法data參數(shù)的用法進(jìn)行了總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
jQuery對(duì)象和DOM對(duì)象使用說(shuō)明
jQuery對(duì)象和DOM對(duì)象使用說(shuō)明，需要的朋友可以參考下。2010-06-06
這篇文章主要介紹了超級(jí)簡(jiǎn)單的jquery操作表格方法,可實(shí)現(xiàn)針對(duì)表格行與列的增加及刪除操作,是非常實(shí)用的技巧,需要的朋友可以參考下2014-12-12
Javascript 鏈?zhǔn)秸{(diào)用實(shí)現(xiàn)代碼(參考jquery)
謂的鏈?zhǔn)秸{(diào)用無(wú)非是一個(gè)語(yǔ)法技巧而已，我就學(xué)Jquery寫(xiě)了一個(gè)粗淺的庫(kù)。2010-05-05
下面小編就為大家?guī)?lái)一篇深入理解JQuery中的事件與動(dòng)畫(huà)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-05-05