基于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 相关文章推荐
JavaScript中常见陷阱小结
Apr 27 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
javascript断点调试心得分享
Apr 23 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 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
用Flash图形化数据(一)
2006/10/09 PHP
一些使用频率比较高的php函数
2008/10/03 PHP
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
php简单日历函数
2015/10/28 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
JQuery选择器特辑 详细小结
2012/05/14 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
详解vue中组件参数
2018/07/09 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
Python 在函数上添加包装器
2020/07/28 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
新郎父亲婚宴答谢词
2014/01/11 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
假期安全教育广播稿
2014/10/04 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
中学生思想品德评语
2014/12/31 职场文书
家长会欢迎词
2015/01/23 职场文书
歌咏比赛主持词
2015/06/29 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
A22国内电台短波广播频率表
2022/05/10 无线电