                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS動畫效果

連式運動中，第四個參數無法運行；

<!DOCTYPE?html>
<html>
<head>
?<meta?charset="UTF-8">
?<title>完美框架</title>
?<style?type="text/css">
??body,ul{
???margin:?0px;
???padding:?0px;
??}
??ul,li{
???list-style:?none;
??}
??ul?li{
???width:?200px;
???height:?100px;
???background:?yellow;
???margin-bottom:?20px;
???opacity:?0.3;
???filter:?alpha(opacity:30);
???border:?2px?solid?red;
??}
?</style>
?<script?type="text/javascript">
?window.onload=function(){
??var?aLi?=document.getElementsByTagName('li');
??for?(var?i?=?aLi.length?-?1;?i?>=?0;?i--)?{
????aLi[i].timer=null;
???aLi[i].onmouseover=function(){
?????????????????startMove(this,'width',400,function(){
??????????????????startMove(this,'height',400);
?????????????????});
???}
???aLi[i].onmouseout=function(){
?????startMove(this,'width',200,function(){
??????????????????startMove(this,'height',200);
?????????????????});
???}??}
??}
??//var?timer=null;
??function?startMove(obj,attr,iTarget,fn){
???clearInterval(obj.timer);
???obj.timer=setInterval(function(){
????var?icur=0;
????if?(attr=='opacity')?{
?????//?statement
?????icur=Math.round(parseFloat(getStyle(obj,attr))*100);
????}
????else{
?????icur=parseInt(getStyle(obj,attr));
????}
????var?speed=(iTarget-icur)/8;
????speed=speed>0?Math.ceil(speed):Math.floor(speed);
???if?(iTarget==icur)?{
????clearInterval(obj.timer);
????if?(fn)?{
?????fn();
????}
???}else{
????if?(attr=='opacity')?{
?????obj.style.filter='alpha(opacity:'+(icur+speed)+')';
?????obj.style[attr]=(icur+speed)/100;
????}else{
????obj.style[attr]=icur+speed+'px';
???}
???}?
???},30);
???
??}
??function?getStyle(obj,attr){
???if(obj.currentStyle){
????//IE
????return?obj.currentStyle[attr];
???}
???else{
????//firefox
????return?getComputedStyle(obj,?false)[attr];
????}
??}
?</script>
</head>
<body>
?<ul>
??<li></li>
??<li></li>
??<li></li>
?</ul>
</body>
</html>

qq_棄子_0

2016-12-11

源自：JS動畫效果 5-1

關注問題我要回答

852

操作

收起

2 回答

rubyc 回答被采納 +3 積分
2016-12-11

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>完美框架</title>
????<style?type="text/css">
????????body,ul{
????????????margin:?0px;
????????????padding:?0px;
????????}
????????ul,li{
????????????list-style:?none;
????????}
????????ul?li{
????????????width:?200px;
????????????height:?100px;
????????????background:?yellow;
????????????margin-bottom:?20px;
????????????opacity:?0.3;
????????????filter:?alpha(opacity:30);
????????????border:?2px?solid?red;
????????}
????</style>
????<script?type="text/javascript">
????????window.onload=function(){
????????????var?aLi?=document.getElementsByTagName('li');
????????????for?(var?i?=?aLi.length?-?1;?i?>=?0;?i--)?{
????????????????var?all?=?aLi[i];
????????????????//alert(all);
????????????????aLi[i].timer=null;
????????????????//alert(aLi[i]);
????????????????aLi[i].onmouseover=function(){
????????????????????startMove(all,'width',400,function(){
//????????????????????????alert("kk");
????????????????????????startMove(all,'height',200);
????????????????????});
????????????????}
????????????????aLi[i].onmouseout=function(){
????????????????????startMove(all,'width',200,function(){
????????????????????????startMove(all,'height',200);
????????????????????});
????????????????}??}
????????}
????????//var?timer=null;
????????function?startMove(obj,attr,iTarget,fn){
????????????//alert(obj);
????????????clearInterval(obj.timer);
????????????obj.timer=setInterval(function(){
????????????????var?icur=0;
????????????????if?(attr=='opacity')?{
????????????????????//?statement
????????????????????icur=Math.round(parseFloat(getStyle(obj,attr))*100);
????????????????}
????????????????else{
????????????????????icur?=?parseInt(getStyle(obj,attr));
????????????????}
????????????????var?speed=(iTarget-icur)/8;
????????????????speed=speed>0?Math.ceil(speed):Math.floor(speed);
????????????????if?(iTarget==icur)?{
????????????????????clearInterval(obj.timer);
????????????????????if?(fn)?{
????????????????????????fn();
????????????????????}
????????????????}else{
????????????????????if?(attr=='opacity')?{
????????????????????????obj.style.filter='alpha(opacity:'+(icur+speed)+')';
????????????????????????obj.style[attr]=(icur+speed)/100;
????????????????????}else{
????????????????????????obj.style[attr]=icur+speed+'px';
????????????????????}
????????????????}
????????????},30);

????????}
????????function?getStyle(obj,attr){
????????????if(obj.currentStyle){
????????????????//IE
????????????????return?obj.currentStyle[attr];
????????????}
????????????else{
????????????????//firefox
????????????????return?getComputedStyle(obj,?false)[attr];
????????????}
????????}
????</script>
</head>
<body>
<ul>
????<li></li>
????<li></li>
????<li></li>
</ul>
</body>
</html>

我驗證了一下，是this傳參出問題了，aLi[i].onmouseover=function(){
?????????????????startMove(this,'width',400,function(){
??????????????????startMove(this,'height',400);
?????????????????});
?????????????????你這里第一個this傳參正確（this此時是objectHTMLLIElent對象），
?????????????????所以width能變，而第二個this則變成了window對象而不是
?????????????????objectHTMLLIElent對象（我也不明白為啥，我估計是getStyle函數中的最后一句
?????????????????getComputedStyle(obj,?false)[attr];）把this變成了window對象，因此第二個
?????????????????this傳參失敗。
????????????????我的解決辦法就是多定義了一個變量all，這樣就不會改變成window對象了！
????????????????你可以把我代碼中alert注釋正常運行，你就會明白了。