注意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. python学习笔记_week28

    heap import heapq import random heap = [] data = list(range(10000)) random.shuffle(data) # for num i ...

  2. JavaScript 的基础学习(一)

    JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.( ...

  3. 第一篇、Python初识

    1.Python文件后缀是否可以任意? 单独执行的时候没关系,但当文件需要导入(即导入模块)的时候,如果不是py后缀的,会出错. 2.执行方法 1) python +文件路径 python + fil ...

  4. 【原】The Linux Command Line - Workiing with commands

    ● type – Indicate how a command name is interpreted● which – Display which executable program will b ...

  5. 用 Python + itchat 写一个爬虫脚本每天定时给女朋友发微信暖心话

    https://github.com/sfyc23/EverydayWechat.git

  6. js 冒泡事件 点击任意地方隐藏元素

    $(function () { $("#but").click(function (e) {// $();//显示速度 /*阻止冒泡事件*/ e = window.event || ...

  7. Codeforces Round #437 B. Save the problem!

    题意: 给你一个方案数,要求你输出满足该条件的总金额,面值数,和各个面值是多少,答案有多个,随便输出一个即可. Examples Input 18 Output 30 41 5 10 25 Input ...

  8. python 之C3算法

    C3算法只要针对的Python2.3版本之后出现的新式类MRO(method resolution order) -------继承方法查询顺序;而经典类MRO则遵循的是深度优先遍历(树形结构) (1 ...

  9. 【mac环境】终端配色 & 配置使用ll命令

    1.MAC OS X 命令终端的颜色显示 打开 terminal 会发现 ls 和 grep 后的结果是没有色彩的,这时候可以这么干: 用 vim 打开文件 ~/.bash_profile,然后把下边 ...

  10. 校验金额、大小写字母、大写字母、合法uri、email

    /* 合法uri*/ export function validURL(url) { const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0- ...