基于replaceChild制作簡(jiǎn)單的吞噬特效

更新時(shí)間：2015年09月21日 09:23:53 作者：小火柴的藍(lán)色理想

本篇文章通過(guò)js和css結(jié)合實(shí)現(xiàn)簡(jiǎn)單的吞噬效果，代碼簡(jiǎn)單易懂，需要的朋友可以參考下本文

效果演示圖：

【HTML代碼說(shuō)明】

<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代碼說(shuō)明】

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

【JS代碼說(shuō)明】

<script>
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%';
//1s后oAdd替換第0個(gè)li
setTimeout(function(){
  oList.replaceChild(oAdd,document.getElementsByTagName('li')[0]);
  //1s后執(zhí)行incrementNumber函數(shù)
  setTimeout(incrementNumber,1000);  
},1000);
function incrementNumber(){
  //獲取oList中第1個(gè)li
  var oLi1 = document.getElementsByTagName('li')[1];
  //若存在則進(jìn)行替換處理
  if(oLi1){
     oList.replaceChild(oAdd,oLi1);
     setTimeout(incrementNumber,1000);    
  }
}
</script>

以上內(nèi)容給大家分享了基于replaceChild制作簡(jiǎn)單的吞噬特效，希望大家喜歡。

您可能感興趣的文章:

replaceChild

相關(guān)文章

element-ui 通過(guò)按鈕式觸發(fā)日期選擇器
ElementUI是Vue.js的一套組件庫(kù),其日期時(shí)間選擇器默認(rèn)是通過(guò)點(diǎn)擊輸入框來(lái)觸發(fā),本文介紹了如何自定義觸發(fā)日期選擇器,同時(shí)隱藏輸入框,通過(guò)編寫(xiě)一個(gè)自定義組件CustomDatePicker.vue,可以實(shí)現(xiàn)點(diǎn)擊按鈕來(lái)觸發(fā)日期選擇器
2024-10-10
利用js獲取下拉框中所選的值
本文介紹利用js取到下拉框中選擇的值。并附上實(shí)例代碼，需要的朋友可以參考下
2016-12-12
小程序富文本提取圖片可放大縮小
這篇文章主要為大家詳細(xì)介紹了小程序富文本提取圖片可放大縮小，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05
Object.keys()的用法示例詳解
Object.keys()是遍歷一個(gè)對(duì)象自身的屬性名稱(不包括繼承屬性)的最簡(jiǎn)單方法，這篇文章主要介紹了Object.keys()的用法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-07-07
js 數(shù)組倒序排列的具體實(shí)現(xiàn)
有時(shí)候需要將數(shù)組類型變量?jī)?nèi)的元素顛倒一下順序再輸出,本文就詳細(xì)的介紹一下,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-08-08
js跨域請(qǐng)求的5中解決方式
這篇文章主要介紹了js跨域請(qǐng)求的5中解決方式的相關(guān)資料,需要的朋友可以參考下
2015-07-07
js函數(shù)獲取html中className所在的內(nèi)容并去除標(biāo)簽
本文為大家介紹下如何使用js函數(shù)獲取html中className所在的內(nèi)容，具體實(shí)現(xiàn)思路如下，喜歡的朋友可以參考下
2013-09-09
JS記錄用戶登錄次數(shù)實(shí)現(xiàn)代碼
當(dāng)?shù)卿洿螖?shù)達(dá)到三次，就自動(dòng)調(diào)用函數(shù)，隱藏彈出框。下面是具體的實(shí)現(xiàn)，感興趣的朋友可以參考下
2014-01-01
詳解JavaScript中map()和forEach()的異同
在JavaScript中,map()和forEach()是兩個(gè)常用的數(shù)組方法,它們都用于遍歷數(shù)組,但在某些方面有一些關(guān)鍵的區(qū)別,本文將詳細(xì)討論這兩種方法的異同,以幫助您更好地理解它們的用法和適用場(chǎng)景,需要的朋友可以參考下
2024-02-02
js 通過(guò)html()及text()方法獲取并設(shè)置p標(biāo)簽的顯示值
這篇文章主要介紹了js 通過(guò)html()及text()方法獲取并設(shè)置p標(biāo)簽的顯示值,需要的朋友可以參考下
2014-05-05