opacity淡入淡出js代码

来源：互联网发布：mac 比较好用的3d软件编辑：程序博客网时间：2024/05/14 09:49

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
#div1{ width: 150px;height: 150px;background: blue; filter: alpha(opacity:30);opacity: 0.3;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function()
{
startMove(90);
};
oDiv.onmouseout=function(){
startMove(10);
};
}
//设一个全局变量 timer=null;
var timer=null;
// var speed=0;
// var opa=30;
function startMove(iTarget){
var oDiv=document.getElementById('div1');
//每开始一个时间事件，清除timer
clearInterval(timer);
var speed=0;
var opa=30;
// var opa=30 必须写到setInterval外面; 而var speed=0,可以写在setInterval外面;也可在setInterval里面;还可以是全局变量放在startMove外面;也可以不写
timer=setInterval(function(){
// var speed=0;
if(iTarget<30)
{
speed=-2;
}
else
{
speed=2;
}
if (opa==iTarget)
{
clearInterval(timer);
}
else
{
opa = opa + speed;
//ie低版本支持filter;不支持opacity
oDiv.style.filter='alpha(opacity: '+opa+' )';
oDiv.style.opacity=opa/100;
}
},30)
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>

阅读全文

1 0