· 链式运动框架
//取非行间样式封装函数
function getStyle(obj,name)
{
if(obj.currentStyle)
{
//只兼容IE
return obj.currentStyle[name];
}
else
{
//不兼容IE,其他的可以
return getComputedStyle(obj,false)[name];
}
};
//传入三个参数,实现一个运动框架操作多个div不同的属性
//最后一个传入函数,实现链式运动框架
function startMove(obj,attr,iTarget,fnEnd)
{
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//简化代码,用变量存储取到的非行间样式,并且把他变成整数
var cur = 0;
if(attr=='opacity')
{
//对取出的opacity转化成小数然后乘以100然后四舍五入
cur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
cur =parseInt(getStyle(obj,attr));
}
var speed = (iTarget-cur)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if (cur==iTarget)
{
clearInterval(obj.timer);
if(fnEnd)fnEnd();
}
else
{
if(attr=='opacity')
{
//做浏览器兼容
obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';
obj.style.opacity = (cur+speed)/100;
}
else
{
obj.style[attr] = cur+speed+'px';
}
}
},30);
};
· 完美运动框架
//取非行间样式封装函数
function getStyle(obj,name)
{
if(obj.currentStyle)
{
//只兼容IE
return obj.currentStyle[name];
}
else
{
//不兼容IE,其他的可以
return getComputedStyle(obj,false)[name];
}
};
//用json实现每一个属性都循环一遍
function startMove(obj,json,fnEnd)
{
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var bStop=true; //假设所有的值已经到了
//json 用for in 循环
for(var attr in json)
{
//简化代码,用变量存储取到的非行间样式,并且把他变成整数
var cur = 0;
if(attr=='opacity')
{
//对取出的opacity转化成小数然后乘以100然后四舍五入
cur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
cur =parseInt(getStyle(obj,attr));
}
var speed = (json[attr]-cur)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
//如果有一个值没有到,就把bStop设为假的,执行下面的运动
if(cur!=json[attr])
bStop=false;
if(attr=='opacity')
{
//做浏览器兼容
obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';
obj.style.opacity = (cur+speed)/100;
}
else
{
obj.style[attr] = cur+speed+'px';
}
}
//如果所有的值都到了,就关闭定时器
if(bStop)
{
clearInterval(obj.timer);
if(fnEnd)fnEnd();
}
},30);
};
·微博发布效果 (创建元素、头部插入、运动框架应用显示)
oBtn.οnclick=function ()
{
//创建一个li,把文本框里面的内容给li,然后清空文本框的内容
var oLi = document.createElement('li');
oLi.innerHTML = oTxt.value;
oTxt.value='';
//头部插入判断
if(oUl.children.length>0)
{
oUl.insertBefore(oLi,oUl.children[0]);
}
else
{
oUl.appendChild(oLi);
}
//定义一个变量存放li的实际高度
var iHeight=oLi.offsetHeight;
//把li的高变成0
oLi.style.height='0';
//运动
startMove(oLi,{height:iHeight},function(){
startMove(oLi,{opacity:100});
});
};
笔记:
JS运动中级
·链式运动框架
1.回调函数
2.运动停止时,执行函数
3.运动停止时,开始下一次运动
例子:土豆网右下角菜单
·完美运动框架
1.多个值同时变化
2.setStyle同时设置多个属性
参数传递、Json的使用、for in遍历属性
3.运用到运动框架
例子:伸缩同时淡入淡出的菜单
·运动框架演变过程
startMove(iTarget) 运动框架
startMove(obj, iTarget) 多物体
startMove(obj, attr, iTarget) 任意值
startMove(obj, attr, iTarget, fn) 链式运动
startMove(obj, json) 多值运动
startMove(obj, json, fn) 完美运动框架
·运动框架应用
例子:
1.幻灯片
2.微博发布效果