基于replaceChild制作简单的吞噬特效

2024-12-01 19:24:27

效果演示图：

【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代码说明】

<script>
var oList = document.getElementById('list');
//新增一个li元素
var oAdd = document.createElement('li');
//设置新增元素的css样式
oAdd.className = "in";
oAdd.style.cssText = 'background-color:red;border-radius:50%';
//1s后oAdd替换第0个li
setTimeout(function(){
  oList.replaceChild(oAdd,document.getElementsByTagName('li')[0]);
  //1s后执行incrementNumber函数
  setTimeout(incrementNumber,1000);
},1000);
function incrementNumber(){
  //获取oList中第1个li
  var oLi1 = document.getElementsByTagName('li')[1];
  //若存在则进行替换处理
  if(oLi1){
     oList.replaceChild(oAdd,oLi1);
     setTimeout(incrementNumber,1000);
  }
}
</script>

以上内容给大家分享了基于replaceChild制作简单的吞噬特效，希望大家喜欢。

javascript替换已有元素replaceChild()使用介绍

replaceChild(a,b)是用来替换文档中的已有元素的参数a:要插入的节点, 参数b:要替换的节点复制代码代码如下: var oDiv = document.getElementById("guoDiv"); var oSpan = document.createElement("span"); oSpan.innerHTML = "4"; var firsChild = oDiv.firstElementChild ? oDiv.
DOM节点的替换或修改函数replaceChild()用法实例

本文实例讲述了DOM节点的替换或修改函数replaceChild()用法.分享给大家供大家参考.具体分析如下: DOM节点的替换过程: (1)创建新的节点: (2)找到旧的节点: (3)站在父节点的角度,使用replaceChild(新,旧)函数来替换. 复制代码代码如下: <html> <head> <script type="text/javascript"> function t(){ //思路:1.首先找到要替换的节点:2. 创建一个新的
基于replaceChild制作简单的吞噬特效

效果演示图: 源码查看 [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</
基于Flutter制作一个心碎动画特效

目录前言实现步骤 1.绘制一个心 2.绘制心的裂痕 3.加入动画完整代码小结前言继续动画探索,今天用Flutter制作一个心碎的感觉,灵感来源于今天的股市,哎,心哇凉哇凉的.废话不多说,开始. 效果图先上: 实现步骤 1.绘制一个心首先我们使用两段三阶贝塞尔曲线制作一个心型,这里因为需要实现心碎的效果,所以我们需要将心的两段用两段路径path进行绘制出来,效果: 绘制代码: canvas.translate(size.width / 2, size.height / 2); Pai
基于Vue3制作简单的消消乐游戏

目录游戏介绍核心思路核心代码 html js 游戏开始/循环删除下落添加生成矩阵/数据点击换位置游戏介绍先看一下好吧,我知道界面有点丑 →_→ 核心思路游戏步骤主要就是:消除.下落.补充.移动,采用三种状态来区分需要删除的(remove).新添加的(add).和正常的方块(normal) 主要就是生成小方块列表后,马上保存每一个方块上下左右方块的信息然后判断每一个方块和上下或和左右类型相同即为需要消除,并把该方块状态改为 remove 然后通过定位改变 top 来控制
基于jquery实现简单的手风琴特效

手风琴效果是项目中使用频率较高的一种效果,本文实例J就为大家讲述了jquery实现简单的手风琴特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: css样式 /* CSS Document */ body { margin: 0 auto; padding: 0 auto; font-size: 9pt; font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif; } .accordion { paddi
基于insertBefore制作简单的循环插空效果

效果图展示: 源码查看 [功能说明] 利用insertBefore制作简单的循环插空效果 [HTML代码说明] <ul class="list" id="list"> <li class="in">1</li> <li class="in">2</li> <li class="in">3</li> <li class=
基于JavaScript制作霓虹灯文字代码特效

示例一: 运行效果截图如下: 具体代码如下: http-equiv="Content-Type" content="text/html; charset=gb2312"> 霓虹灯 var Tname="欢迎您的到来!"; var Tlen=Tname.length; document.write(""+Tname+""); var col=new Array("#FFCC00",&
基于Opencv制作的美颜相机带你领略美颜特效的效果

目录导语正文总结导语现在每一次出门,女友就喜欢拍照!BUT 嫌弃我给拍的照片角度不对,采光不好....... 总之一大堆理由,啥时候让我拍照的水平能有美颜相机三分之一的效果就好! 果然都是锻炼出来的,至少现在我能看出来朋友圈哪些小姐姐批没批过照片. 逃不掉逃不掉啊,为了摆脱这种局面-- 立马给女友写了一款简易版本的美颜相机给她偷偷的用!这样子就不担心被锤了.机智如我.jpg 正文环境安装: dlib库的安装本博客提供三种方法进行安装 T1方法:pip
基于Matlab制作一款简单的龙舟小游戏

效果图: 没找到合适的背景就自己画了个,大家如果有更好看的可以换一下... 步骤 1 创建Axes及图片导入窗口创建: Mainfig=figure('units','pixels','position',[50 100 760 400],... 'Numbertitle','off','menubar','none','resize','off',... 'name','dragonBoat'); axes('parent',Mainfig,'position',[0 0 1 1],...
基于JS制作一个简单的网页版地图

目录前言一.申请地图的AK密钥二.主要代码分析三.全部代码四.结果展示前言以前做了一个安卓版的地图应用,现在突然想做一个简单的网页版地图.这个简单的网页版地图能根据城市名进行位置查询(有个城市列表的小控件,支持城市列表选择),还能根据经纬度进行位置查询.当你进行城市搜索时,或者经纬度查询城市时,该小控件也能自由地切换到目标城市. 一.申请地图的AK密钥 1.首先找到一个地图开放平台,这里以百度地图开放平台为例,步骤如下:进入百度地图开放平台,拉到最底下,进行登录注册,然后进入应用管
基于Python制作打地鼠小游戏

效果展示打地鼠小游戏简介打地鼠的游戏规则相信大家都知道,这里就不多介绍了,反正就是不停地拿锤子打洞里钻出来的地鼠呗~ 首先,让我们确定一下游戏中有哪些元素.打地鼠打地鼠,地鼠当然得有啦,那我们就写个地鼠的游戏精灵类呗: '''地鼠''' class Mole(pygame.sprite.Sprite): def __init__(self, image_paths, position, **kwargs): pygame.sprite.Sprite.__init__(self) self.

基于replaceChild制作简单的吞噬特效

相关推荐

随机推荐