利用Js中的定时器实现图片的淡入淡出

最新推荐文章于 2020-11-12 17:45:03 发布

前端小白进阶

最新推荐文章于 2020-11-12 17:45:03 发布

阅读量1.1k

点赞数

文章标签： Js 定时器(setInterval) 图片的淡入淡出

本文链接：https://blog.csdn.net/qq_26102281/article/details/83895964

版权

本文介绍了如何使用JavaScript的setInterval定时器来实现图片的淡入淡出效果，详细解析了相关代码逻辑和实现步骤，帮助读者理解动态改变图片透明度以达到视觉上的平滑过渡。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #div1
    {
      height: 200px;
      width: 200px;
      background: #222222;
      filter: alpha(opacity:30);/**/
      opacity:0.3;/*不支持IE浏览器*/
    }
  </style>
</head>
<body>
  <div id="div1">
  </div>
  <script>
    var oDiv = document.getElementById('div1');
    var timer = null;
    var alpha = 30;/*alpha应该设置为全局变量*/
    var speed = 0;
    oDiv.onmouseover = function ()
      {
        startMove(100);
      };
    oDiv.onmouseout = function ()
    {
      startMove(30);
    };
      function startMove(iTarget)
      {
        clearInterval(timer);
        timer = setInterval(function ()
        {
          if (alpha < iTarget)
          {
            speed = 10;
          }
          else
            {