多物体多种样式的运动简略分析

上面忘了介绍多物体的多种样式的运动,比如让一个物体宽度,另外一个的高度或者透明度发生改变,这样用单个运动框架就不能实现,我们在函数体类再传入一个参数,指定需要改变的样式,这样基本能实现功能需要,下面还是通过一个小例子来简要说明一下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div { width: 100px;height: 50px;background: red;margin-top: 30px; border: 3px solid black; font-size: 14px;}
</style>
<script type="text/javascript">
window.onload = function(){

var oDiv = document.getElementsByTagName(‘div‘);
var i=0;
oDiv[0].onclick = function()              //单独设置每个div的点击样式,这样更直观的展示效果
{
setMove(this,‘width‘,300);              //这里的样式都不相同,但现在都可以通过一个框架来实现
}
oDiv[1].onclick = function()
{
setMove(this,‘height‘,200);
}
oDiv[2].onclick = function()
{
setMove(this,‘font-size‘,100);
}
};

//获取div的宽度,代替offsetWidth,这样边框就不会有影响
function getStyle(obj,arr){                      //两个参数,第一个是获取谁的,第二个时什么样式
if(obj.currentStyle){
return obj.currentStyle[arr];
}else{
return getComputedStyle(obj,false)[arr];              //里面有两个参数,第一个是获取谁的,第二个参数不为空就行,后面是获取样式
}
}

function setMove(obj,arr,iTarget){                  //设置多个参数,第二个参数为要改变的样式,第三个为要设定的目标值
var timer = null;
clearInterval(obj.timer);                       //关闭已有的定时器
obj.timer = setInterval(function(){                  //为当前div设置定时器
  var iCurr = parseInt(getStyle(obj,arr));              //这里就是获取的当前div的样式值
  var iSpeed = (iTarget-iCurr)/8;
  iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);     //将当前的速度转化成整型值
//Math.ceil向上取整,Math.floor向下取整
  if(iCurr==iTarget){
  clearInterval(obj.timer);                     //如果已达到目标值,则清除当前div的定时器
}else{
obj.style[arr]= iCurr+iSpeed+‘px‘;                  //将div的样式以一定速度变化
}
},30);                               //每30毫秒就变化一次
}
</script>
</head>
<body>
<div></div>
<div></div>
<div>asdf</div>
</body>
</html>

这个小例子就可以实现多个物体通过一个框架来实现不同的运动形式,通过添加要变化的样式这个参数来实现不同的形式。到这儿,我们就可以封装一个运动的框架,

function setMove(obj,arr,iTarget){                  //设置多个参数,第二个参数为要改变的样式,第三个为要设定的目标值
var timer = null;
clearInterval(obj.timer);                       //关闭已有的定时器
obj.timer = setInterval(function(){                  //为当前div设置定时器
  var iCurr = parseInt(getStyle(obj,arr));              //这里就是获取的当前div的样式值
  var iSpeed = (iTarget-iCurr)/8;
  iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);     //将当前的速度转化成整型值
//Math.ceil向上取整,Math.floor向下取整
  if(iCurr==iTarget){
  clearInterval(obj.timer);                     //如果已达到目标值,则清除当前div的定时器
}else{
obj.style[arr]= iCurr+iSpeed+‘px‘;                  //将div的样式以一定速度变化
}
},30);                               //每30毫秒就变化一次
}

上面这个函数,我们就可以单独封装起来,以后就可以引入就行,节省了资源。当然,后面会介绍连续运动的框架。

时间: 2024-10-24 00:25:55

多物体多种样式的运动简略分析的相关文章

cc2530 makefile简略分析 &lt;contiki学习之三&gt;

前面将contiki的makefile框架都理了下,这篇就以cc2530为收篇吧,也即makefile分析就该到此为止了. contiki/examples/cc2530dk 打开Makefile如下图: 第一行的 "CONTIKI_PROJECT"变量依赖于该目录下的  blink-hello.c  hello-world.c  sensors-demo.c  timer-test.c 4个C源文件 第五行的"CONTIKI"变量被定义成 contiki/ 路径,

Unity游戏开发的数学与物理 1 ( 物体延水平方向运动 )

