您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)JavaScript如何實(shí)現(xiàn)自定義動畫,小編覺得挺實(shí)用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
自定義動畫用到的幾個框架函數(shù):
$("Element").animate(params[,duration[,easing[,callback]]])
[quote]用于創(chuàng)建自定義動畫的函數(shù)。
這個函數(shù)的關(guān)鍵在于指定動畫形式及結(jié)果樣式屬性對象。這個對象中每個屬性都表示一個可以變化的樣式屬性(如“height”、“top”或“opacity”)。
注意:所有指定的屬性必須用駱駝形式,比如用marginLeft代替margin-left,如果有不懂得駱駝命名法的朋友請看三種通用CSS規(guī)范化命名的規(guī)則。
而每個屬性的值表示這個樣式屬性到多少時動畫結(jié)束。如果是一個數(shù)值,樣式屬性就會從當(dāng)前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值,則會為該屬性調(diào)用默認(rèn)的動畫形式。
params
(Options) : 一組包含作為動畫屬性和終值的樣式屬性和及其值的集合
duration (String,Number) : (可選) 三種預(yù)定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數(shù)值(如:1000)
easing (String) : (可選) 要使用的擦除效果的名稱(需要插件支持).默認(rèn)jQuery提供"linear" 和 "swing".
callback (Function) : (可選) 在動畫完成時執(zhí)行的函數(shù)
$("Element").animate(params,options)
同上
params (Options)
: 一組包含作為動畫屬性和終值的樣式屬性和及其值的集合
options (Options)
: 一組包含動畫選項(xiàng)的值的集合
$("Element").stop()
停止指定元素上正在運(yùn)行的動畫
$("Element").queue()
返回指向第一個匹配元素的隊(duì)列,常與length配合使用;可以將其理解為數(shù)組,一個動畫數(shù)組中包含了好幾個效果,queue().length表示獲得當(dāng)前所執(zhí)行的第一個效果。
通過以上函數(shù)實(shí)現(xiàn)自定義動畫效果:
(1)實(shí)現(xiàn)一個動畫queue,在循環(huán)展現(xiàn)每個動畫:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>第二十九節(jié)jQuery作業(yè)</title> <script language="javascript" src="js/jquery-1.3.2.js"></script> <script language="javascript" charset="GB2312"> $(function() { $("#show").click(function() { var n = $("div").queue(); $("span").text("Queue length is: " + $("div").queue().length); }); runIt(); }); function runIt() { $("div").show("slow"); $("div").animate({ left : '+=200' }, 2000); $("div").slideToggle(1000); $("div").slideToggle("fast"); $("div").animate({ left : '-=200' }, 1500); $("div").hide("slow"); $("div").show(1200); $("div").slideUp("normal", runIt); } </script> <style> div { margin: 3px; width: 40px; height: 40px; position: absolute; left: 0px; top: 30px; background: green; display: none; } div.newcolor { background: blue; } span { color: red; } </style> </head> <body> <button id="show">Show Length of Queue</button> <span></span> <div></div> </body> </html>
(2)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>第二十九節(jié)jQuery作業(yè)</title> <script language="javascript" src="js/jquery-1.3.2.js"></script> <script language="javascript" charset="GB2312"> $(function() { $(document.body).click(function() { $("div").show("slow"); $("div").animate({ left : '+=200' }, 2000); $("div").queue(function() { $(this).addClass("newcolor"); $(this).dequeue(); }); $("div").animate({ left : '-=200' }, 500); $("div").queue(function() { $(this).removeClass("newcolor"); $(this).dequeue(); }); $("div").slideUp(); }) }); </script> <style> div { margin: 3px; width: 40px; height: 40px; position: absolute; left: 0px; top: 30px; background: green; display: none; } div.newcolor { background: blue; } </style> </head> <body> Click here... <div></div> </body> </html>
(3)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>第二十九節(jié)jQuery作業(yè)</title> <script language="javascript" src="js/jquery-1.3.2.js"></script> <script language="javascript" charset="GB2312"> $(function() { $("#start").click(function() { $("div").show("slow"); $("div").animate({ left : '+=200' }, 5000); $("div").queue(function() { $(this).addClass("newcolor"); $(this).dequeue(); }); $("div").animate({ left : '-=200' }, 1500); $("div").queue(function() { $(this).removeClass("newcolor"); $(this).dequeue(); }); $("div").slideUp(); }) $("#stop").click(function() { $("div").queue("fx", []); $("div").stop(); }) }); </script> <style> div { margin: 3px; width: 40px; height: 40px; position: absolute; left: 0px; top: 30px; background: green; display: none; } div.newcolor { background: blue; } </style> </head> <body> <button id="start">Start</button> <button id="stop">Stop</button> <div></div> </body> </html>
(4)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>第二十九節(jié)jQuery作業(yè)</title> <script language="javascript" src="js/jquery-1.3.2.js"></script> <script language="javascript" charset="GB2312"> $(function() { $("button").click(function() { $("div").animate({ left : '+=200px' }, 2000); $("div").animate({ top : '0px' }, 600); $("div").queue(function() { $(this).toggleClass("red"); $(this).dequeue(); }); $("div").animate({ left : '10px', top : '30px' }, 700); }); }); </script> <style> div { margin: 3px; width: 50px; position: absolute; height: 50px; left: 10px; top: 30px; background-color: yellow; } div.red { background-color: red; } </style> </head> <body> <button>Start</button> <div></div> </body> </html>
關(guān)于“JavaScript如何實(shí)現(xiàn)自定義動畫”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。