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


Posted in Javascript onSeptember 21, 2015

效果演示图:

基于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制作简单的吞噬特效,希望大家喜欢。

Javascript 相关文章推荐
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
JavaScript 对象创建的3种方法
Nov 17 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 #Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 #Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 #Javascript
jquery+正则实现统一的表单验证
Sep 20 #Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 #Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 #Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 #Javascript
You might like
JAVA/JSP学习系列之六
2006/10/09 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
php缓冲输出实例分析
2015/01/05 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
php blowfish加密解密算法
2016/07/02 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
Python中处理时间的几种方法小结
2015/04/09 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
python实现二叉树的遍历
2017/12/11 Python
Python函数参数操作详解
2018/08/03 Python
python版飞机大战代码分享
2018/11/20 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
数据库连接池的工作原理
2012/09/26 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
工程业务员工作职责
2013/12/07 职场文书
小饰品店的创业计划书范文
2013/12/28 职场文书
承诺函格式模板
2015/01/21 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书