JS动画函数的封装
有很多常用的JavaScript功能实现,我们不妨将它们封装起来,方便以后的使用。
下面是我对JavaScript动画动画函数的封装,参考了其他人的博文,如果有冒犯,请联系我。
闲话少说,贴上demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JS动画demo与函数封装</title>
<style>
.parent{
width: 300px;height: 300px;
background: gray;
position: relative;
}
.son{
position: absolute;
width: 50px;
height: 50px;
background: rgb(100, 100,180);
}
</style>
</head>
<body>
<div class = "parent">
<div class="son">
</div>
</div>
<script>
window.onload = function(){
var parent = document.getElementsByClassName("parent")[0];
var son = document.getElementsByClassName("son")[0];
parent.addEventListener("mouseover",function(){
animate(son, { "left": 100 }, function () { });
},false);
parent.onmouseleave = function () {
animate(son, { "left":0 }, function () { });
}
}
</script>
<script>
// 获取当前制定样式的属性值
function getStyle(ele,attr){
if(window.getComputedStyle){ //兼容性检测,优先采用W3C标准
return window.getComputedStyle(ele,null)[attr];
}else{
return ele.currentStyle[attr]; //兼容Ie低版本浏览器
}
}
/*
* 缓动动画函数
* 原理:盒子原本的样式值 + "步长"(不断变化的值);达到目标值后停止缓动。
* ele:指定的节点对象
* attr_json:样式属性和值的集合(json对象格式,如{"width":200,"left":10})
* callback:回调函数,动画执行完后执行的函数
* 注意:如果控制 盒子的透明度 在本函数json属性集合中需要使用opacity,控制层级需要使用zIndex
* */
function animate(ele,attr_json,callback){
// 清除定时器,避免动画重合
clearInterval(ele.timer);
ele.timer = setInterval(function(){
var flag = true; //定时器是否清除的标记值
for(var attr in attr_json){
var current = 0;
//获取当前样式
if(attr == "opacity"){ //如果是透明度,那么返回值,如果不兼容就返回0
current = Math.round(parseInt(getStyle(ele,attr)*100))||0;
}else{ //其他
current = parseInt(getStyle(ele,attr));
}
//计算步长,并进行取整来避免除不尽引起的误差
var stepLength = (attr_json[attr] - current)/10;
stepLength = stepLength > 0?Math.ceil(stepLength):Math.floor(stepLength);
//判断要改变的样式是否是透明度
if(attr == "opacity"){
if("opacity" in ele.style){
ele.style.opacity = (current+stepLength)/100;
}else{
ele.style.filter = "alpha(opacity = " + (current+stepLength)*10+")";
}
}
//判断要改变的样式是否是层级
else if(attr == "zIndex"){
ele.style.zIndex = current+stepLength;
}
//其他属性
else{
ele.style[attr] = (current + stepLength) + "px";
}
//判断是否清除定时器
if(current != attr_json[attr]){
flag = false;
}
}
if(flag){
clearInterval(ele.timer);
if(callback){
callback();
}
}
},10)
}
</script>
</body>
</html>
可以贴到自己的编辑器下试试哦。
关于定时器,可以看看下面的js中的setInterval和setTimeout使用实例