Rumah > hujung hadapan web > tutorial js > Cipta kesan sisipan gelung mudah berdasarkan kemahiran insertBefore_javascript

Cipta kesan sisipan gelung mudah berdasarkan kemahiran insertBefore_javascript

WBOY
Lepaskan: 2016-05-16 15:38:44
asal
1353 orang telah melayarinya

Paparan pemaparan:

Paparan kod sumber

【Penerangan Fungsi】

Gunakan insertBefore untuk mencipta kesan sisipan gelung mudah

[Perihalan kod 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>
Salin selepas log masuk

[penerangan kod CSS]

.in{
 height: 20px;
 line-height: 20px;
 width: 20px;
 background-color: blue;
 text-align: center;
 color: white;
}
Salin selepas log masuk

[penerangan kod 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);

Salin selepas log masuk

Baiklah, di atas adalah keseluruhan kandungan artikel ini Saya percaya semua orang boleh memahaminya.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan