当前位置:首页 > SEO教程 > SEO排名教程 >

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

发布时间:2021-07-25 14:31 | 浏览次数:次 | 作者:王牌SEO公司小编| 来源:原创

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

 

源码查看

【功能说明】

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

【HTML代码说明】


  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

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

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

本文由王牌SEO公司原创,转载本文请附带本文链接:http://www.jinuoseo.com/wzjsprogram/7863.html 标明:转自【王牌SEO公司】