基于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</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制作简单的吞噬特效,希望大家喜欢。
相关推荐
-
DOM节点的替换或修改函数replaceChild()用法实例
本文实例讲述了DOM节点的替换或修改函数replaceChild()用法.分享给大家供大家参考.具体分析如下: DOM节点的替换过程: (1)创建新的节点: (2)找到旧的节点: (3)站在父节点的角度,使用replaceChild(新,旧)函数来替换. 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){ //思路:1.首先找到要替换的节点:2. 创建一个新的
-
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.
-
基于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.
随机推荐
- 通过批处理修改DNS的代码(推荐)
- 说明你的Javascript技术很烂的五个原因
- 使用SAE部署Python运行环境的教程
- TSYS一个新闻多种特性时如何进行前台更新?
- Yii2 rbac权限控制操作步骤实例教程
- 微信js-sdk上传与下载图片接口用法示例
- 使用Python对IP进行转换的一些操作技巧小结
- 详解Linux查看实时网卡流量的几种方式
- NPOINT免费虚拟主机管理系统windows2003的安装方法【图文】第1/2页
- 基于mysql数据库的密码问题详解
- jquery autocomplete自动完成插件的的使用方法
- jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
- JS.elementGetStyle(element, style)应用示例
- Android 自定View实现仿QQ运动步数圆弧及动画效果
- Laravel路由研究之domain解决多域名问题的方法示例
- ThinkPHP 5.x远程命令执行漏洞复现
- Java DOM4J方式生成XML的方法
- vue awesome swiper异步加载数据出现的bug问题
- Python内置加密模块用法解析
- Vue.directive 实现元素scroll逻辑复用