基于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扩展 垂直tabLayout实现代码
Jun 21 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
从0开始学Vue
Oct 27 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
js实现3d悬浮效果
Feb 16 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
JavaScript 与 TypeScript之间的联系
Nov 27 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
用PHP调用Oracle存储过程
2006/10/09 PHP
PHP的分页功能
2007/03/21 PHP
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
php递归函数怎么用才有效
2018/02/24 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
python检测服务器是否正常
2014/02/16 Python
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
Python读取网页内容的方法
2015/07/30 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
详解Python中namedtuple的使用
2020/04/27 Python
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
百度软件工程师职位
2013/02/14 面试题
高一英语教学反思
2014/01/22 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
老同学聚会感言
2014/02/23 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers