opacity淡入淡出js代码

最新推荐文章于 2021-06-18 12:57:36 发布

FE焱黑C

最新推荐文章于 2021-06-18 12:57:36 发布

阅读量892

点赞数 1

分类专栏： web前端js代码文章标签： opacity淡入淡出 web前端js代码

本文链接：https://blog.csdn.net/qq_36771997/article/details/72831968

版权

web前端js代码专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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.οnlοad=function(){
var oDiv=document.getElementById('div1');
oDiv.οnmοuseοver=function()
{
startMove(90);
};
oDiv.οnmοuseοut=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>