我想用onoff=true判断,可是,写好后,效果不好,还是只要有一个属性到达目标值,timer就会停止?
请前辈帮看下用onoff=true部分的代码,麻烦帮解决下这个问题?谢谢
Demo
<br> *{margin:0;padding:0;}<br> html,body{width:100%;height:100%;}<br> #div1{width:100px;height:100px;background:#6633cc;position:absolute;left:200px;top:0;}<br>
</div>
<script>
window.onload=function(){
addPic();
}
function addPic(){
var div1=document.getElementById("div1");
//调用运动框架
uniformMove(div1,{width:200,height:300},5);//多属性运动
}
function uniformMove(obj,json,iSpeed,fn){
var timer=null;
var num=-iSpeed;
var iCur=0;
var iTarget=0;
var onoff=true;//判断每个属性是否到达目标
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var attr in json){
iTarget=json[attr];
iCur=getStyle(obj,attr);
if(iCur<iTarget){
if(Math.abs(iCur-iTarget)<iSpeed){
iSpeed=Math.abs(iCur-iTarget);
}
}else{
if(Math.abs(iCur-iTarget)<Math.abs(iSpeed)){
iSpeed=-Math.abs(iCur-iTarget);
}else{
iSpeed=num;
}
}
if(iCur==iTarget){
clearInterval(obj.timer);
if(fn){
fn();
}
}
else{
obj.style[attr]=iCur+iSpeed+"px";
}
}
},15);
}
function getStyle(obj,attr){
return parseFloat(getComputedStyle(obj,null)[attr]);//要用parseFloat
}
</script>
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。