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 相关文章推荐
javascript英文日期(有时间)选择器
May 02 Javascript
用Javscript实现表单复选框的全选功能
May 25 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
Vue源码解析之数组变异的实现
Dec 04 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 Javascript
js面向对象方式实现拖拽效果
Mar 03 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实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
python使用SQLAlchemy操作MySQL
2020/01/02 Python
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
总经理办公室主任岗位职责
2013/11/12 职场文书
测控技术与仪器个人求职信范文
2013/12/30 职场文书
会计职业生涯规划书
2014/01/13 职场文书
关于圣诞节的广播稿
2014/01/26 职场文书
运动会口号8字
2014/06/07 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
人事任命通知
2015/04/20 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
python元组打包和解包过程详解
2021/08/02 Python