原生js实现中奖信息无间隙滚动效果


Posted in Javascript onJanuary 18, 2017

知识要点

1.实现原理:通过定时器不断改变列表的top值。而达到无间隙滚动就要对信息列表复制一份,再判断两个列表的top临界值初始化。最后注意的就是 防止动画积存需要对定时器进行清除。

2.用到的属性方法:

setInterval() //每隔一定时间执行一次函数,可以无限执行下去
clearInterval() //清除指定的setInterval
setTimeout() //经过一定时间执行一次函数,只能执行一次,如果要无限下去需要在函数里自行设置
clearTimeout() //清除指定的setTimeout

剩下的就是一些基础的dom操作

完整代码

注:因为看到了天猫积分的抽奖页面所以想自己写试试,审查天猫代码看到原理是改变列表top值,无缝滚动是自己瞎琢磨的,估计应该有更高效的方法还请大神指教。。

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
.title{background: #D20F25; width: 200px; height: 40px; color: #fff; line-height: 40px;}
.title p{margin-left: 30px;}
#vip{background: #D20F25; width: 200px; height: 105px; color: #FF92AD; overflow: hidden; position: relative; }
#list{position: absolute;}
#vip li{ height: 50px; line-height: 24px; font-size: 12px; margin-left: 30px; }
</style>
</head> 
<body>
 <div class="title"><p>会员中奖榜</p></div>
 <div id="vip">
 <ul id="list" style="top: 0px;">
 <li>m**b<br/>抽中18积分</li>
 <li>小**宫<br/>抽中28积分</li>
 <li>金**告<br/>抽中8积分</li>
 <li>真**生<br/>抽中88积分</li>
 <li>郑**9<br/>抽中18积分</li>
 <li>l**美<br/>抽中8积分</li>
 </ul> 
 </div>
 <script type="text/javascript">
 //在页面加载完后立即执行多个函数方案
 function addloadEvent(func){
  var oldonload=window.onload;
  if(typeof window.onload !="function"){
   window.onload=func;
  }
  else{
   window.onload=function(){
    if(oldonload){
     oldonload(); 
    }
    func();
   }
  }
 }
 //在页面加载完后立即执行多个函数方案结束
 addloadEvent(nes);
 function nes(){
 //获取列表父容器
 var vip=document.getElementById("vip");
 //获取信息列表
 var list=document.getElementById("list");
 //创建第二个列表设置一系列样式id等
 var list1=document.createElement("ul");
  list1.setAttribute("id","list1");
  //初始位置为300正好在第一个列表的下面
  list1.style.top=300+"px";
  list1.style.position="absolute";
  //插入文档流
  vip.appendChild(list1);
  //把第一个列表的结构内容复制给第二个
  list1.innerHTML=list.innerHTML;
 //第一个列表
 function b(){
  //top值为当前的top减10   
  list.style.top=parseInt(list.style.top)-10+"px";
  //如果top值为-300那么初始化top
  if(parseInt(list.style.top)==-300){  
  list.style.top=0;
  }
  //这里是实现间隔滚动判断
  //当top值整除50(每个li的高度)时候清除定时器  
  if(parseInt(list.style.top)%50==0){
  clearInterval(time);
  //然后两秒后再次执行time=setInterval
  se=setTimeout(function(){time=setInterval(b,30);},2000);  
  }     
 };
 //定时器
 time=setInterval(b,30); 
 //第二个列表与第一个列表操作一样,只是修改了高度
 function c(){  
  list1.style.top=parseInt(list1.style.top)-10+"px";
  if(parseInt(list1.style.top)==0){
  list1.style.top=300+"px";
  }
  if(parseInt(list1.style.top)%50==0){
  clearInterval(time1);
  se1=setTimeout(function(){time1=setInterval(c,30);},2000);
  }
 };
 time1=setInterval(c,30); 
 //鼠标移入列表时 清除两个定时器
 vip.onmouseover=function(){  
  clearTimeout(se);
  clearTimeout(se1);
  clearInterval(time);
  clearInterval(time1);
 };
 //鼠标划出时先判断如果定时器在执行则清除
 vip.onmouseout=function(){
  if(time&&time1) {
  clearInterval(time);
  clearInterval(time1)
  }
  if(se&&se1) {
  clearTimeout(se);
  clearTimeout(se1)
  }
  //再次执行定时器
  se=setTimeout(function(){time=setInterval(b,30);},2000); 
  se1=setTimeout(function(){time1=setInterval(c,30);},2000); 
 }; 
 } 
 </script>
</body> 
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
js中如何完美的解析数据
Mar 18 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 Javascript
js实现简单的网页换肤效果
Jan 18 #Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 #Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 #Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 #Javascript
js实现消息滚动效果
Jan 18 #Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 #Javascript
微信小程序的动画效果详解
Jan 18 #Javascript
You might like
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
Python中文件的读取和写入操作
2018/04/27 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
介绍一下SQL Server的全文索引
2013/08/15 面试题
简述安装Slackware Linux系统的过程
2012/01/12 面试题
介绍一下Ruby的特点
2013/01/20 面试题
电信专业毕业生推荐信
2013/11/18 职场文书
商务邀请函范文
2014/01/14 职场文书
网上签名寄语活动留言
2014/01/18 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
安全检查汇报材料
2014/12/26 职场文书
公司处罚决定书
2015/06/24 职场文书
2015年教师国培感言
2015/08/01 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
golang内置函数len的小技巧
2021/07/25 Golang
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB