原生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 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
php 修改密码实现代码
May 24 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
Vue通过懒加载提升页面响应速度
May 10 Vue.js
JavaScript实现班级抽签小程序
May 19 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 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
python绘制多个曲线的折线图
2020/03/23 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
简单了解python列表和元组的区别
2020/05/14 Python
python 下载文件的几种方法汇总
2021/01/06 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
struct与class的区别
2014/02/03 面试题
一年级语文教学反思
2014/02/13 职场文书
安全标语口号
2014/06/09 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
个人合作协议范本
2015/08/06 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python