javascript运动项目1-----封装任意元素运动函数

首先看看演示效果
代码, 函数参数obj为当前想要变动的元素, changeData为想要变动的种类, 例如, func为元素动作结束后想要处理的函数例如向上面那个演示, 注意: opacity要乘以100, 原因见如下代码var div = document.getElementsByClassName(‘demo’)[0];
startMove(div, {width:200 ,

首先看看演示效果
例子

代码, 函数参数obj为当前想要变动的元素, changeData为想要变动的种类, 例如, func为元素动作结束后想要处理的函数

例如向上面那个演示, 注意: opacity要乘以100, 原因见如下代码

1
2
var div = document.getElementsByClassName('demo')[0];
startMove(div, {width:200 , height:200, left:100, top:100, opacity: 50}, function(){});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/*
* 运动函数模型
*/
function startMove(obj, changeData, func) {
clearInterval(obj.timer);
var iCurValue = 0;
var iSpeed = 0;
var bStop;
obj.timer = window.setInterval(function () {
bStop = true;//判断当前所有动作是否全部执行完毕
for(var name in changeData) {
console.log(name, changeData[name]);
if(name === 'opacity') {//对透明度进行处理时注意要扩大倍数, 否则容易造成bug
iCurValue = parseFloat(getStyle(obj, name)) * 100;
}else {
iCurValue = parseInt(getStyle(obj, name));
}
iSpeed = (changeData[name] - iCurValue) / 7;//缓冲运动效果
if(iSpeed > 0) {
iSpeed = Math.ceil(iSpeed);
}else{
iSpeed = Math.floor(iSpeed);
}
if(name === 'opacity') {
obj.style.opacity = (iCurValue + iSpeed) / 100;
}else{
obj.style[name] = iCurValue + iSpeed + 'px';
}
if(iCurValue !== changeData[name]) {
bStop = false;
}
}
if(bStop) {
//整个动作执行完毕
clearInterval(obj.timer);
func();//当全部动作执行完毕之后, 执行回调函数.
}
}, 30);
}
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!