jQuery自定義動(dòng)畫函數(shù)實(shí)例詳解(附demo源碼)
更新時(shí)間：2015年12月10日 12:35:47 作者：思齊_
這篇文章主要介紹了jQuery自定義動(dòng)畫函數(shù)實(shí)現(xiàn)方法,形式實(shí)例分析了jQuery通過插件結(jié)合數(shù)學(xué)運(yùn)算實(shí)現(xiàn)滑塊動(dòng)畫運(yùn)動(dòng)的效果,并附完整demo源碼供讀者下載,需要的朋友可以參考下
本文實(shí)例講述了jQuery自定義動(dòng)畫函數(shù)完整實(shí)現(xiàn)技巧。分享給大家供大家參考，具體如下：
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/jquery-zdy-dh-move-style-demo/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定義動(dòng)畫DEMO</title>
<script src="jquery-1.4.4.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script>
var Tween = {
Linear:function (start,alter,curTime,dur) {return start+curTime/dur*alter;},//最簡單的線性變化,即勻速運(yùn)動(dòng)
Quad:{//二次方緩動(dòng)
easeIn:function (start,alter,curTime,dur) {
return start+Math.pow(curTime/dur,2)*alter;
},
easeOut:function (start,alter,curTime,dur) {
var progress =curTime/dur;
return start-(Math.pow(progress,2)-2*progress)*alter;
},
easeInOut:function (start,alter,curTime,dur) {
var progress =curTime/dur*2;
return (progress<1?Math.pow(progress,2):-((--progress)*(progress-2) - 1))*alter/2+start;
}
},
Cubic:{//三次方緩動(dòng)
easeIn:function (start,alter,curTime,dur) {
return start+Math.pow(curTime/dur,3)*alter;
},
easeOut:function (start,alter,curTime,dur) {
var progress =curTime/dur;
return start-(Math.pow(progress,3)-Math.pow(progress,2)+1)*alter;
},
easeInOut:function (start,alter,curTime,dur) {
var progress =curTime/dur*2;
return (progress<1?Math.pow(progress,3):((progress-=2)*Math.pow(progress,2) + 2))*alter/2+start;
}
},
Quart:{//四次方緩動(dòng)
easeIn:function (start,alter,curTime,dur) {
return start+Math.pow(curTime/dur,4)*alter;
},
easeOut:function (start,alter,curTime,dur) {
var progress =curTime/dur;
return start-(Math.pow(progress,4)-Math.pow(progress,3)-1)*alter;
},
easeInOut:function (start,alter,curTime,dur) {
var progress =curTime/dur*2;
return (progress<1?Math.pow(progress,4):-((progress-=2)*Math.pow(progress,3) - 2))*alter/2+start;
}
},
Quint:{//五次方緩動(dòng)
easeIn:function (start,alter,curTime,dur) {
return start+Math.pow(curTime/dur,5)*alter;
},
easeOut:function (start,alter,curTime,dur) {
var progress =curTime/dur;
return start-(Math.pow(progress,5)-Math.pow(progress,4)+1)*alter;
},
easeInOut:function (start,alter,curTime,dur) {
var progress =curTime/dur*2;
return (progress<1?Math.pow(progress,5):((progress-=2)*Math.pow(progress,4) +2))*alter/2+start;
}
},
Sine :{//正弦曲線緩動(dòng)
easeIn:function (start,alter,curTime,dur) {
return start-(Math.cos(curTime/dur*Math.PI/2)-1)*alter;
},
easeOut:function (start,alter,curTime,dur) {
return start+Math.sin(curTime/dur*Math.PI/2)*alter;
},
easeInOut:function (start,alter,curTime,dur) {
return start-(Math.cos(curTime/dur*Math.PI/2)-1)*alter/2;
}
},
Expo: {//指數(shù)曲線緩動(dòng)
easeIn:function (start,alter,curTime,dur) {
return curTime?(start+alter*Math.pow(2,10*(curTime/dur-1))):start;
},
easeOut:function (start,alter,curTime,dur) {
return (curTime==dur)?(start+alter):(start-(Math.pow(2,-10*curTime/dur)+1)*alter);
},
easeInOut:function (start,alter,curTime,dur) {
if (!curTime) {return start;}
if (curTime==dur) {return start+alter;}
var progress =curTime/dur*2;
if (progress < 1) {
return alter/2*Math.pow(2,10* (progress-1))+start;
} else {
return alter/2* (-Math.pow(2, -10*--progress) + 2) +start;
}
}
},
Circ :{//圓形曲線緩動(dòng)
easeIn:function (start,alter,curTime,dur) {
return start-alter*Math.sqrt(-Math.pow(curTime/dur,2));
},
easeOut:function (start,alter,curTime,dur) {
return start+alter*Math.sqrt(1-Math.pow(curTime/dur-1));
},
easeInOut:function (start,alter,curTime,dur) {
var progress =curTime/dur*2;
return (progress<1?1-Math.sqrt(1-Math.pow(progress,2)):(Math.sqrt(1 - Math.pow(progress-2,2)) + 1))*alter/2+start;
}
},
Elastic: {//指數(shù)衰減的正弦曲線緩動(dòng)
easeIn:function (start,alter,curTime,dur,extent,cycle) {
if (!curTime) {return start;}
if ((curTime==dur)==1) {return start+alter;}
if (!cycle) {cycle=dur*0.3;}
var s;
if (!extent || extent< Math.abs(alter)) {
extent=alter;
s = cycle/4;
} else {s=cycle/(Math.PI*2)*Math.asin(alter/extent);}
return start-extent*Math.pow(2,10*(curTime/dur-1)) * Math.sin((curTime-dur-s)*(2*Math.PI)/cycle);
},
easeOut:function (start,alter,curTime,dur,extent,cycle) {
if (!curTime) {return start;}
if (curTime==dur) {return start+alter;}
if (!cycle) {cycle=dur*0.3;}
var s;
if (!extent || extent< Math.abs(alter)) {
extent=alter;
s =cycle/4;
} else {s=cycle/(Math.PI*2)*Math.asin(alter/extent);}
return start+alter+extent*Math.pow(2,-curTime/dur*10)*Math.sin((curTime-s)*(2*Math.PI)/cycle);
},
easeInOut:function (start,alter,curTime,dur,extent,cycle) {
if (!curTime) {return start;}
if (curTime==dur) {return start+alter;}
if (!cycle) {cycle=dur*0.45;}
var s;
if (!extent || extent< Math.abs(alter)) {
extent=alter;
s =cycle/4;
} else {s=cycle/(Math.PI*2)*Math.asin(alter/extent);}
var progress = curTime/dur*2;
if (progress<1) {
return start-0.5*extent*Math.pow(2,10*(progress-=1))*Math.sin( (progress*dur-s)*(2*Math.PI)/cycle);
} else {
return start+alter+0.5*extent*Math.pow(2,-10*(progress-=1)) * Math.sin( (progress*dur-s)*(2*Math.PI)/cycle);
}
}
},
Back:{
easeIn: function (start,alter,curTime,dur,s){
if (typeof s == "undefined") {s = 1.70158;}
return start+alter*(curTime/=dur)*curTime*((s+1)*curTime - s);
},
easeOut: function (start,alter,curTime,dur,s) {
if (typeof s == "undefined") {s = 1.70158;}
return start+alter*((curTime=curTime/dur-1)*curTime*((s+1)*curTime + s) + 1);
},
easeInOut: function (start,alter,curTime,dur,s){
if (typeof s == "undefined") {s = 1.70158;}
if ((curTime/=dur/2) < 1) {
return start+alter/2*(Math.pow(curTime,2)*(((s*=(1.525))+1)*curTime- s));
}
return start+alter/2*((curTime-=2)*curTime*(((s*=(1.525))+1)*curTime+ s)+2);
}
},
Bounce:{
easeIn: function(start,alter,curTime,dur){
return start+alter-Tween.Bounce.easeOut(0,alter,dur-curTime,dur);
},
easeOut: function(start,alter,curTime,dur){
if ((curTime/=dur) < (1/2.75)) {
return alter*(7.5625*Math.pow(curTime,2))+start;
} else if (curTime < (2/2.75)) {
return alter*(7.5625*(curTime-=(1.5/2.75))*curTime + .75)+start;
} else if (curTime< (2.5/2.75)) {
return alter*(7.5625*(curTime-=(2.25/2.75))*curTime + .9375)+start;
} else {
return alter*(7.5625*(curTime-=(2.625/2.75))*curTime + .984375)+start;
}
},
easeInOut: function (start,alter,curTime,dur){
if (curTime< dur/2) {
return Tween.Bounce.easeIn(0,alter,curTime*2,dur) *0.5+start;
} else {
return Tween.Bounce.easeOut(0,alter,curTime*2-dur,dur) *0.5 + alter*0.5 +start;
}
},
easeOutBounce: function (b, c, t, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
},
//start,alter,curTime,dur
easeOutBounce: function (b, c, t, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
};
jQuery(function($){
//兩種動(dòng)畫方式對比，在w3c瀏覽器中是一致的，在IE中有差異（即使用同算法）
$("#start").click(function(){
//自定義動(dòng)畫函數(shù)
animate(Fid("song"), {opacity:0.3, left:400}, 2000, Tween.easeOutBounce);
//jq動(dòng)畫效果
$("#jian").animate( {opacity:0.3, left:400}, 2000, 'easeOutBounce')
})
/*
參數(shù)說明
o:要?jiǎng)赢嫷膶ο?
end:元素最終的樣式
dur:動(dòng)畫持續(xù)多長時(shí)
fx:效果插件
*/
function animate(o ,end, dur, fx) {
var curTime=0;
var start = {};//元素的初始樣式
var alter = {};//元素的增量樣式
var t=setInterval(function () {
if (curTime>=dur) clearTimeout(t);
for (var i in end) {
if(! (i in start))//注意加括號(hào)
{
//不能用 parseInt.有透明度時(shí)會(huì)出問題
start[i] = parseFloat(getStyle(o, i));
}
if(! (i in alter))
{
alter[i] = end[i] - start[i];
}
var val = fx(start[i],alter[i],curTime,dur);
if(i == 'opacity')
{
/**
o.style.filter, o.style.opacity 火狐下都為空字符串
只能用 o.style.opacity 檢測
注意：ietester下無法測試透明度
*/
if(typeof o.style.opacity == "undefined")
{
o.style.filter = "alpha(opacity="+val*100+")";
}else{
o.style[i] = val;
}
}else{
o.style[i] = val+'px';
}
}
curTime+=13; //jquery 中也為 13
},13);
}
/**
獲取元素樣式
處理透明度、元素浮動(dòng)樣式的獲取 ，結(jié)果帶有單位
*/
function getStyle(elem, name) {
var nameValue = null;
if (document.defaultView) {
var style = document.defaultView.getComputedStyle(elem, null);
nameValue = name in style ? style[name] : style.getPropertyValue(name);
} else {
var style = elem.style,
curStyle = elem.currentStyle;
//透明度 from youa
if (name == "opacity") {
if (/alpha\(opacity=(.*)\)/i.test(curStyle.filter)) {
var opacity = parseFloat(RegExp.$1);
return opacity ? opacity / 100 : 0;
}
return 1;
}
if (name == "float") {
name = "styleFloat";
}
var ret = curStyle[name] || curStyle[camelize(name)];
//單位轉(zhuǎn)換 from jqury
if (!/^-?\d+(?:px)?$/i.test(ret) && /^\-?\d/.test(ret)) {
var left = style.left,
rtStyle = elem.runtimeStyle,
rsLeft = rtStyle.left;
rtStyle.left = curStyle.left;
style.left = ret || 0;
ret = style.pixelLeft + "px";
style.left = left;
rtStyle.left = rsLeft;
}
nameValue = ret;
}
return nameValue === 'auto' ? '0px' : nameValue;
}
function camelize(s) {//將CSS屬性名轉(zhuǎn)換成駝峰式
return s.replace(/-[a-z]/gi,function (c) {
return c.charAt(1).toUpperCase();
});
}
function Fid(id)
{
return document.getElementById(id);
}
})
</script>
</head>
<style>
.main{ border:1px solid blue; height:350px;}
.pos {position:absolute; left:0px;top:50px; border:5px solid red; background:green;width:100px; height:100px;}
</style>
<body>
<div class="main">
<div id="song" class="pos" style="display:block;">song</div>
<div id="jian" class="pos" style="top:200px;">jian</div>
</div>
<button id="start">start</button>
</body>
</html>
完整實(shí)例代碼點(diǎn)擊此處本站下載。
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 用js實(shí)現(xiàn)的模擬jquery的animate自定義動(dòng)畫(2.5K)
- 深入理解jquery自定義動(dòng)畫animate()
- jQuery中使用animate自定義動(dòng)畫的方法
- Jquery 自定義動(dòng)畫概述及示例
- jQuery使用動(dòng)畫隊(duì)列自定義動(dòng)畫操作示例
- jQuery動(dòng)畫animate方法使用介紹
- jquery animate 動(dòng)畫效果使用說明
- JQuery動(dòng)畫animate的stop方法使用詳解
- jQuery實(shí)現(xiàn)圖像旋轉(zhuǎn)動(dòng)畫效果
- 分享8款優(yōu)秀的 jQuery 加載動(dòng)畫和進(jìn)度條插件
- Jquery中使用show()與hide()方法動(dòng)畫顯示和隱藏圖片
- jQuery三組基本動(dòng)畫與自定義動(dòng)畫操作實(shí)例總結(jié)
相關(guān)文章
解決checkbox的attr(checked)一直為undefined問題
需要做個(gè)一個(gè)全選的checkbox功能，遇到checkbox的attr("checked")一直為undefined，下面與大家分享下最終的解決方案2014-06-06
jQuery實(shí)現(xiàn)鼠標(biāo)雙擊Table單元格變成文本框及輸入內(nèi)容后更新到數(shù)據(jù)庫的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)雙擊Table單元格變成文本框及輸入內(nèi)容后更新到數(shù)據(jù)庫的方法,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁面元素及基于get實(shí)現(xiàn)ajax交互保存數(shù)據(jù)的相關(guān)技巧,需要的朋友可以參考下2015-11-11
jQuery實(shí)現(xiàn)鼠標(biāo)拖動(dòng)div改變位置、大小的實(shí)踐
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)拖動(dòng)div改變位置、大小的實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
jQuery實(shí)現(xiàn)的網(wǎng)頁豎向菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的網(wǎng)頁豎向菜單效果代碼,涉及jquery控制頁面元素簡單折疊與展開功能,非常簡單實(shí)用,需要的朋友可以參考下2015-08-08
酷炫jQuery全屏3D焦點(diǎn)圖動(dòng)畫效果
這篇文章主要介紹了一款非?？犰诺膉Query全屏3D焦點(diǎn)圖動(dòng)畫效果其特點(diǎn)是整個(gè)焦點(diǎn)圖基本是全屏顯示的，非常大氣，感興趣的小伙伴們可以參考一下2016-03-03
jQuery實(shí)時(shí)統(tǒng)計(jì)輸入框字?jǐn)?shù)及限制
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)時(shí)統(tǒng)計(jì)輸入框字?jǐn)?shù)及限制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
jQuery Ajax之$.get()方法和$.post()方法
load()方法通常用來從Web服務(wù)器上獲取靜態(tài)的數(shù)據(jù)文件，然而這并不能體現(xiàn)Ajax的全部價(jià)值。在項(xiàng)目中，如果需要傳遞一些參數(shù)給服務(wù)器中的頁面，那么可以使用$.get()或者$.post()方法（或者是后面要講解到的$.ajax方法）。2009-10-10
jQuery zclip插件實(shí)現(xiàn)跨瀏覽器復(fù)制功能
這篇文章主要介紹了jQuery zclip插件實(shí)現(xiàn)跨瀏覽器復(fù)制功能的方法，以及在實(shí)現(xiàn)過程中遇到的問題，感興趣的小伙伴們可以參考一下2015-11-11
jQuery模仿阿里云購買服務(wù)器選擇購買時(shí)間長度的代碼
jQuery仿阿里云購買服務(wù)器選擇時(shí)間長度,操作簡單，只需點(diǎn)擊所要選的時(shí)間段，對實(shí)現(xiàn)代碼感興趣的朋友參考下2016-04-04
淺談jQuery中對象遍歷.eq().first().last().slice()方法
本文給大家分析了jQuery中的對象遍歷.eq().first().last().slice()方法的使用，以及他們之間的區(qū)別，jQuery源碼中的使用。2014-11-11