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

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

效果图展示：

源码查看

【功能说明】

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

【HTML代码说明】

【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);

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

IOqTcZil

家喜欢。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。