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程序设计有所帮助。

Javascript 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
javascript下function声明一些小结
Dec 28 Javascript
基于jquery tab切换(防止页面刷新)
May 23 Javascript
微信小程序 教程之事件
Oct 18 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
react路由配置方式详解
Aug 07 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 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
You might like
PHP 强制下载文件代码
2010/10/24 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
php集成开发环境详解
2019/09/24 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
python利用requests库进行接口测试的方法详解
2018/07/06 Python
python爬取哈尔滨天气信息
2018/07/14 Python
django 微信网页授权登陆的实现
2019/07/30 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
python数值基础知识浅析
2019/11/19 Python
Python进行特征提取的示例代码
2020/10/15 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
金融专业个人求职信
2013/09/22 职场文书
好家长事迹材料
2014/01/23 职场文书
小学生综合素质评语
2014/04/23 职场文书
法律顾问服务方案
2014/05/15 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
老龙头导游词
2015/02/11 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
2015暑假假期总结
2015/07/13 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
选购到合适的激光打印机
2022/04/21 数码科技