基于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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
通用javascript脚本函数库 方便开发
Oct 13 Javascript
javascript replace()正则替换实现代码
Feb 26 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
多种方式实现js图片预览
Dec 12 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
基于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
德生1994机评
2021/03/02 无线电
php array_walk() 数组函数
2011/07/12 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
Python中的Django基本命令实例详解
2018/07/15 Python
基于Python正确读取资源文件
2020/09/14 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
宿舍违规用电检讨书
2014/02/16 职场文书
合作投资意向书
2014/04/01 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
校庆口号
2014/06/20 职场文书
大学生求职信例文
2014/06/29 职场文书
计算机实训报告范文
2014/11/05 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
工作经历证明范本
2015/06/15 职场文书
消费者投诉书范文
2015/07/02 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
详解Redis复制原理
2021/06/04 Redis
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python