原生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 相关文章推荐
JS中confirm,alert,prompt函数使用区别分析
Apr 01 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
JS eval代码快速解密实例解析
Apr 23 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 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
随机广告显示(PHP函数)
2006/10/09 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
python 判断自定义对象类型
2009/03/21 Python
python通过shutil实现快速文件复制的方法
2015/03/14 Python
用Python进行行为驱动开发的入门教程
2015/04/23 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
python各层级目录下import方法代码实例
2020/01/20 Python
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
香港礼品网站:GiftU eshop
2017/09/01 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
自动化专业个人求职信范文
2013/11/29 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
保险内勤岗位职责
2014/04/05 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
新郎接新娘保证书
2015/05/08 职场文书