H5类似淘宝头条垂直滚动效果

不同样式的垂直滚动：

无缝垂直滚动；
间歇性垂直滚动（一次滚动一条）；
间歇性垂直滚动（一次滚动两条）；

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

关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。

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>

H5类似淘宝头条垂直滚动效果相关推荐

Android基础控件——ViewFlipper的使用，仿淘宝头条垂直滚动广告条
ViewFlipper的使用,仿淘宝头条垂直滚动广告条学习,学习,学以致用 ViewFlipper是安卓自带的控件,很多人可能很少知道这个控件,这个控件很简单,也很好理解,能不能用上实战就看你们的本 ...
ViewFlipper实现文字轮播(仿淘宝头条垂直滚动广告)
ViewFlipper实现文字轮播(仿淘宝头条垂直滚动广告) 广告条目可以单独写成布局文件,然后在布局文件或者代码中添加到总布局中从源码可以看出,其实ViewFlipper间接的继承了FrameLa ...
Android 垂直滚动广告条，仿淘宝头条垂直滚动展示最新消息
最新的项目有个新需求,就是要去垂直滚动去展示最新发布的消息,类似淘宝头条的那种 1.功能实现其实很简单,就用到Android 的原生控件ViewFlipper <ViewFlipperandro ...
Android——仿淘宝头条垂直滚动广告
淘宝App大家用的都比较多了哈,最近看淘宝头条比较多,就来写个小例子吧. 垂直滚动广告的实现原理其实比较简单,就是定时更新列表内容嘛,然后列表切换的时候再加点炫酷的动画就OK了.如果对Android控 ...
Android仿淘宝头条垂直滚动，垂直走马灯，公告
今天看了淘宝头条的的滚动,感觉用户体验非常好,然后在就github上找到了一个, github:https://github.com/gongwen/MarqueeViewLibrary 效果图如下: ...
Android 原生控件ViewFlipper实现淘宝头条垂直滚动广告条
showPrevious(): 显示ViewFlipper里的上一个View 四.ViewFlipper的详细使用设置View 1.首先在xml中声明ViewFlipper < ...
React实现类似淘宝tab居中切换效果
效果 DOM布局 const label = {lettersort: false,paramname: "label",paramid: 0,title: "车源列表筛 ...
利用html5中canvas实现类似淘宝的放大图片效果
<!DOCTYPE html> <html> <head> </head> <body> <!-- 这里定义原始图片,设置鼠标移动到图 ...
Android【垂直滚动广告条】仿淘宝头条1号店京东—垂直滚动广告条
文章为博主原创,欢迎大家进行阅读和转载,转载请注明出处:http://blog.csdn.net/sophie237/article/details/54911349 淘宝头条是淘宝App中很经典的一 ...