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向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
vue组件挂载到全局方法的示例代码
Aug 02 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
php通过COM类调用组件的实现代码
2012/01/11 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
vue webpack打包优化操作技巧
2018/02/22 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
python常规方法实现数组的全排列
2015/03/17 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
python3 爬取图片的实例代码
2018/11/06 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
django自带调试服务器的使用详解
2019/08/29 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
德国足球商店:OUTFITTER
2019/05/06 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
法务专员岗位职责
2014/01/02 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
民间个人借款协议书
2014/09/30 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
python开发实时可视化仪表盘的示例
2021/05/07 Python
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
解决redis批量删除key值的问题
2022/03/23 Redis
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers