求大神帮忙看看

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

z921129H

2016-04-09 15:29

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

<style>

 *{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 timer=null;var alpha=30;

function statrMove(target){

var Odiv=document.getElementById("div1");

clearInterval(timer);

timer=setInterval(function(){

var speed=0;

if(alpha>target)

{speed=-10;}

else

{speed=10;}

if(alpha==target)

{clearInterval(timer)}

else

{alpha=alpha+speed;//aipha+=speed

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

Odiv.style.opacity=alpha/100}},30)

}

</script>

</head>

<body>

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

</body>

</html>


写回答 关注

1回答

  • 灰鸟0
    2016-04-09 16:08:27

    我也是初学者,你的那个if(alpha==target)中的alpha不是当前的透明度啊

    灰鸟0

    额额,原来不是这个错误,我运行了一下,再看一下你写的代码,有两处写错了div.style.filter="alpha(opacity:"+alpha+")"; function statrMove(target){ 看到没?

    2016-04-09 16:24:45

    共 1 条回复 >

JS动画效果

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

113925 学习 · 1443 问题

查看课程

相似问题