JavaScript 封装动画库基础
🌙
手机阅读
本文目录结构
封装动画库
其实这不应该叫库，因为只有一个方法；
借用了以前封装DOM库中的setCss方法来设置的；
- 因为经常设置的，是
- 宽度
- 高度
- 距离左边位置
- 透明度
- 背景颜色
等这些的项；封装一个starMove的方法来处理这些；
startMove(ele, json, fnEnd){};
的其中ele，代表的是执行主体；json代表需要改变的样式，是一个json格式的对象；后面的fnEnd代表是回调函数；在事件发生的时候，同时回调一个函数；
动画库里面moveType 中是数学运算是网上搜的，并不是自己写的；
代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>动画移动</title>
<style>
#div1{
width: 200px;
height: 200px;
background: orange;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
overflow: auto;//固定高宽，出现滚动条的意思；
}
</style>
</head>
<body>
<div id="div1">ClickMe ComeOn</div>
</body>
</html>
<script>
var oDiv=document.getElementById("div1");
var jsonStr={
"left":"500",
"width":"100",
"height":"400",
"opacity":"30",
"background":"blue"
};
oDiv.onclick=function(){startMove(oDiv,jsonStr);};
function startMove(ele, json, fnEnd) {//json是一个包含样式的JSON格式字符串,也可以是对象格式；
var MAX=18;//如果是匀速运动，可以通过这个数控制匀速；如果是变速运动，则不需要这一行；
clearInterval(ele.timer);
ele.timer=setInterval(function (){
var booleanTarget=true;
for(var name in json) {//枚举JSON里面的属性和目标值；
var iTarget=json[name];//目标值；
if(name=='opacity') {//透明度因为要写兼容性处理,2种写法，所以opacity需要X100；
var cur=Math.round(parseFloat(setCss(ele, name))*100);
} else if(name=='background'){
var cur=json[name];
} else {
var cur=parseInt(setCss(ele, name));//对象的初始值；
}
var speed=(iTarget-cur)/5;//速度=(目标值-初始值)/一个数，属于减速运动；
speed=speed>0?Math.ceil(speed):Math.floor(speed);//减速运动的，速度的取整；
if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX;//如果是匀速，可以通过这个来控制速度；和上面的speed只能取一个计算；
if(name=='opacity') {//如果输入透明度，需要为80这种的，不能是0.8
ele.style.filter='alpha(opacity:'+(cur+speed)+')';
ele.style.opacity=(cur+speed)/100;
}else if(name=='background'){
ele.style[name]=cur;
} else {
ele.style[name]=cur+speed+'px';
}
if(cur!=iTarget) {
booleanTarget=false;
}
}
if(booleanTarget) {
clearInterval(ele.timer);
if(typeof fnEnd==="function") {
fnEnd();
}
}
}, 20);
}
function setCss(curEle,attr,value) {//设置CSS属性值和获取CSS；如果三个参数就是设置，2个参数就是获取；att是attribute的缩写；
if(typeof value==="undefined"){//如果有第三个参数，就是设置Css；如果没有就是获取Css；
var reg = /^(?:margin|padding|border|float|position|display|background|backgroundColor)$/;
var flag="getElementsByClassName" in document;
var value = flag ? window.getComputedStyle(curEle, null)[attr] : curEle.currentStyle[attr];
return !reg.test(attr) ? parseFloat(value) : value;
} else{
switch (attr) {
case "opacity":
curEle["style"][attr] = value;
curEle["style"]["filter"] = "alpha(opacity=" + (value * 100) + ")";
break;
case "zIndex":
curEle["style"][attr] = value;
break;
default:
curEle["style"][attr] = !isNaN(value) ? value += "px" : value;
}
}
};
</script>
