为什么出不来透明度

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

泰允西

2018-01-27 15:32

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>透明动画</title>

<style>

body,div{

margin: 0;

padding: 0;

}

#div1{

width: 200px;

height: 200px;

background: red;

filter:alpha(opacity:30);

opacity: 0.3;

}

</style>

<script>

window.onload=function(){

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


        oDiv.onmouseover=function(){


        startMove(100);


        }


        oDiv.onmouseout=function(){


        startMove(30);


        }

}

var tiemr=null;

var alpha=30;

function startMove(iTarget){

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

clearInterval(timer);

timer=setInterval(function(){

var speed=0;

if(alpha<iTarget){

speed=10;

}

else{

speed=-10;

}

if(alpha==iTarget){

clearInterval(timer);

}

else{

alpha +=speed;

oDiv.style.filter='alpha(opactiy:'+speed+')';

oDiv.style.opacity=alpha/100;

}

},30);

}

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>


写回答 关注

3回答

  • 泰允西
    2018-01-27 21:21:12

    非常谢谢^-^

  • 卜大星人
    2018-01-27 17:01:43

    timer=null的timer 也写错了


    泰允西

    感谢,

    2018-01-27 21:21:48

    共 1 条回复 >

  • 卜大星人
    2018-01-27 16:52:55

    倒数11行opacity错了,还有加的是alpha,不是speed

JS动画效果

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

113925 学习 · 1443 问题

查看课程

相似问题