原生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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
原生js页面滚动延迟加载图片
本文实例为大家讲解了javascript瀑布流代码,即js页面滚动延迟加载图片,分享给大家供大家参考,具体代码如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生Js页面滚动延迟加载图片</title> <style t
-
使用jQuery或者原生js实现鼠标滚动加载页面新数据
相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多,用鼠标操作的时候相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 ,今天我们就来看看他们的实现思路和js控制动态加载的代码. 下面的代码主要是控制滚动条下拉时的加载事件的,无论是加载图片还是加载记录数据 都可以. 加载jQuery库后我们可以这样使用: $(window).scroll(function () { var scrollTop = $(t
-
原生js实现模拟滚动条
当页面中有很多滚动条,它们相互嵌套,很不好看,这时就会模拟滚动条,并给这个滚动条好看的样式,使得页面美观. 模拟滚动条很多时候是去用jquery插件,然后写几行代码就搞定了.不过随着mvvm的快速发展,很多时候都懒得用jquery了,这就是本文的动机,本屌力求用简单的不依赖jquery只依赖mvvm(avalon) api的代码,完成一个简易的滚动条. 要求: 1.鼠标滚轮可以让滚动条工作,界面滚动 2.鼠标可以拖动滚动条并让界面滚动 3.页面resize时,滚动条根据页面尺寸变化,仍然可以工作
-
原生Js页面滚动延迟加载图片实现原理及过程
原理和过程 1.页面滚动加载事件 2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片 3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/ 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html
-
原生js实现水平方向无缝滚动
水平方向无缝滚动 滚动支持图片,文字 原理 :一个大的盒子中放置两个盒子,通过设置offsetWidth,scrollLeft的关系来实现,而且还用到定时器函数setInterval,当手指移动上去定义滚动,离开继续滚动.兼容各大浏览器. HTML代码 <div id="demo"> <div id="demoin"> <div id="demo1"> <a href="">测试
-
原生JS绑定滑轮滚动事件兼容常见浏览器
滑轮滚动页面的事件在网页特效中进场遇到,但是在不同浏览器下的实现方式又不同.下面我实现的方法,兼容常见浏览器. function getData(event){ var e = event || window.event; //获取滚动距离(FF每次滚动 data为3或者-3,其他为120或者-120) var data = e.detail || e.wheelDelta; alert(data); } //IE之外的绑定事件方法 if(document.addEventListener &&a
-
原生js实现中奖信息无间隙滚动效果
知识要点 1.实现原理:通过定时器不断改变列表的top值.而达到无间隙滚动就要对信息列表复制一份,再判断两个列表的top临界值初始化.最后注意的就是 防止动画积存需要对定时器进行清除. 2.用到的属性方法: setInterval() //每隔一定时间执行一次函数,可以无限执行下去 clearInterval() //清除指定的setInterval setTimeout() //经过一定时间执行一次函数,只能执行一次,如果要无限下去需要在函数里自行设置 clearTimeout() //清除指
-
原生JS实现列表内容自动向上滚动效果
效果展示 (鼠标移入,滚动停止:鼠标移出,滚动继续) 实现原理 1. html结构:核心是ul > li,ul外层包裹着div.因为想要内容循环滚动无缝衔接,所以在原有ul后面还要有一个一样内容的ul.如下图: (红色边框为可视区域div,此处为了方便查看效果去除overflow:hidden:) 2. 样式方面:由于要滚动,所以必须2个ul的高度 > 外层可视div高度,且div必须设置overflow:hidden; 代码实现 HTML: <div id="revie
-
js实现Select列表内容自动滚动效果代码
本文实例讲述了js实现Select列表内容自动滚动效果.分享给大家供大家参考.具体如下: 这里演示的Select列表内容自动滚动效果,文字可自动滚屏,当网页加载完毕后,Select中的内容会一个接一个向上滚动,当然,滚动的参数和速度是可以调节的.或许你会用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-font-scroll-codes/ 具体代码如下: <html> <head> <title&g
-
JS简单封装的图片无缝滚动效果示例【测试可用】
本文实例讲述了JS简单封装的图片无缝滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="
-
js实现带按钮的上下滚动效果
本文实例讲述了js实现带按钮的上下滚动效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <
-
JS实现的DIV块来回滚动效果示例
本文实例讲述了JS实现的DIV块来回滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="t
-
原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在前端的路上越走越远`(∩_∩)′ 从原理来讲,网上的教程有很多,简单来说. 淡入淡出,其实这里只用到了淡入的效果.每一张淡入的图片,我们将它的display设置为block,其他为none,所以实际存在并且在文档流占位置的只有一张图片.在设置图片的display方式之前,将图片的透明度逐渐增大,就会
-
原生JS实现多个小球碰撞反弹效果示例
本文实例讲述了原生JS实现多个小球碰撞反弹效果.分享给大家供大家参考,具体如下: 实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y值增加,以上的思路可以实现小球的碰壁反弹 小球与小球之间的碰撞,要判断小球在被撞小球的哪个方向,从而判断小球该向哪个方向移动,同样的改变小球的坐标值,来实现小球的反弹 实现代码: <!doctype html> &l
-
iOS实现文字水平无间断滚动效果
IOS跑马灯效果,实现文字水平无间断滚动,示例代码如下: ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController{ NSTimer *timer; UIScrollView *scrollViewText; } @property (nonatomic ,strong) NSArray *arrData; @end ViewController.m // // ViewContr
-
JS实现的新闻列表自动滚动效果示例
本文实例讲述了JS实现的新闻列表自动滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #box{width:260px;height:100px;margi