脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 原生js 中奖信息无间隙滚动

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

 更新时间：2017年01月18日 16:31:21   作者：夏天不做梦  
本文主要分享了原生js实现中奖信息无间隙滚动效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧

知识要点

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数组常用方法汇总

    这篇文章主要汇总了javascript中数组常用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • express异步函数异常捕获示例详解

    express异步函数异常捕获示例详解

    这篇文章主要给大家介绍了关于express异步函数异常捕获的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • tree shaking功能及使用原理详细解析

    tree shaking功能及使用原理详细解析

    这篇文章主要为大家介绍了tree shaking功能及使用原理详细解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪的相关资料
    2023-01-01
  • js innerHTML 改变div内容的方法

    js innerHTML 改变div内容的方法

    永远不知道你可以改变的内容，一个HTML元素？也许你要取代的文字段落中，以反映什么访客选定刚刚从下拉框中。通过操纵一个元素的innerHtml您可以变更您的文本和HTML多达你喜欢。
    2013-08-08
  • JavaScript实现汉字转换为拼音及缩写的方法示例

    JavaScript实现汉字转换为拼音及缩写的方法示例

    这篇文章主要介绍了JavaScript实现汉字转换为拼音及缩写的方法,结合实例形式分析了javascript数组遍历、转换实现汉字转拼音相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • js实现跳一跳小游戏

    js实现跳一跳小游戏

    这篇文章主要为大家详细介绍了js实现跳一跳小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-07-07
  • Javascript类型判断相关例题及解析

    Javascript类型判断相关例题及解析

    这篇文章主要介绍了Javascript类型判断相关例题及解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • js和canvas绘制圆形金属质感特效

    js和canvas绘制圆形金属质感特效

    在JavaScript中,可以使用HTML5提供的Canvas元素来进行绘图操作,要使用canvas元素,浏览器必须支持html5,Canvas是一个HTML元素,可以通过JavaScript来操作和绘制图形,本文示例实现js和canvas绘制圆形金属质感的诗词高级排版特效
    2024-09-09
  • javascript URL锚点取值方法

    javascript URL锚点取值方法

    url取值的比较不错的思路，一般都是这样的话，或直接先将？替换成统计分隔符，js数组一定要特别熟悉。
    2009-02-02
  • js简单实现竖向tab选项卡的方法

    js简单实现竖向tab选项卡的方法

    这篇文章主要介绍了js简单实现竖向tab选项卡的方法,涉及javascript实现tab切换效果的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-05-05

最新评论