源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

基于insertBefore制作简单的循环插空效果

  • 时间:2021-08-30 12:24 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:基于insertBefore制作简单的循环插空效果
效果图展示: [img]http://files.jb51.net/file_images/article/201509/2015921112436130.png?2015821112450[/img] [b][url=http://runjs.cn/code/tvmxwlji]源码查看[/url][/b] [b]【功能说明】[/b]   利用insertBefore制作简单的循环插空效果 [b]【HTML代码说明】[/b]
<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>
[b]【CSS代码说明】[/b]
.in{
 height: 20px;
 line-height: 20px;
 width: 20px;
 background-color: blue;
 text-align: center;
 color: white;
}
[b]【JS代码说明】[/b]
var oList = document.getElementById('list');
//新增一个li元素
var oAdd = document.createElement('li');
//设置新增元素的css样式
oAdd.className = "in";
oAdd.style.cssText = 'background-color:red;border-radius:50%';
//添加到oList中
oList.insertBefore(oAdd,null);
var num = -1;
var max = oList.children.length;
function incrementNumber(){
 num++;
 //oList.getElementsByTagName('li')[max]相当于null,所以不报错
 oList.insertBefore(oAdd,oList.getElementsByTagName('li')[num]); 
 if(num == max){
  num = -1;
 } 
 if(num == 0){
  num = 1;
 }
 setTimeout(incrementNumber,1000);
}
setTimeout(incrementNumber,1000);

好了,以上就是本文的全部内容,代码很简单吧,相信大家都可以看得懂,需要的朋友可以参考下本文,希望大家喜欢。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部