欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于insertBefore制作簡單的循環(huán)插空效果

 更新時(shí)間：2015年09月21日 11:30:38   投稿：mrr  
這是一個(gè)基于insertBefore制作簡單的循環(huán)插空效果，實(shí)現(xiàn)的數(shù)字下面循環(huán)插空效果，給需要的朋友分享。

效果圖展示：

源碼查看

【功能說明】

　　利用insertBefore制作簡單的循環(huán)插空效果

【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');
//新增一個(gè)li元素
var oAdd = document.createElement('li');
//設(shè)置新增元素的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]相當(dāng)于null，所以不報(bào)錯(cuò)
 oList.insertBefore(oAdd,oList.getElementsByTagName('li')[num]); 
 if(num == max){
  num = -1;
 } 
 if(num == 0){
  num = 1;
 }
 setTimeout(incrementNumber,1000);
}
setTimeout(incrementNumber,1000);

好了，以上就是本文的全部內(nèi)容，代碼很簡單吧，相信大家都可以看得懂，需要的朋友可以參考下本文，希望大家喜歡。

相關(guān)文章

最新評(píng)論