欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

javascript匀速运动实现淡入淡出的效果(代码)

程序员文章站 2022-04-17 12:49:30
...
本篇文章给大家带来的内容是关于javascript匀速运动实现淡入淡出的效果(代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

原理

  • 在做p或者图片淡入淡出的时候,我们主要用到了透明度样式filter: alpha(opacity:30)兼容ie,opacity:0.3兼容火狐chrome。

  • 运动淡入淡出时用到了定时器setInterval;clearInterval;

  • js操作淡入淡出时用下面形式修改透明度op.style.filter="alpha(opacity:"+alpha+")";op.style.opacity=alpha/100;

注意:透明度无法直接在js中做判断,我们采用alpha参数做比较,最后应用到对象上。

实现div淡入淡出

<!DOCTYPE html>
<html>
  <head>
    <title>div淡入淡出</title>
    <style>
      #div1{
        width: 200px;
        height: 200px;
        background: red;
        /* ie */
        filter: alpha(opacity:30);
        /* chrome firefox */
        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;//透明度默认30
      function startMove(iTarget){
        var oDiv=document.getElementById("div1");
        clearInterval(timer);
        timer=setInterval(function(){
          var speed=0;
          if(alpha<iTarget){
            speed=5;
          }else{
            speed=-5;
          }
          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>

实现图片淡入淡出

<!DOCTYPE html>
<html>
  <head>
    <title>图片淡入淡出</title>
    <style>
      #img1{
        /* ie */
        filter: alpha(opacity:30);
        /* chrome firefox */
        opacity: 0.3;
        border: 1px solid #000;
      }
    </style>
    <script>
      window.onload=function(){
        var oImg=document.getElementById("img1");
        oImg.onmouseover=function(){
          startMove(100);
        }
        oImg.onmouseout=function(){
          startMove(30);
        }
      }
      var timer=null;
      var alpha=30;//透明度默认30
      function startMove(iTarget){
        var oImg=document.getElementById("img1");
        clearInterval(timer);
        timer=setInterval(function(){
          var speed=0;
          if(alpha<iTarget){
            speed=5;
          }else{
            speed=-5;
          }
          if(alpha===iTarget){
            clearInterval(timer);
          }else{
            alpha+=speed;
            oImg.style.filter="alpha(opacity:"+alpha+")";
            oImg.style.opacity=alpha/100;
          }
        },30);
      }
    </script>
  </head>
  <body>
    <img id="img1" src="img1.jpg" alt="">
  </body>
</html>

相关推荐:

javascript匀速运动实现侧边栏分享效果(代码)

js实现图片匀速淡入淡出

用jQuery实现广告滚动及淡入淡出

以上就是javascript匀速运动实现淡入淡出的效果(代码)的详细内容,更多请关注其它相关文章!

相关标签: javascript