基于insertBefore制作简单的循环插空效果


Posted in Javascript onSeptember 21, 2015

效果图展示:

基于insertBefore制作简单的循环插空效果

源码查看

【功能说明】

利用insertBefore制作简单的循环插空效果

【HTML代码说明】

<ul class="list" id="list">
 <li class="in">1</li>
 <li class="in">2</li>
 <li class="in">3</li>
 <li class="in">4</li>
 <li class="in">5</li>
 <li class="in">6</li>  
</ul>

【CSS代码说明】

.in{
 height: 20px;
 line-height: 20px;
 width: 20px;
 background-color: blue;
 text-align: center;
 color: white;
}

【JS代码说明】

var oList = document.getElementById('list');
//新增一个li元素
var oAdd = document.createElement('li');
//设置新增元素的css样式
oAdd.className = "in";
oAdd.style.cssText = 'background-color:red;border-radius:50%';
//添加到oList中
oList.insertBefore(oAdd,null);
var num = -1;
var max = oList.children.length;
function incrementNumber(){
 num++;
 //oList.getElementsByTagName('li')[max]相当于null,所以不报错
 oList.insertBefore(oAdd,oList.getElementsByTagName('li')[num]); 
 if(num == max){
  num = -1;
 } 
 if(num == 0){
  num = 1;
 }
 setTimeout(incrementNumber,1000);
}
setTimeout(incrementNumber,1000);

好了,以上就是本文的全部内容,代码很简单吧,相信大家都可以看得懂,需要的朋友可以参考下本文,希望大家喜欢。

Javascript 相关文章推荐
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
详解JS面向对象编程
Jan 24 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 #Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 #Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 #Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 #Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 #Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 #Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 #Javascript
You might like
配置PHP使之能同时支持GIF和JPEG
2006/10/09 PHP
初级的用php写的采集程序
2007/03/16 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
用 javascript 实现的点击复制代码
2007/03/24 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
Python爬虫工程师面试问题总结
2018/03/22 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
keras的三种模型实现与区别说明
2020/07/03 Python
Django多数据库联用实现方法解析
2020/11/12 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
2014新课程改革心得体会
2014/03/10 职场文书
导游欢迎词范文
2015/01/23 职场文书
python 如何做一个识别率百分百的OCR
2021/05/29 Python
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python