国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

基于insertBefore制作簡單的循環插空效果

2019-11-20 11:32:35
字體:
來源:轉載
供稿:網友

效果圖展示:

源碼查看

【功能說明】

  利用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);

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

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 长岭县| 麟游县| 平昌县| 图们市| 三亚市| 恩平市| 博野县| 万年县| 西宁市| 巴彦淖尔市| 家居| 连云港市| 肥西县| 营山县| 延津县| 沁阳市| 建德市| 扬中市| 北京市| 南丰县| 车险| 水城县| 平泉县| 沅陵县| 泰顺县| 澳门| 长汀县| 玉溪市| 迁安市| 唐河县| 竹溪县| 宁乡县| 青河县| 河北区| 成武县| 泰安市| 龙胜| 松原市| 郧西县| 苍溪县| 巴彦淖尔市|