找不到错误啊,感觉一样啊 ,透明度没反应

来源:2-2 JS透明度动画

慕粉1235143442

2017-04-16 19:14

<!DOCTYPE html>

<html>

<head>

<title>透明度</title>

<meta charset="utf-8">

<style type="text/css">

*{margin: 0;padding: 0;}

#box{

width: 200px;

height: 200px;

background: red;

opacity: 0.3;

cursor: pointer;

}

</style>

<script type="text/javascript">

window.onload=function(){

var box=document.getElementById('box');

box.ommouseover=function(){

setMove(100);

}

box.onmouseout=function(){

setMove(30);

}

}


//setMove

var timer=null,

alpha=30;

function setMove(target){

var box=document.getElementById('box');

clearInterval(timer);

timer=setInterval(function(){

var speed=alpha>target?-10:10;

if(alpha==target){

clearInterval(timer);

}

else{

alpha=alpha+speed;

box.style.opacity=alpha/100;

}

},30)

}


</script>

</head>

<body>

<div id="box"></div>

</body>

</html>


写回答 关注

1回答

  • 慕粉1235143442
    2017-04-16 19:25:11

    发现了,onmouseover的n写成了m,哭

JS动画效果

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

113925 学习 · 1443 问题

查看课程

相似问题