                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

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

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

body,div{

margin: 0;

padding: 0;

}

#div1{

width: 200px;

height: 200px;

background: red;

filter: alpha(opacity:30);

opacity: 0.3;

}

</style>

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>

</body>

</html>

iFlowers

2018-12-22

源自：JS动画效果 2-2

关注问题我要回答

1002

操作

收起

2 回答

慕数据0028241
2019-03-08

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

0 回复有任何疑惑可以回复我~

收起回答

咳咳九思
2018-12-28

filter: alpha(opacity=30);

window.onload=function(){

}

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

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