编程 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 相关文章推荐

javascript制作的网页侧边弹出框思路及实现代码

May 21 Javascript

PHP结合jQuery实现红蓝投票功能特效

Jul 22 Javascript

Bootstrap打造一个左侧折叠菜单的系统模板(二)

May 17 Javascript

Webpack打包慢问题的完美解决方法

Mar 16 Javascript

javascript过滤数组重复元素的实现方法

May 03 Javascript

基于vue2框架的机器人自动回复mini-project实例代码

Jun 13 Javascript

手把手教你搭建ES6的开发运行环境

Jul 11 Javascript

JavaScript学习笔记之函数记忆

Sep 06 Javascript

promise和co搭配生成器函数方式解决js代码异步流程的比较

May 25 Javascript

js实现多个倒计时并行 js拼团倒计时

Feb 25 Javascript

你不可不知的Vue.js列表渲染详解

Oct 01 Javascript

JavaScript实现简单日历效果

Sep 11 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