溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
昨天我們說了一下原生JS中常用的兼容性寫法，今天我們來說一下運動框架.
正常情況下我們要寫一個運動的效果會用到tween.js這么一個插件，這個東西不是一般人寫出來的，因為里面涉及的運動效果都是經過一堆數學的函數運算出來的，我們平常人是寫不出來的，所有我們就自己封裝一個運動框架，有什么問題改起來也方便，下面我們就開始封裝.
首先，我們先寫一個div，設置一些簡單的樣式，我們就拿這個div舉例子
如下代碼：
#div{
width: 100px;
height: 100px;
background: gold;
position: absolute;
left:0;
top:0;
opacity: 1;
}
然后我們就開始寫js代碼了，如下:
window.onload=function() {
var oDiv = document.getElementById("div");
var timer;
寫一個函數，方便以后用的時候直接調用就好了，首先先傳入幾個參(要運動的對象，變動的屬性，終點距離，運動總時間，回調函數)----今天的只是簡單的封裝一下，你也寫可以傳入一個json
function move(obj,name, target, dur,fn) {
// 總步數=總時間÷計時器設定的時間
var count = parseInt(dur / 30);
// 起始位置
var start = parseFloat(setStyle(obj,name));
// 總距離=傳入的距離-起始距離
var dis = target - start;
// 每步運動的距離=總距離÷總步數
var spen = dis / count;
// 定義起始步數
var n = 0;
timer = setInterval(function () {
n++;
// 把當前運動的位置保存
var cur=start + n * spen;
// 判斷屬性是不是透明度,透明度不用加單位
if(name=='opacity'){
obj.style[name]=cur;
// 兼容IE低版本,IE的透明度是1到100
obj.style.filter='alpha('+cur*100+')';
}else {
obj.style[name] = start + n * spen + "px";
}
// 判斷運動是否完成
if (n == count) {
// 完成后清除定時器,停止運動
clearInterval(timer);
// 判斷用戶是否傳入回調函數
fn && fn();
};
}, 30);
};
然后自己隨便寫一些調用回調函數，測試一下：
oDiv.onclick=function(){
move(oDiv,"left",600,1000,function(){
move(oDiv,'top',400,1000,function(){
move(oDiv,"width",300,1000,function(){
move(oDiv,"opacity",0,1000);
});
});
});
};
// 獲取非行間樣式
function setStyle(obj,name){
// 考慮兼容性問題
if(obj.currentStyle){//不兼容火狐和谷歌
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];//不兼容IE
};
};
};
好了，今天就先封裝到這里了，這只是簡單的封裝一下，明天我們會改進一下，比如參數太多、參數順序不能亂的問題，還有多次點擊計時器出現的Bug的問題，如果你有好的方法歡迎評論區留言，程序員之間就是要相互學習的，明天見，老鐵們!
以上這篇原生js封裝運動框架的示例講解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
