H5新闻垂直滚动效果

做成不同样式的垂直滚动:无缝垂直滚动,间歇性垂直滚动(一次滚动一条),间歇性垂直滚动(一次滚动两条);

*先上代码(想知道原理的请往后看)~~~~*

变量解释:
speed:滚动的速度;
delay:暂停的时长;
scrollTop :滚动的高度;
scrollHeight:滚动元素的高度;

1. 无缝垂直滚动(无停歇的一直滚动)

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.min.css" rel="stylesheet" /> <style type="text/css"> body{ background-color: #FFFFFF; } .out{ overflow: hidden; height: 21px; margin-top: 50px; padding-left: 20px; } </style> </head> <body> <div class="out" id="roll"> <div>111111111</div> <div>222222222</div> <div>333333333</div> <div>44444444444</div> <div>555555555</div> <div>66666666</div> <div>777777777777</div> <div>888888888888</div> </div> <script type="text/javascript" src="js/mui.min.js" ></script> <script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script> <script type="application/javascript"> var speed = 100; window.onload = function(){ var area = document.getElementById("roll"); area.innerHTML += area.innerHTML; function scroll(){ if(area.scrollTop >= area.scrollHeight/2){ area.scrollTop = 0; }else{ area.scrollTop++; } } setInterval(scroll,speed); } </script> </body> </html> 

2. 间歇性垂直滚动(一次滚动一条)

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.min.css" rel="stylesheet" /> <style type="text/css"> body{ background-color: #FFFFFF; } .out{ overflow: hidden; height: 21px; margin-top: 50px; padding-left: 20px; } </style> </head> <body> <div class="out" id="roll"> <div>111111111</div> <div>222222222</div> <div>333333333</div> <div>44444444444</div> <div>555555555</div> <div>66666666</div> <div>777777777777</div> <div>888888888888</div> </div> <script type="text/javascript" src="js/mui.min.js" ></script> <script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script> <script type="application/javascript"> var speed = 100; var delay = 2000; var height = 21; var time; window.onload = function(){ var area = document.getElementById("roll"); area.innerHTML += area.innerHTML; function scroll(){ if(area.scrollTop % height == 0){ clearInterval(time); setTimeout(start,delay); }else{ area.scrollTop++; if(area.scrollTop >= area.scrollHeight/2){ area.scrollTop = 0; } } } function start(){ time = setInterval(scroll,speed); area.scrollTop++; } setTimeout(start,delay); } </script> </body> </html> 

3. 间歇性垂直滚动(一次滚动两条)

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.min.css" rel="stylesheet" /> <style type="text/css"> body{ background-color: #FFFFFF; } .out{ overflow: hidden; height: 42px; margin-top: 50px; padding-left: 20px; } </style> </head> <body> <div class="out" id="roll"> <div>111111111</div> <div>222222222</div> <div>333333333</div> <div>44444444444</div> <div>555555555</div> <div>66666666</div> <div>777777777777</div> <div>888888888888</div> </div> <script type="text/javascript" src="js/mui.min.js" ></script> <script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script> <script type="application/javascript"> var speed = 100; var delay = 2000; var height = 42; var time; window.onload = function(){ var area = document.getElementById("roll"); var counts = $("#roll").find("div").length; area.innerHTML = area.innerHTML + area.innerHTML + area.innerHTML; function scroll(){ if(area.scrollTop % height == 0){ clearInterval(time); setTimeout(start,delay); }else{ area.scrollTop++; if(counts % 2 ==0 ){ if(area.scrollTop >= area.scrollHeight/3){ area.scrollTop = 0; } }else{ if(area.scrollTop >= area.scrollHeight*2/3){ area.scrollTop = 0; } } } } function start(){ time = setInterval(scroll,speed); area.scrollTop++; } setTimeout(start,delay); } </script> </body> </html> 

原理:
取出要显示文字的部分(这里暂且称其为a部分),复制一份a部分本身连接在a部分后面,形成重复一次的效果(这里暂且称之为aa部分);随着aa部分渐渐向上滚动,当aa部分滚动的高度与原本a部分的高度一样的时候,将aa部分迅速挪到最初始的位置,即可实现循环滚动的效果;

想要显示多条数据,只需要改动out样式的“height: 42px”部分即可;

后记:第一次写文,大概记录一下新闻垂直滚动的效果,原理不画图很难解释清楚哇…

原文链接:https://blog.csdn.net/fairydeng/article/details/83274262?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277607816782184625433%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277607816782184625433&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-17-83274262-null-null.nonecase&utm_term=%E6%96%B0%E9%97%BB

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片