基于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)單的吞噬特效，希望大家喜歡。
相關(guān)文章
element-ui 通過(guò)按鈕式觸發(fā)日期選擇器
ElementUI是Vue.js的一套組件庫(kù),其日期時(shí)間選擇器默認(rèn)是通過(guò)點(diǎn)擊輸入框來(lái)觸發(fā),本文介紹了如何自定義觸發(fā)日期選擇器,同時(shí)隱藏輸入框,通過(guò)編寫一個(gè)自定義組件CustomDatePicker.vue,可以實(shí)現(xiàn)點(diǎn)擊按鈕來(lái)觸發(fā)日期選擇器2024-10-10
本文介紹利用js取到下拉框中選擇的值。并附上實(shí)例代碼，需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細(xì)介紹了小程序富文本提取圖片可放大縮小，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
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中解決方式的相關(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