为了账号安全,请及时绑定邮箱和手机立即绑定

为什么没效果呢

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body {margin:0;}
.divs {
	width:200px;
	height:200px;
	background: red;
	opacity:0.3;
	filter:alpha(opacity:30);
	cursor:pointer;
	}
</style>
<script type="text/javascript">

window.onload = function(){
	var timer = null;
	var apa = 30;
	var oDiv=document.getElementsByClassName("divs")[0];
	function Alphas (iTarget){
	
		clearInterval(timer);
		var Speed = 0;
			if(iTarget>apa){
				Speed = 10;
			}else if(iTarget<apa){
				Speed = -10;	
			}
		
		timer = setInterval(function(){
			if(apa ==iTarget){
				clearInterval(timer)	
			}else{
				apa+=Speed;
				oDiv.style.opacity = apa/100;
				oDiv.style.filter="alpha(opacity:"+apa+")";
				//console.log(apa);
			}
		},20)
	oDiv.onmouseover=function(){
		Alphas(100);		
	}
	oDiv.onmouseout=function(){
		Alphas(30);	
	}	
	}
}

</script>
</head>

<body>
<div class="divs"></div>
</body>
</html>

为什么移入移出都没效果呢?怎么也找不到问题在哪 也不报错

正在回答

2 回答

挺多错误的, 最致命的错误是把所有的定义函数放在widow.onload下了,其次定时器也错了 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

body {margin:0;}

#divs {

    width:200px;

    height:200px;

    background:red;

    opacity:0.3;

    filter:alpha(opacity:30);

    cursor:pointer;

    }

</style>

<script type="text/javascript">


window.onload = function(){

    var oDiv=document.getElementById('divs');

oDiv.onmouseover=function(){

        Alphas(100);       

    }

    oDiv.onmouseout=function(){

        Alphas(30);

    }  

}



   var timer = null;

    var apa = 30;

    function Alphas (iTarget){

       clearInterval(timer);

var oDiv=document.getElementById('divs');

        timer= setInterval(function(){  //定时器

var Speed = 0;

            if(iTarget>apa){

                Speed = 10;

            }else if(iTarget<apa){

                Speed = -10; 

            }

            if(apa ==iTarget){

                clearInterval(timer)   

            }else{

                apa+=Speed;

                oDiv.style.opacity = apa/100;

                oDiv.style.filter="alpha(opacity:"+apa+")";

                //console.log(apa);

            }

        },20)

   

    }


 

</script>

</head>

 

<body>

<div id="divs"></div>

</body>

</html>


0 回复 有任何疑惑可以回复我~

var oDiv=document.getElementsByClassName("divs")[0];你这句话错了

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JS动画效果
  • 参与学习       113926    人
  • 解答问题       1443    个

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

进入课程

为什么没效果呢

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信