物体延水平方向运动 工程实现需注意: - 摄像机的设置 Projection Orthographic - Start() 和 Update()的执行顺序与执行次数 - 屏幕坐标与空间坐标的转换 - 关于Time.deltaTime - x += v; v = -v; using UnityEngine; using System.Collections; //匀速运动 public class UnirormMotionTest : MonoBehaviour { //物体的位置 float

poi设置一个Excel单元格的内容为多种样式的方法

有的时候我们POI操作Excel时,需要将Excel单元格的内容设置为多种样式,比如:设置单元格的内容为两种颜色,方法如下: //定义字体 HSSFFont redFont = (HSSFFont) workbook.createFont(); redFont.setColor(HSSFColor.RED.index);// 红色 HSSFFont blueFont = (HSSFFont) workbook.createFont(); redFont.setColor(HSSFColor.BL

多种临时表效率的对比分析

多种临时表效率的对比分析 老帅(20141107) 平时在写存储过程的时候,经常会用到临时表,而临时表的用法到底有几种,哪种效率更好呢?我们来做个对比分析. 实验数据:表a有400万条记录,只查询一个字段Title 1.  直接查询 --开启时间分析 SET STATISTICS TIME ON GO --查询 SELECT Title FROM a --结果 SQL Server 执行时间:占用时间 = 22013 毫秒. 2.变量表 --开启时间分析 SET STATISTICS TIME

Javascript 多物体运动——逐行分析代码,让你轻松了运动的原理

我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题. <style type="text/css"> div { width: 100px; height: 50px; background: red; margin: 10px; } </style> <body> <div></div> <div></div> <div></div> </body>

Javascript 学习笔记 缓冲运动——逐行分析代码,让你轻松了解缓冲运动的原理

看过上一篇关于Javascript 匀速运动文章的朋友相信对于运动已经有了初步的了解 接下来 讲一下关于缓冲运动的原理 ,我会逐行分析代码,代码简单易懂,能马上理解其中的原理,适用于初学者. #div1 { width: 100px; height: 100px; position: absolute; background: red; top: 50px; left: 0; /*600 初始值*/ } #div2 { width: 1px; height: 300px; position: a

宣传片制作的运动镜头分析,你知道吗?流量雨短视频拍摄制作公司

在企业宣传片拍摄制作中,利用移动摄像方法拍摄的画面我们称之为运动镜头,也可以简称之为移动镜头.想运动镜头怎么样才可以拍好呢?流量雨短视频拍摄制作公司告诉你,运动镜头的拍摄就是利用轨道.索道.摇 臂.车载.航拍等等,这些辅助设备进行拍摄的. 无论是在什么方向.什么形式的运动摄像,用广角镜头来拍摄均会取得较好的画面效果.广角镜头的特点是在运动过程中画面动感强并且平衡,实际拍摄时,在可能的情况下应尽量利用摄像机变焦距镜头中视角最广的那一段镜头.因为镜头视角越广,它的特点体现得越明显,画面也容易保持稳定

[Swift通天遁地]九、拔剑吧-(5)创建Tab图标具有多种样式的Tab动画

本文将演示创建动画样式的底部标签条的切换效果. Github项目地址:[animated-tab-bar],下载项目,解压成文件夹窗口. 将第三方类库的标签控制器文件夹[RAMAnimatedTabBarConroller]拖动到项目中. 在弹出的文件导入确认窗口中,点击[Finish]完成按钮,确认文件的导入. 在左侧的项目导航区打开视图控制器的代码文件[Main.storyboard] 选择故事板中的视图控制器.依次点击: [Editor]编辑- >[Embed In]植入- >[Tab

Iterator迭代器源码简略分析

Iterator it = c.iterator() 当在执行这行语句时,它是底层是怎么样子的?首先Collection extends Itrable,接口继   承接口,而Itrable中有一个抽象方法, Iterator iterator(),其返回值是Iterator,   Iterator接口中有三个抽象方法,hasNext(),next(),remove(),那么,Collection就应该   重写这个方法,但是它是一个接口,接口中只有抽象方法,我们应该看看它的子类有没有做   这