JS运动改变单物体透明度的方法分析


Posted in Javascript onJanuary 23, 2018

本文实例讲述了JS运动改变单物体透明度的方法。分享给大家供大家参考,具体如下:

除了通过改变物体的 宽,高,letf,top位置或者是运动方向来实现物体运动效果之外,改变物体的透明度,也是运动特效

<script>
  window.onload = function () {
    var oDiv = document.getElementById('div1');
    oDiv.onmousemove = function () {
      startMove(100);
    }
    oDiv.onmouseout = function () {
      startMove(30);
    }
}
var timer = null;
function startMove(iTarget) {
    clearInterval(timer);
    var oDiv = document.getElementById('div1');
    timer = setInterval(function(){
      if(oDiv.offsetAlpha == iTarget){
        ....
      }
    },30);
}
</script>

但是在js中只有offsetLeft/Top ,offsetWidth/Height,这四个方法,并没有offsetAlpha这个方法。

问:那么我们怎么来 获取当前物体的透明度那??

我们可以自己定义一个变量 var alpha  = 30;通过判断这个变量 是否和目标值是否相等,来继续我们下一步的操作;

var alpha = 30; // 自定义一个变量

当alpha 等目标值得时候,清楚定时器,否则就改变透明度的值alpha

if(alpha == iTarget){
   clearInterval(timer);
}else{
   alpha += iSpeed;
   oDiv.style.opacity = alpha/100;
   oDiv.style.filter = 'alpha(opacity:'+alpha+')';
}

完整的代码如下:

<div id="div1"></div>

css样式部分:

<style>
    #div1{
      width: 100px;height: 100px;
      background: green;
      opacity:0.3;
      filter:alpha(opacity:30);/*兼容低版本IE*/
    }
</style>

js部分:

<script>
  window.onload = function () {
    var oDiv = document.getElementById('div1');
    oDiv.onmousemove = function () {
      startMove(100);
    }
    oDiv.onmouseout = function () {
      startMove(30);
    }
  }
  var timer = null;
  var alpha = 30;
  function startMove(iTarget) {
    clearInterval(timer);
    var oDiv = document.getElementById('div1');
    var iSpeed = 0;
    timer = setInterval(function(){
      if(alpha>iTarget){
        iSpeed = -10;
      }else{
        iSpeed = 10;
      }
      if(alpha == iTarget){
        clearInterval(timer);
      }else{
        alpha += iSpeed;
        oDiv.style.opacity = alpha/100;
        oDiv.style.filter = 'alpha(opacity:'+alpha+')';
      }
    },30);
  }
</script>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
微信小程序用户授权最佳实践指南
May 08 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 #Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 #Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 #Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 #Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 #Javascript
浅谈vue项目重构技术要点和总结
Jan 23 #Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 #Javascript
You might like
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
JavaScript知识点整理
2015/12/09 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python与shell的3种交互方式介绍
2015/04/11 Python
基于python实现微信模板消息
2015/12/21 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
Python读写docx文件的方法
2018/05/08 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
python如何构建mock接口服务
2021/01/28 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
九年级家长会邀请函
2014/01/15 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
2014年妇联工作总结
2014/11/21 职场文书
施工安全员岗位职责
2015/04/11 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
被告代理词范文
2015/05/25 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫
设置IIS Express并发数
2022/07/07 Servers
Fluentd搭建日志收集服务
2022/09/23 Servers