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 相关文章推荐
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
js网页右下角提示框实例
Oct 14 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
原生js实现购物车功能
Sep 23 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
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
中英文字符串翻转函数
2008/12/09 PHP
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
php单例模式的简单实现方法
2016/06/10 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
js三种排序算法分享
2012/08/16 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
Python Deque 模块使用详解
2014/07/04 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
python 实现图片裁剪小工具
2021/02/02 Python
Linux内核产生并发的原因
2012/07/13 面试题
门诊手术室工作制度
2014/01/30 职场文书
促销活动方案模板
2014/02/24 职场文书
农林环境专业求职信
2014/03/13 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
第一节英语课开场白
2015/06/01 职场文书
感恩的心主题班会
2015/08/12 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript