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 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
js判断是否是手机页面
Mar 17 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
vue-cli构建项目下使用微信分享功能
May 28 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
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
Python中线程编程之threading模块的使用详解
2015/06/23 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
python打造爬虫代理池过程解析
2019/08/15 Python
pycharm配置git(图文教程)
2019/08/16 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
什么是设计模式
2012/06/17 面试题
英语专业学生个人求职信范文
2014/01/06 职场文书
教师远程培训感言
2014/03/06 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
先进个人事迹材料
2014/12/29 职场文书
学雷锋倡议书
2015/01/19 职场文书