原生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 相关文章推荐
javascript简单事件处理和with用法介绍
Sep 16 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
JavaScript 异步调用
Oct 25 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 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
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
PHP编写简单的App接口
2016/08/28 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
javascript add event remove event
2008/04/07 Javascript
Javascript 对象的解释
2008/11/24 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
React简单介绍
2017/05/24 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
JS实现图片切换特效
2019/12/23 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
Python进程间通信用法实例
2015/06/04 Python
python matplotlib画图实例代码分享
2017/12/27 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
Python3数字求和的实例
2019/02/19 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
数控技术与应用毕业生自荐信
2013/09/24 职场文书
迟到检讨书800字
2014/01/13 职场文书
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
服装促销活动方案
2014/02/23 职场文书
稽核岗位职责
2015/02/10 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书