一、动画函数初版：左右匀速移动目标距离
<script>
//封装移动元素函数:任意一个元素(element)左右匀速移动目标距离(target)
function animate(element,target){
//先清理定时器
clearInterval(element.timeId);
element.timeId=setInterval(function(){
//获取div的当前位置--数字类型,没有px
var current=element.offsetLeft;
//div每次移动多少像素
var step=10;
//判断当前位置和目标位置的大小
step=current<target?step:-step;
//每次移动后的距离
current+=step;
//判断当前移动后的位置是否到达目标位置
if(Math.abs(target-current)>Math.abs(step)){
//目标位置和当前位置的距离大于步数,继续移动
element.style.left=current+"px";
}else{
//目标位置和当前位置的距离大于步数,清除定时器
clearInterval(element.timeId);
//目标位置和当前位置的距离大于步数,直接移动到目标位置
element.style.left=target+"px";
}
},20);
}
</script>
<!-- 测试 -->
<input type="button" value="移动400" id="btn1">
<input type="button" value="移动800" id="btn2">
<div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:20px;"></div>
<script>
document.getElementById("btn1").onclick=function(){
animate(document.getElementById("dv"),400);
};
document.getElementById("btn2").onclick=function(){
animate(document.getElementById("dv"),800);
};
</script>
二、动画函数升级：左右缓动效果移动目标距离
<script>
//封装移动元素函数:任意一个元素(element)左右缓动效果移动目标距离(target)
function animate(element,target){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
var current=element.offsetLeft;
//利用这个可以制造缓动效果
var step=(target-current)/10;
//判断步数是否大于0,即是往左移动还是往右移动,大于0必须向上取整,不然永远到达不了目标值
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style.left=current+"px";
if(current==target){
clearInterval(element.timeId);
}
//测试代码
console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
},20)
}
</script>
<!-- 测试 -->
<input type="button" value="移动400" id="btn1">
<input type="button" value="移动800" id="btn2">
<div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:20px;"></div>
<script>
document.getElementById("btn1").onclick=function(){
animate(document.getElementById("dv"),400);
};
document.getElementById("btn2").onclick=function(){
animate(document.getElementById("dv"),800);
};
</script>
三、如何获取获取任意一个元素的任意一个样式属性的值
<script>
//获取任意一个元素的任意一个样式属性的值----->封装函数
//参数element------->元素
//参数attr------>元素的某个属性
//注意:1.判断是否支持某属性,直接window.getComputedStyle?不用(),不支持返回的是undefined,即false
//注意:2.访问对象属性的方法点语法或者中括号,此处用中括号["属性"]
function getStyle(element,attr){
return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
</script>
<div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:20px;"></div>
<script>
//原因,如果在style里面有个left属性值(没有设置position的情况下),利用offset是0,获取不到这个值
//所以可以使用下面两个属性:(支持不一样的浏览器)
//1.getComputedStyle(element,null),返回一个对象
var dv=document.getElementById("dv");
console.log(window.getComputedStyle(dv,null));
//2.element.currentStyle,返回一个对象
console.log(dv.currentStyle);
</script>
四、动画函数升级：增加一个任意的属性
<script>
//封装动画函数:增加一个任意的属性----添加参数attr
//参数element------->元素
//参数attr------->属性(用双引号)
//参数target------->目标值
function animate(element,attr,target){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
//获取一个元素的任意属性,必须装换为整数,而且是parseInt()方法
var current=parseInt(getStyle(element,attr));
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
//把current赋值给这个元素的值
element.style[attr]=current+"px";
if(current==target){
clearInterval(element.timeId);
}
//测试代码:
console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
},20)
}
//获取一个元素的任意属性的封装函数
function getStyle(element,attr){
return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
</script>
<input type="button" value="动画" id="btn">
<div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:50px;"></div>
<script>
document.getElementById("btn").onclick=function(){
animate(document.getElementById("dv"),"width",500)
};
</script>
五、动画函数升级：增加多个任意的属性
<script>
//封装动画函数:增加多个任意的属性----使用json对象
function animate(element,json){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
//遍历json对象
for(var attr in json){
//获取元素这个属性当前的值
var current=parseInt(getStyle(element,attr));
//当前的属性对应的目标值
var target=json[attr];
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style[attr]=current+"px";
}
//判断是否全部达到目标,达到目标则清除定时器等于current==target
if(current==target){
clearInterval(element.timeId);
}
//测试代码
console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
},20)
}
function getStyle(element,attr){
return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.current[attr];
}
</script>
<!-- 测试 -->
<input type="button" value="动画" id="btn">
<div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:50px;"></div>
<script>
document.getElementById("btn").onclick=function(){
animate(document.getElementById("dv"),{"width":200,"height":200,"top":100,"left":100});
};
</script>
六、动画函数升级：增加回调函数
<script>
//封装动画函数:增加回调函数----fn参数
function animate(element,json,fn){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
for(var attr in json){
var current=parseInt(getStyle(element,attr));
var target=json[attr];
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style[attr]=current+"px";
if(current==target){
clearInterval(element.timeId);
//前提,所有的属性都到达目标位置才能使用这个函数
if(fn){
fn();
}
}
//测试代码
console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
}
},20)
}
function getStyle(element,attr){
return window.getComputedStyle?window.getComputedStyle(element)[attr]:element.currentStyle[attr];
}
</script>
<!-- 测试 -->
<input type="button" value="动画" id="btn">
<div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:50px;"></div>
<script>
document.getElementById("btn").onclick=function(){
animate(document.getElementById("dv"),{"top":100,"left":100},function(){
animate(document.getElementById("dv"),{"width":200,"height":200,})
});
};
</script>
七、动画函数升级最终版：增加层级和透明度
<script>
//封装动画函数:增加层级和透明度-------json对象可以传入z-index和opacity
function animate(element,json,fn){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
for(var attr in json){
//判断attr这个属性
if(attr=="opacity"){//是opacity
//获取当前属性的透明度,并且放大100倍
var current=getStyle(element,attr)*100
//目标的透明度放大100倍
var target=json[attr]*100
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
//变化后的透明度再缩小100倍
element.style[attr]=current/100;
}else if(attr=="zIndex"){//是zIndex
element.style[attr]=json[attr];
}else{//普通的属性
var current=parseInt(getStyle(element,attr));
var target=json[attr];
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style[attr]=current+"px";
}
if(current==target){
clearInterval(element.timeId);
if(fn){
fn();
}
}
//测试代码
console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
}
},20)
}
function getStyle(element,attr){
return window.getComputedStyle?window.getComputedStyle(element)[attr]:element.currentStyle[attr];
}
</script>
<input type="button" value="动画" id="btn">
<div id="dv" style="width: 100px;height: 100px;background: red;position: absolute;left: 0;top:50px;"></div>
<script>
document.getElementById("btn").onclick=function(){
animate(document.getElementById("dv"),{"top":100,"left":100},function(){
animate(document.getElementById("dv"),{"width":200,"height":200,},function(){
animate(document.getElementById("dv"),{"opacity":0.2},function(){
animate(document.getElementById("dv"),{"top":0,"left":0,"opacity":1,"zIndex":-1})
})
});
});
};
</script>
八、案例运用