JavaScript运动框架 多物体任意值运动(三)


Posted in Javascript onMay 17, 2017

前面两篇都是单物体的运动,本文开始讲多物体的运动,比如多个div的各自不同的属性如宽,高,字体大小,透明度的缓冲运动变化。

从本文起,就不再使用offsetWdith,offsetHeight了等等,因为会出现问题,比如加个border,offsetWidth就会出现严重问题,参见我个人的博客JavaScript中offsetWidth的'bug'及其对策解决方案就是封装getStyle(obj, attr) 函数,用了获取运动中的当前值!

function getStyle(obj, name) {
 if(obj.currentStyle) {//IE
 return obj.currentStyle[name];
 } else {
 return getComputedStyle(obj, false)[name];
 }
}

既然是各个物体各自运动,那么他们之间有些变量就不能共享,比如定时器,每个对象都应有自己的定时器,因为每次启动定时器的时候先要清除上一个定时器,这就导致如果第一个物体还在运动,就把鼠标移动到第二个物体,瞬间清除上个定时器,导致第一个物体的运动不能运动到目标值就停下

另外,物体运动的样式,基本上就两类:一类是大小也就是px为单位的属性,还有一类就是透明度!

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>运动框架(三):多物体运动</title>
 <style type="text/css">
 div {
 width: 100px;
 height: 100px;
 background: yellow;
 margin: 10px;
 float: left;
 filter: alpha(opacity:100);
 opacity: 1;
 }
 </style>
</head>
<body>
 <div id="div1">变高</div>
 <div id="div2">变宽</div>
 <div id="div3">fontSize Changed</div>
 <div id="div4">alpha</div>

 <script type="text/javascript">
 var doc = document;
 var oDiv1 = doc.getElementById('div1');
 oDiv1.onmouseover = function() {
 startMove(this, 'height', 300);
 };
 oDiv1.onmouseout = function() {
 startMove(this, 'height', 100);
 };

 var oDiv2 = doc.getElementById('div2');
 oDiv2.onmouseover = function() {
 startMove(this, 'width', 300);
 };
 oDiv2.onmouseout = function() {
 startMove(this, 'width', 100);
 };

 var oDiv3 = doc.getElementById('div3');
 oDiv3.onmouseover = function() {
 startMove(this, 'fontSize', 30);
 };
 oDiv3.onmouseout = function() {
 startMove(this, 'fontSize', 16);
 };

 var oDiv4 = doc.getElementById('div4');
 oDiv4.onmouseover = function() {
 startMove(this, 'opacity', 30);
 };
 oDiv4.onmouseout = function() {
 startMove(this, 'opacity', 100);
 };


 function getStyle(obj, attr) {
 if (obj.currentStyle) {
 return obj.currentStyle[attr];
 } else {
 return getComputedStyle(obj, null)[attr];
 }
 }

 function startMove(obj, attr, iTarget) {
 clearInterval(obj.timer);
 obj.timer = setInterval(function() {
 var cur = 0;
 if (attr === 'opacity') {
  cur = parseFloat(getStyle(obj, attr)) * 100;
 } else {
  cur = parseInt(getStyle(obj, attr));
 }
 var speed = (iTarget - cur) / 10;
 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 if (iTarget == cur) {
  clearInterval(obj.timer);
 } else {
  if (attr === 'opacity') {
  cur += speed;
  obj.style.filter = 'alpha(opacity:' + cur + ')';
  obj.style.opacity = cur / 100;//FireFox && Chrome
  } else {
  cur += speed;
  obj.style[attr] = cur + 'px'; 
  }

 }
 }, 30);
 }

 </script>
</body>
</html>

JavaScript运动框架 多物体任意值运动(三)

JavaScript运动框架 多物体任意值运动(三)

JavaScript运动框架 多物体任意值运动(三)

JavaScript运动框架 多物体任意值运动(三)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript闭包的理解和实例
Aug 12 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 #Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 #Javascript
vue之nextTick全面解析
May 17 #Javascript
Vue.js学习教程之列表渲染详解
May 17 #Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 #Javascript
深入理解Commonjs规范及Node模块实现
May 17 #Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 #Javascript
You might like
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
浅谈js原生拖放
2016/11/21 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
Python中分数的相关使用教程
2015/03/30 Python
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
Django--权限Permissions的例子
2019/08/28 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
上班迟到检讨书
2014/01/10 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android