/**
* 運動函數簡單封裝
* @param obj 要操作的對象
* @param json 存放要改變的屬性和目標值
* @param fn 回調函數，在前面的運動效果執行完之后，才回執行的函數
*/
function motion(obj, json,fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 當開關變量結果為true時，表示所有動作執行完畢，可以停止定時器，調用回調函數了
var onOff = true;
for ( var attr in json ){
var current = null;
// 獲取當前值
if (attr = "opacity") {
current = parseInt(getStyle(obj, attr)) * 100;
} else {
current = parseInt(getStyle(obj, attr));
};
// 計算速度
var speed = ( json[attr] - current ) / 7;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// 如果目標值和當前值不相等 繼續for循環
if (json[attr] != current) {
flag = false;
};
if (attr = "opacity") {
obj.style.opacity = ( current + speed ) / 100;
obj.style.filter = "alpha(opacity = " + ( current + speed ) + ")";
} else if (attr == "zIndex"){
obj.style.zIndex = json[attr];
}else {
obj.style[attr] = current + speed + "px";
};
};
// 判斷開關變量的停止條件
if( onOff ){
clearInterval(obj.timer);
if (fn) {
fn();
};
};
}, 50);};
/**
* 獲取非行內CSS樣式
* @param obj 要獲取的對象
* @param attr 要獲取的屬性
* @returns {Number}
*/
function getStyle(obj, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj.false)[attr];
} else {
return obj.currentStyle[attr];
};
};
自己封裝簡單的運動效果
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事?！?“怎么了？”我有些...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
推薦閱讀更多精彩內容
- 【蝴蝶效應】 蝴蝶效應:上個世紀70年代，美國一個名叫洛倫茲的氣象學家在解釋空氣系統理論時說，亞馬遜雨林一只蝴蝶...
- （一） 到新公司兩個多月，剛開始有點進入狀態的感覺，卻突然接到了一個新的通知：其中一位董事的兒子（同時也是我們的股...
- 又讀一遍書。真是執念啊，從13歲到16歲，18歲，直到生命的最后，即使最后一次見時，他用錢污辱了她，她也從來沒有怨...
