基于OO的動(dòng)畫附加插件,可以實(shí)現(xiàn)彈跳、漸隱等動(dòng)畫效果 分享
更新時(shí)間：2013年06月24日 11:33:07 作者：
基于OO的動(dòng)畫附加插件,可以實(shí)現(xiàn)彈跳、漸隱等動(dòng)畫效果 分享，需要的朋友可以參考一下
前言：前段時(shí)間一直都好忙也就好久沒(méi)有寫些東西了，最近手上的事剛好告些段落了，把以前空寫的寫插件都拿出來(lái)分享下吧，希望對(duì)大家有些幫助，也希望有高手能幫忙指點(diǎn)下我的寫不足和錯(cuò)誤，一直以來(lái)自己寫的東西都是在用，性能方面?zhèn)€人只能盡量靠近問(wèn)題還很多……真心求指點(diǎn)；
插件簡(jiǎn)介：執(zhí)行漸隱等動(dòng)畫效果，可以這個(gè)插件為一個(gè)附加插件 可以配合前面我發(fā)的一個(gè)彈出層 等等之類的東西用增加js展示的趣味性，
使用方法：在下面的js代碼里面前面寫了，大家可以看看直接復(fù)制粘貼就可以用了有問(wèn)題可以聯(lián)系我</p
JS代碼如下 展示方式可以復(fù)制下面的HTML查看
[javascript]
復(fù)制代碼 代碼如下:
/*
createByTommy_20110525
emial:@csslife@163.com
用途：
執(zhí)行漸隱等動(dòng)畫效果
傳入?yún)?shù)說(shuō)明：
1、第一個(gè)參數(shù)為需要變換對(duì)象或ID；
2、第二個(gè)參數(shù)為一個(gè)對(duì)象包含：
1)、sty->變換對(duì)象需要改變的屬性，默認(rèn)為改變寬度（也可以傳非style的屬性比如scrollTop等）
2)、curClass->變換對(duì)象完成改變后需要添加的當(dāng)前類,默認(rèn)為空
3)、maxVal->改變屬于的最大值，默認(rèn)為0（如果curClass為寬高等style屬性表示隱藏），當(dāng)這個(gè)要改變的屬性值達(dá)到時(shí)停止動(dòng)畫
4)、effect->執(zhí)行的動(dòng)畫效果默認(rèn)為outQuad，如需彈跳效果將其值設(shè)置為2
3、最后個(gè)參數(shù)為可選參數(shù)表示當(dāng)動(dòng)畫執(zhí)行完畢后運(yùn)行的回調(diào)函數(shù)
*/
//animation
var ani = function(){this.init.apply(this,arguments)}
ani.prototype = {
_id:function(i){
if(!i) return;
return typeof i != "string" && i.nodeType === 1 ? i : document.getElementById(i);
},
init:function(e,s,callback){
this.e = this._id(e);
this.setInit(s||{});
var maxS = parseInt(this.s.maxVal),speed = maxS==0?Math.max(this.getSty(this.e,this.s.sty),1):maxS/5;
this.fun(speed,maxS,callback)
},
formula:function(x){
var f;
switch(this.s.effect){
case 0:
f = "outQuad";
break;
case 1:
f = "inQuad";
break;
case 2:
f = "bounce";
break;
default:
f = "easeInBack";
}
this.tween ={
outQuad:function(pos){return Math.pow(pos, 2)},//outQuad
inQuad:function(pos){return -(Math.pow((pos-1),2)-1)},//inQuad
bounce:function(pos){//bounce
if (pos < (1 / 2.75)) {
return (7.5625 * pos * pos);
} else if (pos < (2 / 2.75)) {
return (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75);
} else if (pos < (2.5 / 2.75)) {
return (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
} else {
return (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);
}
},
easeInBack:function(pos){var s = 1.70158;return (pos) * pos * ((s + 1) * pos - s);}
};
return this.tween[f](x);
},
findAry:function(attr){
var rg = ["width","height","top","bottom","left","right","margin","padding"];
for(var z in rg){
if(rg[z]==attr) return true;
}
return false;
},
setInit:function(s){
this.s = {
sty:"width",
curClass:"",
maxVal:0,//效果最大值
effect:1//執(zhí)行效果
}
for(i in s) this.s[i] = s[i];
},
setSty:function(x){
var attr = this.s.sty;
if(this.findAry(attr)){
this.e.style[attr] = x + 'px';
var isIE6 = navigator.appVersion.indexOf("MSIE 6")>-1;
isIE6&&attr=="top"&&(this.e.style[attr] = x + document.documentElement.scrollTop + 'px');
}else if(attr=="opacity"){
this.s.maxVal===1&&(this.e.style.display = "block");
this.e.style.opacity = x;
this.e.style.filter = "alpha(opacity="+x*100+")";
}else{
this.e[this.s.sty] = x
}
},
getSty:function(e,s){
var val = e.currentStyle?e.currentStyle[s]:document.defaultView.getComputedStyle(e,null)[s];
return parseInt(val)||0;
},
fun:function(f,m,callback){
var D = Date,t = new D,e,T = 500,_this = this;
return e = setInterval(function() {
var z = Math.min(1, (new D - t) / T),
c = _this.s.curClass,
curC = _this.e.className;
_this.setSty( + f + (m - f) * _this.formula(z));
if (z == 1) {
if (callback && typeof callback == 'function') callback();
_this.s.maxVal==0&&(_this.e.getAttribute("style"))&&(_this.e.style.display="none");
if(c!=""&&curC.indexOf(c)<0)_this.e.className += c;
clearInterval(e);
}
},10);
}
}
這是這個(gè)js展示的第一個(gè)DEMO1:
[html]
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk">
<title>test</title>
<style>
div,h6,body{padding:0;margin:0;}
div,h6{font:bold 12px/24px 'Tahoma';text-indent:15px;}
.car-mod{position:relative;width:200px;}
.car-menu{width:200px;background:#c06;cursor:pointer;color:#fff;}
.car-box{border:2px solid #c06;width:300px;display:none;}
.car-box h6{background-color:#f5f5f5;background-image:-moz-linear-gradient(#f5f5f5,#fff);}
.things{border-top:1px solid #ccc;padding:50px 15px;}
</style>
</head>
<body>
<div class="car-mod" id="J_car_mod">
<div class="car-menu">購(gòu)物車</div>
<div class="car-box" id="J_car_box">
<h6>我的購(gòu)物車</h6>
<div class="things"></div>
</div>
</div>
<script src="animation.source.js"></script>
<script>
(function(){
//線上調(diào)用這個(gè)插件的時(shí)候直接調(diào)用animation.js這個(gè)是壓縮了的
var D = document,carMod = D.getElementById("J_car_mod"),carBox = D.getElementById("J_car_box"),carControl=true;
//移入顯示
carMod.onmouseover = function(even){
var even = even || window.event,target = even.target || even.srcElement;
if(target.className=="car-menu"){
!!carControl&&(carObj = new ani(carBox,{maxVal:1,sty:"opacity"},function(){carControl=false;}));
carObj = null;
}
//移出隱藏
this.onmouseout = function(even){
var e = even || window.event,
reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
while (reltg && reltg != this){reltg = reltg.parentNode;}
if(reltg != this){
!carControl&&(carObj1 = new ani(carBox,{maxVal:0,sty:"opacity"},function(){carControl=true;}));
carObj1 = null;
}
}
}
})()
</script>
</body>
</html>
這個(gè)是基于前面的那個(gè)彈出層的demo版本的效果，這個(gè)效果必須復(fù)制前面的彈出層的js哦部分代碼如下
[html]
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>彈出層事例</title>
<style>
div{padding:0;margin:0;}
.wra{margin:0 auto;width:1000px;overflow:hidden;}
.menu{border:1px solid #ccc;background:#000;color:#fff;width:250px;height:30px;font:14px/30px '微軟雅黑';text-align:center;text-shadow:1px 1px 2px #f5f5f5;cursor:pointer;}
.con{border:1px solid #000;background:#fff;padding:30px;width:500px;height:200px;position:fixed;top:-150%;left:50%;margin:-100px 0 0 -250px;display:none;z-index:999;}
.close{display:block;position:absolute;right:10px;top:10px;cursor:pointer;font:bold 14px Arial;-moz-transition:-moz-transform .5s ease-in 0s;}
.close:hover{-moz-transform:rotate(360deg);}
</style>
<style>
</style>
</head>
<body>
<div class="wra">
<div id="J_popup" class="menu">點(diǎn)擊彈出層</div>
<div id="J_popup_con" class="con">
<span id="J_colse" class="close" title="關(guān)閉">X</span>
彈出層內(nèi)容
</div>
<script src="popup.js"></script>
<script src="animation.source.js"></script>
<script>
var D = document,m = D.getElementById("J_popup"),con = D.getElementById("J_popup_con"),cl = D.getElementById("J_colse");
new Popup(m,con,cl,{addFun:function(){new ani("J_popup_con",{sty:"top",maxVal:"350",effect:2})},callBack:function(){con.style.display="block";new ani("J_popup_con",{sty:"top",maxVal:"0"})}})
</script>
</div>
</body>
</html>
相關(guān)文章
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹實(shí)現(xiàn)查找最小值、最大值、給定值算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹實(shí)現(xiàn)查找最小值、最大值、給定值算法,涉及javascript二叉樹定義、賦值、遍歷、查找等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
JavaScript函數(shù)防抖動(dòng)debounce
這篇文章主要介紹了JavaScript函數(shù)防抖動(dòng)debounce，防抖動(dòng)作用防止在短時(shí)間內(nèi)過(guò)于頻繁的執(zhí)行相同的任務(wù)，更多相關(guān)內(nèi)容需要的小伙伴可以參考一下2022-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)彈出菜單功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
原生JS實(shí)現(xiàn)點(diǎn)擊數(shù)字小游戲
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)點(diǎn)擊數(shù)字小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
JavaScript實(shí)現(xiàn)鼠標(biāo)滾輪控制頁(yè)面圖片切換功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)滾輪控制頁(yè)面圖片切換功能,涉及javascript事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-10-10
用過(guò) Google 地圖的人可能都很熟悉，通過(guò)滾動(dòng)滾輪可以對(duì)地圖進(jìn)行縮放，非常地方便。適當(dāng)?shù)厥褂脻L輪事件可以帶來(lái)不錯(cuò)的用戶體驗(yàn)。2010-03-03
Javascript圖像處理—圖像形態(tài)學(xué)(膨脹與腐蝕)
上一篇文章，我們講解了圖像處理中的閾值函數(shù),這一篇文章我們來(lái)做膨脹和腐蝕函數(shù)2013-01-01
用json方式實(shí)現(xiàn)在 js 中建立一個(gè)map
這篇文章主要介紹了用json方式實(shí)現(xiàn)在javascript / js 中建立一個(gè)map,需要的朋友可以參考下2014-05-05
HTML5開發(fā)Kinect體感游戲的實(shí)例應(yīng)用
這篇文章主要介紹了HTML5開發(fā)Kinect體感游戲的實(shí)例應(yīng)用的相關(guān)資料,希望通過(guò)本文能夠幫助到大家，需要的朋友可以參考下2017-09-09
Bpmn.js activiti 流程編輯器詳細(xì)教程
流程編輯器是一種用于創(chuàng)建、編輯和管理流程圖的工具,它提供了一個(gè)可視化的界面,使用戶能夠以圖形化的方式定義和配置流程的各個(gè)步驟、條件和流程間的關(guān)系,說(shuō)明關(guān)于bpmn.js的一些事件, 通過(guò)本文你可以了解到,感興趣的朋友一起看看吧2023-10-10