我那错了?求指教。

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

小灰不坏

2015-06-17 22:17

<!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>

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.onmousemover = function(){

startMove(100);

}

oDiv.onmouseout = function(){

startMove(30);

}

}

var timer = 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(opacity:'+alpha+')';

oDiv.style.opacity = alpha/100;

}

},30)

}

</script>

</head>


<body>

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

</body>

</html>


写回答 关注

1回答

  • lymo
    2015-06-17 23:11:42
    已采纳
    oDiv.onmousemover  //mouseover打错了


    小灰不坏

    非常感谢!

    2015-07-16 16:44:28

    共 1 条回复 >

JS动画效果

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

113923 学习 · 1443 问题

查看课程

相似问题