原生javascript 元素依次掉落及上升

一、实现原理：

① 通过onoff开关，判断元素是往下走还是往上走，并在每次清除定时器后，把onoff 设为 !onoff，以便下次点击做判断

②move函数的运用

二、代码

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{ margin:0;padding: 0;}
div{position: absolute; width:40px; height:40px; background: red; top: 0}
</style>
</head>
<body>
<div></div><script type="text/javascript">window.onload = function(){var box = document.getElementsByTagName('div'); //动态获取未来元素var len = 16;var str = '';var timer = null;var num = 0;var onoff = true; //点击开关// 动态生成div标签for (var i = 0; i < len; i++) {str += "<div style='left:"+(i*50)+"px;'></div>"}document.body.innerHTML = str;document.onclick = function(){// 清除定时器
            clearInterval(timer);// 判断往下还是往上if(onoff){// 开启定时器，让元素挨个往下掉
                timer = setInterval(function(){move(box[num],'top',10,500);num++;// 当最后一个掉完，清除定时器，并把开关设为false，把num重置为0if(num == len){clearInterval(timer);onoff = !onoff;num = 0;}},100)}else{// 开启定时器，让元素挨个往上走
                timer = setInterval(function(){move(box[num],'top',10,0);num++;// 当最后一个升完，清除定时器，并把开关设为true，把num重置为0if(num == len){clearInterval(timer);onoff = !onoff;num = 0;}},100)}}/*obj:要运动的元素attr:属性dir:步长target:目标点endFn:回调函数*/function move(obj,attr,dir,target,endFn){//根据元素当前位置和目标点的比较，动态设置步长为正数或负数
            dir = parseInt( getStyle(obj,attr) ) < target ? dir : -dir;// 1、清除定时器
            clearInterval(obj.timer);// 2、设置定时器
            obj.timer = setInterval(function(){// 3、获取元素当前位置+步长var speed = parseInt( getStyle(obj,attr) )  + dir;// 4、如果元素当前位置超过目标点，则把当前位置==目标点if( speed > target && dir > 0 || speed < target && dir < 0){speed = target}// 5、设置元素位置
                obj.style[attr] = speed + 'px';// 6、判断是否到达目标点，如果到达则停止定时器if(speed == target){clearInterval(obj.timer);// 回调函数，如果endFn存在则执行
                    endFn && endFn();}},20)}/*获取非行间样式：标准浏览器下 getComputedStyle(obj)[attr]IE浏览器下   obj.currentStyle[attr]*/function getStyle(obj,attr){return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];}}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/javascripter/p/9856731.html

原生javascript 元素依次掉落及上升相关推荐

mysql插入ㄖ_原生JavaScript代码100个实例
1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...
加入收藏代码_100个原生JavaScript代码片段知识点详细汇总【实践】
作者:小棋子js 转发链接:https://www.jianshu.com/p/b5171efa340f JavaScript 是目前最流行的编程语言之一,正如大多数人所说:"如果你想学一门 ...
100个常用的原生JavaScript函数
1.原生JavaScript实现字符串长度截取复制代码代码如下: function cutstr(str, len) { var temp; var icount = 0; ...
原生JavaScript如何解决父元素查找指定类名的子元素的问题
原生JavaScript如何解决父元素查找指定类名的子元素的问题参考文章: (1)原生JavaScript如何解决父元素查找指定类名的子元素的问题 (2)https://www.cnblogs.co ...
使用原生JavaScript改变DOM元素面试题
今天遇到一个面试题,感觉挺有意思的,就回来研究一下,发现遇到些问题,最后通过百度找出了问题所在,下面请看: 首先是代码骨架: <!DOCTYPE html> <html> &l ...
原生JavaScript实现打字游戏
写在最前面本文主要锻炼的是原生JavaScript的编程能力,运用了函数式编程的思想! 1.页面的排版与布局主要分成两个页面:a.初始呈现出来的界面:b.点击开始进入游戏的界面. a界面: 比较丑 ...
原生JavaScript实现弹球游戏
原生JavaScript实现弹球游戏.游戏源码请到http://download.csdn.net/detail/zhangjinpeng66/6276567下载.点击图中央的三角图形开始. 开始后的 ...
原生JavaScript实现jQuery中的slideUp和slideDown滑动效果
参考文章:用原生JavaScript写出类似jQuery中slideUp和slideDown效果_johnworks的博客-CSDN博客作者:johnworks 目录一.前言二.第一次尝试 ...
animate用法 js原生_用原生Javascript 创建带动画的固顶导航菜单
当我们在网页中加入一个导航菜单的时候,需要考虑很多因素.如何确定它的位置?如何定义样式?还需要保证它具有良好的响应性.又或者你想为它添加一些炫酷的动画.这时你可能会对 jQuery 感兴趣,因为它会帮 ...

原生javascript 元素依次掉落及上升

原生javascript 元素依次掉落及上升相关推荐

最新文章

热门文章