注意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. mac 安装软件

    一.安装spark 1.官网下载最新tar文件 2.解压 3.安装java开发环境 3.1.安装下载java 8  https://www.oracle.com/technetwork/java/ja ...

  2. leetcode461

    public class Solution { public int HammingDistance(int x, int y) { ]; ]; ; ; do { aryA[i] = x % ;//将 ...

  3. ---perl 模块安装方法

    http://blog.csdn.net/lincy100/article/details/7333794 $ perl -MCPAN -e shell install Log::Log4perlin ...

  4. MANIPULATION

    MANIPULATION Generalizations Congratulations! You learned how to use the command line to view and ma ...

  5. 尚硅谷springboot学习25-嵌入式Servlet容器

    SpringBoot默认使用Tomcat作为嵌入式的Servlet容器:

  6. java导出excel模板数据

    Java导出excel数据模板,这里直接贴代码开发,流程性的走下去就是步骤: String[] colName=new String[]{"期间","科目代码" ...

  7. mui页面传值

    以下代码全部在script标签内 一.通过mui.openWindow()打开新页面(若目标页面为已预加载成功的页面,则在openWindow方法中传递的extras参数无效): mui.openWi ...

  8. 最小的K个数(python)

    题目描述 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,.   # -*- coding:utf-8 -*- class So ...

  9. python中的元组

    在python中,元组是不可变类型 可通过以下案例说明: >>> c1 = ['1','2'] >>> c = (1,2,c1) >>> c (1 ...

  10. python—切片

    切片就是list取值的一种方式 l = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] print(l[1:5]) #取值方式顾头不顾尾 print(l[:5]) #冒号 前面 没写代 ...