老师已经给我们介绍了一个完美的运动框架
多物体运动>链式运动>多属性运动
假设链式步骤{}1,2,3.多属性同时运动a,b,c
老师的框架运行结构1:{a,b}>2:{a,b,c}>3:{a,b,c}
但是存在一种情况:对于一个物体而言,两条属性同时变化,而当第一个属性完成后接着一个链式第三个属性.此时第二个属性和第三个属性继续同步完成.
即: 1:{ 1.1:{a}>1.2:{c} , b }
时间轴例:
{aaaaaaa}>{cccccccc}
{bbbbbbbbbbbbbbb}
应该如何修改框架实现此种情况.
2018-06-18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
margin: 0px;
}
li {
width:200px;
height:50px;
list-style-type:none;
margin-bottom:10px;
background-color:brown;
filter:alpha(opacity=30);
opacity:0.3;
}
</style>
<script type="text/javascript">
window.onload = function(){
var li = document.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
li[i].timer=null;
li[i].onmouseover = function(){
startMove(this,{'width':400},function(obj){//这里的obj参数由startMobe方法调用回调那里传回来，方便解决这行的函数找不到对象的问题
startMove(obj,{'height':300,'opacity':100});//用了json同时实现高和透明度的修改
});
}
//鼠标移开
li[i].onmouseout = function(){
startMove(this,{'width':200,'height':50,'opacity':30});//用了json同时实现宽高透明度的修改
}
}
}
var alpha=30;
function startMove(obj,json,fn){
clearInterval(obj.timer);
var curStyle=0;
obj.timer = setInterval(function(){
var flag=true;//flag如果放在外面的话在计时器里面被修改之后就不会再变回true的值了，如果在计时器里面，每次计时都会把flag重新赋值true
for(var attr in json){
curStyle=(attr=='opacity')?Math.round(parseFloat(getStyle(obj,attr))*100):parseInt(getStyle(obj,attr));//这里把if（）｛｝else｛｝的判断是不是opacity写成一句了
var speed = (json[attr]-curStyle)/10;
speed = (attr=='opacity')?speed:(speed>0?Math.ceil(speed):Math.floor(speed));
if(curStyle!=json[attr]){//如果不能同时满足所有当前的属性值等于目标值就给flag赋值false
flag=false;
}
obj.style[attr]=(attr=='opacity')?(curStyle+speed)/100:(curStyle+speed+'px');
if(flag){
clearInterval(obj.timer);
if(fn){
fn(obj);//这里把obj做成参数主要是方便处理回调函数fn的对象问题
}
}
}
},30)
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,false)[attr];
}
}
</script>
</head>
<body>
<li id="li"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</body>
</html>--------------------------------------------------------------------------------------
花了大半天写好的，不知道有没有你想要的“第二个属性和第三个属性继续同步完成”
举报
