JavaScript运动框架 多值运动(四)


Posted in Javascript onMay 18, 2017

多值运动,也就是对于某个对象来说,不仅仅只是其中一个属性值在变化,而是好多个,比如宽,高,字体,透明度等等同时变化

当然了,多值运动会产生一个问题,就是定时器何时关闭的问题!当然是所有的属性值都运动到目标值了才能清理定时器,也就是等最慢的。就好比十个人一起聚餐,不能等到来一个人就开吃!

前几篇讲的都是一个元素对象中某一个属性的运动,这次讲同一个元素对象中多个属性值的缓冲运动,那么每个属性都有个终点(目标点),我们把这些属性及其目标值写成一个对象的形式,或者是json状!容易产生的问题就是上面说的,这里用了共同的速度函数,但有的属性值从100 ?> 101, 有的属性值从100 ?> 600,你得等耗时最长的属性值到达目标值才能关闭该obj所拥有的定时器,设计的思路就是每次执行轮询函数设置一个bStob = true;在遍历扫描json中属性的时候,只要有没到到目标值的属性,就设为false,这样定时器就不会关闭,即使有的属性值已经到达终点,此时轮询依旧会执行扫描,只不过此时该属性运动速度为0了,也不会运动了。也就是之前:

if(attr == cur) {
 cleartInterval(obj.timer);
}

要增强为:

if (bStop) {
 clearInterval(obj.timer);
}
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>运动框架(四):多值运动</title>
 <style type="text/css">
 div {
  width: 100px;
  height: 100px;
  background: orange;
  margin: 10px;
  float: left;
 }
 </style>
</head>
<body>
 <div id="div1"></div>

 <script type="text/javascript">
 var oDiv = document.getElementById('div1');
 oDiv.onmouseover = function() {
  var json = {
  width: 600,
  height: 200,
  opacity: 30
  };
  startMove(this, json);
 };
 oDiv.onmouseout = function() {
  var json = {
  width: 100,
  height: 100,
  opacity: 100
  };
  startMove(this, json);
 };
 function getStyle(obj, attr) {
  if (obj.currentStyle) {
  return obj.currentStyle[attr];
  } else {
  return getComputedStyle(obj, false)[attr];
  }
 }

 function startMove(obj, json) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
  var bStop = true;
  for (var attr in json) {
   var cur = 0;
   if (attr === 'opacity') {
   cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
   } else {
   cur = parseInt(getStyle(obj, attr));
   }
   var speed = (json[attr] - cur) / 10;
   speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
   if (cur != json[attr]) {//凡是有未到达目标点的,一律不让定时器停下,否则有的属性不能到达目标值
   bStop = false;
   }
   if (attr === 'opacity') {
   cur += speed;
   obj.style.filter = 'alpha(opacity:' + cur + ')';
   obj.style.opacity = cur / 100;//Chrome,IE
   } else {
   obj.style[attr] = cur + speed + 'px';
   }
  }
  //整个循环结束后,仍然保持着true,说明没有没到达目标值的属性,也就是都到了
  if (bStop) {
   clearInterval(obj.timer);//说明所有的属性都到达了目标值
  }

  }, 30);
 }
 </script>
</body>
</html>

JavaScript运动框架 多值运动(四)

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

Javascript 相关文章推荐
jquery 选项卡效果 新手代码
Jul 08 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
微信小程序页面开发注意事项整理
May 18 #Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 #Javascript
微信小程序网络请求wx.request详解及实例
May 18 #Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 #Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 #Javascript
AngularJS折叠菜单实现方法示例
May 18 #Javascript
jQuery Validate 校验多个相同name的方法
May 18 #jQuery
You might like
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
php数组使用规则分析
2015/02/27 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
个人实用简单的自我评价
2013/10/19 职场文书
服装厂厂长岗位职责
2013/12/27 职场文书
纪念建党演讲稿范文
2014/01/13 职场文书
元旦晚会感言
2014/03/12 职场文书
《锄禾》教学反思
2014/04/08 职场文书
求职信怎么写
2014/05/23 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
捐书倡议书
2014/08/29 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
三八节活动主持词
2015/07/04 职场文书
《比的意义》教学反思
2016/02/18 职场文书
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
python全面解析接口返回数据
2022/02/12 Python
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
python中pycryto实现数据加密
2022/04/29 Python