慕粉3207663
2016-06-09 11:28
<head>
<title>透明度</title>
<meta http-eqiv="Content-Type" content='text/html;charset= utf-8'/>
<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.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>
写错了哥 window.onload=function(){} 你的括号少了;加上之后 运行没问题 如果再有问题可能就是浏览器了
这个用浏览器的控制台一看就知道了 会报错的
JS动画效果
113925 学习 · 1443 问题
相似问题