基于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 相关文章推荐
JavaScript中string对象
Jun 12 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 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
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
vue项目前端埋点的实现
2019/03/06 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
python 切片和range()用法说明
2013/03/24 Python
python中时间模块的基本使用教程
2019/05/14 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
医学院护理专业应届生求职信
2013/11/12 职场文书
六月份红领巾广播稿
2014/02/03 职场文书
小学生读书笔记
2015/07/01 职场文书
详解Oracle块修改跟踪功能
2021/11/07 Oracle
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python