one 第一个
function startMove(obj,target,attr){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var current = parseFloat(getStyle(obj,attr));
var speed = 0;
if(attr === 'opacity'){
speed = target-current>0?0.1:-0.1;
}else{
speed = target-current>0?5:-5;
}
if(target == current){
clearInterval(obj.timer);
}else{
if(attr === 'opacity'){
obj.style[attr] = current+speed;
}else{
obj.style[attr] = current+speed+'px';
}
}
},20)
}
//获取元素的属性
function getStyle(obj,attr){
if(window.getComputedStyle){
return window.getComputedStyle(obj,null)[attr];
}else{
return obj.currentStyle[attr];
}
}
//针对两种情况来进行一下整合,兼容性写法
应用第一个封装的js来实现的透明度的渐变的案例(多物体的淡入淡出)
Document
效果图
image.png
应用第一个封装的js来实现的多物体运动的案例
Document
如图
image.png
two 第二个
/**
*
* @param obj 运动的元素
* @param target 目标值
* @param attr 操作属性
* @param callback 回调函数
*/
//封装一个可以支持回调函数的运动函数
function startMove(obj,target,attr,callback){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//获取到元素的相关属性值
var current = parseFloat(getStyle(obj,attr));
var speed = 0;
if(attr === 'opacity'){
speed = target-current>0?0.1:-0.1;
}else{
speed = target - current>0?5:-5;
}
if(target === current){
clearInterval(obj.timer);
//执行回调函数
if(callback){
callback()
}
}else{
if(attr === 'opacity'){
obj.style[attr] = current+speed;
}else{
obj.style[attr] = current + speed +'px'
}
}
},20)
}
//封装获取元素属性的函数
function getStyle(obj,attr){
if(window.getComputedStyle){
return window.getComputedStyle(obj,null)[attr];
}else{
return obj.currentStyle[attr];
}
}
应用该封装的函数实现的一个物体的链式运动（完成一个动作，接下来执行另一个动作）
Document
如下图
image.png
three 第三个
/**
*
* @param obj 运动的元素
* @param json 键值对
* @param callback 回调函数
*/
function startMove(obj,json,callback){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = 0;
var flag = true;
for(var attr in json){
var current = parseFloat(getStyle(obj,attr));
if(attr === 'opacity'){
speed = json[attr]-current>0?0.1:-0.1;
}else{
speed = (json[attr] - current)/10; //
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// speed = json[attr]-current>0?5:-5;
}
if(json[attr] != current){
flag = false;
//设立这一个标志的目的：只要有属性没达到目标 就不能停止运动，以防某一个属性达到了目标值，其余的并没有，但是却停用了定时器
}
if(attr === 'opacity'){
obj.style[attr] = current+speed;
}else{
obj.style[attr] = current+speed+'px';
}
}
if(flag){
clearInterval(obj.timer);
if(callback){
callback();
}
}
},20)
}
function getStyle(obj,attr){
if(window.getComputedStyle){
return window.getComputedStyle(obj,null)[attr]
}else{
return obj.currentStyle[attr]
}
}
应用以上封装的函数来实现的一个物体得几个运动同时展开（完美运动）
Document
如图
image.png
image.png