练习js透明度动画的时候报了这样的错误：part2-opacity.html?_ijt=p2ei6la3k2jfia9gtb6od1s006:27 Uncaught TypeError: Cannot set property 'onmouseover' of null at window.onload
来源：2-2 JS透明度动画
Number_1
2018-06-12 09:43
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>透明度动画</title>
<style>
*{
padding: 0;
margin: 0;
}
.block{
width: 80px;
height: 80px;
filter:alpha(30);
opacity: 0.3;
background: #f00;
}
</style>
</head>
<body>
<div class="block"></div>
<script>
window.onload = function() {
var oDiv = document.getElementById('block');
oDiv.onmouseover=function(){
startMove(100);
};
oDiv.onmouseout=function(){
startMove(30);
};
};
var speed = 0;
var alpha = 30;
var timer = null;
function startMove(iTarget){
var oDiv = document.getElementById('block');
clearInterval(timer);
timer = setInterval(function(){
if(oDiv.alpha > iTarget){
speed = -10;
}else{
speed = 10;
}
if(oDiv.alpha == iTarget){
clearInterval(timer);
}else{
alpha += speed;
oDiv.style.filter = 'alpha(opacity:'+alpha+')'; // 兼容IE
oDiv.style.opacity = alpha/100; // Firefox Chrome
}
},30);
}
</script>
</body>
</html>
写回答
关注
1回答
-
- qq_无情胜有情_0
- 2018-06-14 00:19:22
大哥，你这是class="block",是类选择器啊，只能用document.getElementsByClassName("block")[0]来获取啊，还要看浏览器是否支持getElementsByClassName方法，不支持的话可以创建该方法
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113925 学习 · 1443 问题
相似问题
JS透明度动画的事
回答 3