编程 Javascript

JS实现的透明度渐变动画效果示例

Posted in Javascript onApril 28, 2018

本文实例讲述了JS实现的透明度渐变动画效果。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
    <title>3water.com JS透明度变化效果</title>
    <style>
    body{
      margin: 0px;
      padding: 0px;
    }
    .redb{
      width:200px;
      height: 200px;
      background: red;
      filter:alpha(opacity=30);
      opacity: 0.3;
    }
    </style>
  </head>
  <body>
    <div class="redb" id="opbtn"></div>
    <script>
    window.onload = function(){
      var opDiv = document.getElementById("opbtn");
      opDiv.onmouseover = function(){
        startMove(100);
      }
      opDiv.onmouseout = function(){
        startMove(30);
      }
    }
    var timer = null;
    var alpha = 30;
    var speed = 0;
    function startMove(opTarget){
      clearInterval(timer);
      var opDiv = document.getElementById("opbtn");
      timer = setInterval(function(){
        if(alpha<opTarget){
          speed = 10;
        }
        else if(alpha>opTarget){
          speed = -10;
        }
        if(alpha==opTarget){
          clearInterval(timer);
        }
        else{
          alpha += speed;
          opDiv.style.opacity = alpha/100;
          opDiv.style.filter = 'alpha(opacity='+alpha+')';
        }
      },100);
    }
    </script>
  </body>
</html>

运行效果：

JS实现的透明度渐变动画效果示例

小结:

1、filter和opacity区别：w3c标准透明度就是opacity,filter只有IE才能用,其他浏览器都支持opacity
2、改变透明度时候，不能通过类似offsetLeft的方法获取透明度值，因此需要单独创建变量
3、不要忘记将定时器赋值给timer

希望本文所述对大家JavaScript程序设计有所帮助。

JS实现的透明度渐变动画效果示例

- Author -

爱吃番茄的西红柿

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Discuz! 6.1_jQuery兼容问题

Sep 23 Javascript

toggle一个div显示或隐藏且可扩展成自定义下拉框

Sep 12 Javascript

javascript if条件判断方法小结

May 17 Javascript

浅谈javascript的调试

Jan 28 Javascript

JavaScript中setUTCFullYear()方法的使用简介

Jun 12 Javascript

基于jquery实现智能提示控件intellSeach.js

Mar 17 Javascript

微信小程序简单教程实例详解

Jan 13 Javascript

详解Vue中localstorage和sessionstorage的使用

Dec 22 Javascript

Node.js 获取微信JS-SDK CONFIG的方法示例

May 21 Javascript

webpack 动态批量加载文件的实现方法

Mar 19 Javascript

weui上传多图片,压缩,base64编码的示例代码

Jun 22 Javascript

vue使用video插件vue-video-player详解

Oct 23 Javascript

JS实现的简单折叠展开动画效果示例

Apr 28 #Javascript

vue2.0+ 从插件开发到npm发布的示例代码

Apr 28 #Javascript

详解Angular5路由传值方式及其相关问题

Apr 28 #Javascript

详解Angular5 路由传参的3种方法

Apr 28 #Javascript

深入理解Vue nextTick 机制

Apr 28 #Javascript

jQuery实现的电子时钟效果完整示例

Apr 28 #jQuery

vue+jquery+lodash实现滑动时顶部悬浮固定效果

Apr 28 #jQuery