opacity淡入淡出js代码

最新推荐文章于 2023-01-03 20:58:06 发布

FE焱黑C

最新推荐文章于 2023-01-03 20:58:06 发布

阅读量971

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qq_36771997/article/details/72831968

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

11 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS及JavaScript实现的简单效果：当鼠标悬停在一个蓝色方块上时，其透明度会发生变化。该效果通过设置不同的目标透明度并在鼠标移入和移出时平滑过渡来实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>