基于insertBefore制作简单的循环插空效果
人气:0效果图展示:
【功能说明】
利用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);
好了,以上就是本文的全部内容,代码很简单吧,相信大家都可以看得懂,需要的朋友可以参考下本文,希望大家喜欢。
加载全部内容