JS运动中级
链式运动框架
回调函数
运动停止时，执行函数
运动停止时，开始下一次运动
实际上就是在原先的move运动框架中添加了一个参数fnEnd，这个参数是一个函数，父函数的运动执行完后再执行fnEnd中的运动，形成了链式运动。
例子：土豆右下角菜单
这里只附上了js代码，详细的css样式代码和html代码可进入以下链接下载课件
window.onload=function ()
{
var oBtnShow=document.getElementById('but');
var oBtnClose=document.getElementById('btn_close');
var oBottom=document.getElementById('zns_bottom');
var oBox=document.getElementById('zns_box');
oBtnShow.onclick=function(){
startMove(oBottom,'right',0,function(){ //点击后先将右下角按钮的zns_bottom显示出来
oBox.style.display='block'; //再将zns_box显示出来
startMove(oBox,'bottom',0);
});
};
oBtnClose.onclick=function(){
startMove(oBox,'bottom',-315,function(){
oBox.style.display='none';
startMove(oBottom,'right',-165);
});
}
};
完美运动框架
多个值同时变化
setStyle同时设置多个属性
参数传递
- Json的使用
- for in 遍历循环
运用到运动框架
检测运动停止（标志变量）
//获取非行间样式--(详见深入了解深入了解JavaScript)
function getStyle(obj,name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,null)[name];
}
};
//完美多值运动框架 参数(物体，json{改变样式：目标值}，停止调用函数)
function startMove(obj, json ,fnEnd){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//如果全部样式运动都已达到目标值关闭当前定时器
var bStop=true; //假设：所有样式值都已达到
for(var attr in json)
{
var cur=0
//因为透明度不兼容此运动框架,所以要做单独处理
if(attr=='opacity')
{
cur=Math.round(parseFloat((getStyle(obj,attr))*100)); //物体当前透明度值,round四舍五入保留整数部分
}
else
{
cur=parseInt(getStyle(obj,attr)); //物体当前的样式值
}
var speed=(json[attr]-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//如果有样式未达到目标值，则将bStop置false
if(cur!=json[attr])
bStop=false;
//如果修改样式为透明度opacity,则作单独处理
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE
obj.style.opacity=(cur+speed)/100; //Chrome,FF
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fnEnd) fnEnd();
}
},30);
};
以上就是完美运动框架的JS代码
运动框架总结
运动框架演变过程
- startMove(iTarget) 运动框架
- startMove(obj,iTarget) 多物体
- startMove(obj,attr,iTarget) 任意值
- startMove(obj,attr,iTarget,fn) 链式运动——阶段性运动
- startMove(obj,json) 多值运动
- startMove(obj,json,fn) 完美框架运动
运动框架运用
运动框架应用
例子：幻灯片
window.onload=function ()
{
var oDiv=document.getElementById('play');
var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');
var oUl=oDiv.getElementsByTagName('ul')[0];
var now=0;
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onclick=function()
{
now=this.index;
tab();
};
}
//封装：小按钮点击样式改变，且图片转换
function tab()
{
//点击小按钮,先让所有小按钮都失去class
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].className='';
}
aBtn[now].className='active';
startMove(oUl,{top: -150*now});
}
//封装：如果图片为最后一张，下一张图片移到第一张
function next()
{
now++
if(now==aBtn.length)
{
now=0
}
tab();
}
//定时器实现图片自动播放
var timer=setInterval(next,2000);
//鼠标移入暂停,移出继续
oDiv.onmouseover=function()
{
clearInterval(timer);
}
oDiv.onmouseout=function()
{
var timer=setInterval(next,2000);
}
};
例子：新浪微博链式运动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微博效果</title>
<style>
*{margin: 0;padding: 0;}
#ul1{ 400px;height: 400px;border: 1px solid #000000;margin: 10px auto;overflow: hidden;}
#ul1 li{border-bottom: 1px #999999 dashed;padding: 5px;list-style: none;opacity: 0;filter: alpha(opacity:0);}
</style>
<script src="js/move_new.js"></script>
<script>
window.onload=function(){
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt1');
oBtn.onclick=function(){
var oLi=document.createElement('li');
oLi.innerHTML=oTxt.value;
oTxt.value='';
//防止出Bug,ul空则appendChild,非空则直接往里插
if(oUl.children.length>0)
{
oUl.insertBefore(oLi,oUl.children[0]);
}
else
{
oUl.appendChild(oLi);
}
//运动
var iHeight=oLi.offsetHeight;
oLi.style.height='0';
startMove(oLi,{height:iHeight},function(){
startMove(oLi,{opacity:100});
});
}
}
</script>
</head>
<body>
<textarea id="txt1" rows="4" cols="40"></textarea>
<input type="button" id="btn1" value="发布" />
<ul id="ul1">
<li>微博</li>
</ul>
</body>
</html>