似乎没有效果,请大家指导一番

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

iFlowers

2018-12-22 22:19

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

body,div{

margin: 0;

padding: 0;

}

#div1{

width: 200px;

height: 200px;

background: red;

filter: alpha(opacity:30);

opacity: 0.3;

}

</style>

<script type="text/javascript">

window.onload(){

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

oDiv.onmouseover = 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>


写回答 关注

2回答

  • 慕数据0028241
    2019-03-08 21:56:33

    js代码写在head里,你写的是window.onload(){};写错了 应该是widow.onload=function(){}; 所有的js代码写在function里

  • 咳咳九思
    2018-12-28 01:19:11

    filter: alpha(opacity=30);

    window.onload=function(){

    }

    oDiv.style.filter = 'alpha(opacity='+alpha+')';

    javascript代码写在<head>里面:
    由于这时候网页主体(body)还未加载,所以这里适合放一些不是立即执行的自定义函数,立即执行的语句则很可能会出错(视浏览器而定)
    javascript代码写在<body>里面:
    这里可以放函数也可以放立即执行的语句,但是如果需要和网页元素互动的(比如获取某个标签的值或者给某个标签赋值),Javascript代码务必在标签的后面
    javascript代码写在<body>下面:
    这时候整个网页已经加载完毕了,所以这里最适合放需要立即执行的命令,而自定义函数之类的则不适合。

JS动画效果

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

113925 学习 · 1443 问题

查看课程

相似问题