無法執行鏈式運動,還報錯了
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8"?/>
????<title>多物體運動</title>
????<style?type="text/css">
????????*{margin:?0;padding:?0;}
????????li{list-style:none;width:?200px;height:?100px;background:?black;margin-bottom:?20px;border:?1px?solid?#f00;
????????????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,height:200},function(){
????????????????????????startMove(this,{opacity:100});
????????????????????});
????????????????}
????????????????li[i].onmouseout=function(){
????????????????????startMove(this,{width:200,height:100,opacity:30});
????????????????}
????????????}
????????????function?getStyle?(obj,attr){?return?obj.currentStyle?obj.currentStyle[attr]?:?getComputedStyle(?obj?)[attr];?}
????????????function?startMove(obj,json,fn){
????????????????
????????????????clearInterval(obj.timer);
????????????????obj.timer=setInterval(function(){
????????????????????var?iFlag=true;//假設所有運動都到達目標
????????????????????for(var?attr?in?json){
????????????????????//1.取當前值
????????????????????var?icur=0;
????????????????????attr=='opacity'??icur=Math.round(parseFloat(getStyle(obj,attr))*100)?:?icur=parseInt(getStyle(obj,attr));
????????????????????//2.計算速度
????????????????????var?speed=(json[attr]-icur)/10;
????????????????????speed=speed>0?Math.ceil(speed):Math.floor(speed);
????????????????????//3.檢測停止
????????????????????if(icur!=json[attr]){
????????????????????????iFlag=false;
????????????????????}
????????????????????if(attr=='opacity'){
????????????????????????????obj.style.filter='alpha(opacity:'+icur+speed+')';
????????????????????????????obj.style.opacity=(icur+speed)/100;
????????????????????????}else{
????????????????????????????obj.style[attr]=icur+speed+'px';
????????????????????????}????????????????????
????????????????????}
????????????????????if(iFlag){
????????????????????????clearInterval(obj.timer);
????????????????????????fn?&&?fn();
????????????????????}
????????????????},30)
????????????}
????????}
????</script>
</head>
<body>
????<ul>
????????<li></li>
????????<li></li>
????????<li></li>
????</ul>
</body>
</html>
哪位兄弟幫我看下
2017-12-30
getComputedStyle(?obj?)[attr];?}需要flase,getComputedStyle要兩個參數
2017-09-05
?getComputedStyle(?obj,false )[attr]第27行加上‘,false’