源码git地址:https://github.com/yiyueqinghui/infinite-scroll
这个scroll.js是自己封装的,如有问题,请留言
1、第一步,引入js
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>
2、实例化
html
/*横向滚动*/
#weatherContent{
width:400px;
height: 30px;
margin:0 auto;
overflow: hidden;
position: relative;
}
#notice{
height: 100%;
white-space: nowrap; /*注意这点*/
position: absolute;
top: 0;
left: 0;
background: yellow;
margin: 0;
}
<div id="weatherContent">
<!--注意:滚动区域下一个节点不能直接是文本节点,否则无法克隆-->
<p id="notice"><span>通知:大风蓝色预警信号:渤海海峡西北风转西南风6级,阵风7到8级!!!!</span></p>
</div>
js
let scrollId = $('#notice');
let scrollObj = new InfiniteScoll(scrollId,null,{
direction:'row'
});