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 相关文章推荐
用jquery实现点击栏目背景色改变
Dec 10 Javascript
jquery队列函数用法实例
Dec 16 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
input框中的name和id的区别
Nov 16 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 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
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
js同源策略详解
2015/05/21 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
Python实现对字符串的加密解密方法示例
2017/04/29 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
pyqt5实现井字棋的示例代码
2020/12/07 Python
HEMA英国:荷兰原创设计
2018/08/28 全球购物
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
移动通信行业实习自我鉴定
2013/09/28 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
创先争优活动个人总结
2015/03/04 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
MySQL数据库表约束讲解
2022/06/21 MySQL
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android