因为是自己封装的运动函数,所以没有那些插件的功能多,所以请多多包涵。
因为我们要封装的是一个运动函数,所以我们要先确定一下我们要修改的是哪些样式，
function getStyle(obj,name){
if(obj.currentStyle){ /*判断一下是否支持浏览器*/
return obj.currentStyle[name]; /*不兼容火狐和谷歌*/
}else{
return getComputedStyle(obj,false)[name]; /*不兼容IE8···*/
}
}
因为我们要考虑兼容问题所以我们要先封装一个函数专门用来获取所需要的函数
之后我们要现考虑一下封装一个运动函数所需要的各种形参，首先我们要先确认一下要修改的是哪个元素，之后我们要考虑要修改的属性，还有运动时间，还有需要什么样的运动样式，还需不需要别的函数。所以我们要设置这些样式
function move(obj, json, dur, easing, fn) {}
之后我们要填写里面的内容了，要设置一个动画要先清除再运行，不然容易出bug。之后要先确认一下所需要多少次来执行，之后还要考虑一下要修改的元素属性不只是一个的情况，所以用数组来装，我们还要考虑一下要修改的元素的原先样式，还要将每一个初始属性和更改的属性值存储起来；还要计算一下执行的次数及进行到哪一步
clearInterval(obj.timer);
var count = parseInt(dur / 30);
var start = {};
var dis = {};
for(var name in json){
start[name] = parseFloat(getStyle(obj,name));
dis[name] = json[name] - start[name];
}
var n = 0;
之后我们需要使用间隔器了。而且考虑到复数运行的情况，我们需要添加到属性中的样式，并且计算次数，用循环来给每个属性添加样式，还要确认动画效果；我们还要考虑怎么形成动画样式，还要考虑透明的特殊性，判断一下是否有要添加的函数
obj.timer = setInterval(function () {
n++;
for(var name in json){
var a = n / count;
switch(easing){
case 'linear':
var cur = start[name] + a * dis[name];
break;
case 'ease-in':
var cur = start[name] + Math.pow(a,3) * dis[name];
break;
case 'ease-out':
var a = 1 - n / count;
var cur = start[name] + (1 - Math.pow(a,3)) * dis[name];
break;
}
var cur = start[name] + n * dis[name] / count;
if(name == 'opacity') {
obj.style[name] = cur;
obj.style.filter = 'alpha(' + cur * 100 + '>';
}else{
obj.style[name] = cur + 'px';
}
}
if (n == count) {
clearInterval(obj.timer);
fn && fn();
}
}, 30);
之后我们只需要将这个插件导入到自己的网页中，并且调用就行了
var oP = document.getElementsByTagName("p");
for(var i = 0; i < oP.length; i++){
oP[i].onmouseover = function(){
move(this,{width: 300,opacity: .2},500,'ease-in')
}
oP[i].onmouseout = function(){
move(this,{width: 50,height: 50,opacity: 1},500,'ease-out')
}
}