注意move的js包在另一篇文章

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="move.js"></script>
<style>
div{
width: 50px;
height: 50px;
background: red;
position: absolute;
top: 10px;
}
</style>
</head>
<body>
<!--404792402@qq.com-->
<script>
var oDiv = document.getElementsByTagName("div")
var len = 10
var str = ""
var num = 0
var timer = null
var onOff = false
var a = true

for (var i=0;i<len;i++) {
str+='<div style="left:'+(i*60)+'px"></div>'
}
document.body.innerHTML = str
document.onclick = function(){
// alert(1)
if(a){
// if(onOff){
// return
// }
// onOff = true
if(!onOff){
onOff = true//第二次 第三次 。。。。。。
timer = setInterval(function(){
move(oDiv[num],"top",10,400)
num++
if(num==len){
clearInterval(timer)
num = 0

a = false
onOff = false
}

},300)
}






}else{
if(!onOff){
onOff = true
timer = setInterval(function(){
move(oDiv[num],"top",10,40)
num++
if(num==len){
clearInterval(timer)
num = 0

a = true
onOff = false
}

},300)
}


}

}
</script>


</body>
</html>

js-运动函数(盒子运动)的更多相关文章

  1. js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  2. JS里面的两种运动函数

    最新学了一个新的运动函数,与最初学习的有所不同,第一个运动是根据运动速度完成运动 ,第二个则是根据运动的时间来完成运动,而且把之前的函数都进行了一些兼容处理,在这里列出了看一下: 第一种animate ...

  3. 原生JS封装时间运动函数

    /*讲时间运动之前先给大家复习一下运动函数 通常大家都会写运动框架,一个定时器(Timer),一个步长(step 就是每次运动的距离),一个当前位置(current)一个目标位置(target),然后 ...

  4. 运动函数封装（js）

    // 运动函数 function starMove(obj,json,fnEnd){ clearInterval(obj.timer); obj.timer  = setInterval(functi ...

  5. 如何用js自己实现Animate运动函数

    js运动是我们学习js必不可少的研究部分,首先我们要知道js的运动其实仅仅是不断改变元素的某个属性值而已,比如不断改变一个绝对定位div的left值,那么你看到的效果就是这个div不断的向右边运动,那 ...

  6. js 运动函数篇(二) （加速度运动、弹性运动、重力场运动（多方向+碰撞检测+重力加速度+能量损失运动）拖拽运动）层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写加速度运动.弹性运动.重力场运 ...

  7. 【原生JS组件】javascript 运动框架

    大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,须要写非常多运动的 ...

  8. JavaScript--封装好的运动函数+旋转木马例子

    封装好的运动函数: 1.能控制目标元素的多种属性 2.能自动获取元素的样式表: 3.获取样式函数兼容 4.能对于元素的多属性进行动画(缓动动画)修改 5.能区分透明度等没单位的属性和px属性的变化 a ...

  9. Javascript之封装运动函数

    @ 目录 阶段一.仅适用单位带px属性的匀速运动 阶段二.可适用单位不带px属性(如opacity)的匀速运动 阶段三.适用于多元素单一属性的匀速运动 阶段四.适用于多元素单一属性的匀速或缓冲运动 阶 ...

随机推荐

  1. Java 日期比较大小

    import org.junit.Test; import java.text.SimpleDateFormat; import java.util.Date; /** * @author DateJ ...

  2. android toolbar效果3

    Title居中,只有一个右边按钮 activity_main.xml: <?xml version="1.0" encoding="utf-8"?> ...

  3. hadoop distcp hdfs://ns1/aaa hdfs://ns8/bbb UnknownHostException: xxx 两个高可用（ha）集群间distcp 如何识别两个集群逻辑名称

    在要执行distcp 的客户端配置添加 dfs.internal.nameservices 指local service 就是client 所在的hadoop 的逻辑名称 <!-- servic ...

  4. 收藏 —— KVM网络虚拟化

    http://www.cnblogs.com/CloudMan6/p/5240770.html http://www.cnblogs.com/CloudMan6/p/5289590.html

  5. ODPS SQL <for 数据定义语言 DDL>

    数据定义语言:(DDL) 建表语句: CREATE TABLE [IF NOT EXISTS] table_name [(col_name data_type [COMMENT col_comment ...

  6. 1011 A+B 和 C （15 分）

    pragma warning(disable:4996) a-c+b>0? 考虑可能越界 在循环体内判断,然后有序号输出 输入输出格式看多个题然后总结下 不会处理单行数据 include < ...

  7. 如何将R中的data frame对象的数据导入到DB

    在使用ARIMA模型来预测我们的销量的时候,如果保存预测版本进DB,以供后续分析呢 1. 在定义变量阶段我们定义了dfResult      <- data.frame() 这是一个data f ...

  8. Ado.net之连接数据库

    一.Ado.net的核心 Ado.net的核心为两组重要的类,一个负责处理软件内部的实际数据(DataSet),另一个负责与外部数据系统通信(DataProvider) DataSet:包含一个或多个 ...

  9. push() 方法将一个或多个元素添加到数组的末尾，并返回新数组的长度

    var numbers = [1, 2, 3]; numbers.push(4); console.log(numbers); // [1, 2, 3, 4] numbers.push(5, 6, 7 ...

  10. CentOS6.8 使man支持显示中文

    1.安装显示中文的man命令 wget https://src.fedoraproject.org/repo/pkgs/man-pages-zh-CN/manpages-zh-1.5.1.tar.gz ...