1.改变某一个元素一段横向距离。匀速动画,可以匀速控制某一元素element移动到目标位置target 上;
//匀速动画
function animate(element, target) {
//清理定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//获取元素的当前位置
var current = element.offsetLeft;
//移动的步数
var step = 10;
step = target > current ? step : -step;
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timeId);
element.style.left = target + "px";
}
}, 20);
}
1.改变某一个元素一段横向距离。变速动画,可以变速(由快到慢)控制某一元素element移动到目标位置target 上;
变速原理 target-current/10;计算结果可能会产生小数,会出问题;所以这样解决,当步数为正数时向上取整Math.ceil(),当步数为负数时向下取整Math.floor()
//变速动画
function animate(element, target) {
//清理定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//获取元素的当前位置
var current = element.offsetLeft;
//移动的步数
var step = (target-current)/10;
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);
}
3.获取任意对象,改变其对象的某一属性的值
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
function getStyle(element,attr) {
return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
}
//element---元素
//json---对象---多个属性及多个目标值
//fn---函数
function animate(element,json,fn) {
clearInterval(element.timeId);
element.timeId=setInterval(function () {
var flag=true;//默认,假设,全部到达目标
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){
flag=false;
}
}
if(flag){
//清理定时器
clearInterval(element.timeId);
//所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
if(fn){
fn();
}
}
//测试代码
console.log("目标:"+target+",当前:"+current+",每次的移动步数:"+step);
},20);
}
4.获取任意对象,改变其对象的多一属性的值
//获取任意的一个属性的当前的属性值: left--->此时的left属性的值,width---当前的元素的宽
function getStyle(element,attr) {
//判断浏览器是否支持这个方法
return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
//匀速动画
//element---元素
//attr---属性名字
//target---目标位置
function animate(element,attr ,target) {
//清理定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//获取元素的当前位置
var current = parseInt(getStyle(element,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);
}
//测试代码:
console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
}, 20);
}
5.获取任意对象,改变其对象的多一属性的值 ,并可回调函数,也就是可以传入函数作为参数
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
function getStyle(element,attr) {
return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
}
//element---元素
//json---对象---多个属性及多个目标值
//fn---函数
function animate(element,json,fn) {
clearInterval(element.timeId);
element.timeId=setInterval(function () {
var flag=true;//默认,假设,全部到达目标
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){
flag=false;
}
}
if(flag){
//清理定时器
clearInterval(element.timeId);
//所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
if(fn){
fn();
}
}
//测试代码
console.log("目标:"+target+",当前:"+current+",每次的移动步数:"+step);
},20);
}
//调用。按钮button,id为bth。自行写html
my$("btn1").onclick=function () {
var json1={"width":400,"height":500,"left":500,"top":80};
animate(my$("dv"),json1,function () {
var json2={"width":40,"height":50,"left":50,"top":800};
animate(my$("dv"),json2,function () {
var json3={"width":450,"height":550,"left":550,"top":600};
animate(my$("dv"),json3);
});
});
};
6.终极版,还可以改变透明度和层级
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
function getStyle(element, attr) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
}
function animate(element, json, fn) {
clearInterval(element.timeId);//清理定时器
//定时器,返回的是定时器的id
element.timeId = setInterval(function () {
var flag = true;//默认,假设,全部到达目标
//遍历json对象中的每个属性还有属性对应的目标值
for (var attr in json) {
//判断这个属性attr中是不是opacity
if (attr == "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;//移动后的值
element.style[attr] = current / 100;
} else if (attr == "zIndex") { //判断这个属性attr中是不是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) {
flag = false;
}
}
if (flag) {
//清理定时器
clearInterval(element.timeId);
//所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
if (fn) {
fn();
}
}
//测试代码
console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
}, 20);
}
//zIndex:1000
//透明度: 数字类型----小数---放大100倍
my$("btn1").onclick = function () {
var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2};
animate(my$("dv"), json1, function () {
animate(my$("dv"), {"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000});
});
};