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 相关文章推荐
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
javascript包装对象实例分析
Mar 27 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
JavaScript实现省市区三级联动
Feb 13 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 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
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
php桥接模式应用案例分析
2019/10/23 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
JS实现移动端在线签协议功能
2019/08/22 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
vue实现购物车列表
2020/06/30 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
python+django快速实现文件上传
2016/10/24 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
服务中心夜班服务员岗位职责
2013/11/27 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android