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 相关文章推荐
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
You might like
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
python中字典(Dictionary)用法实例详解
2015/05/30 Python
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
高中毕业自我鉴定
2013/12/22 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
病假条格式范文
2015/08/17 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技