日志

js实现无缝滚动和间歇滚动

2018-12-12

0 评论

958 阅读

正在检测是否收录...

12/12

js实现无缝滚动和间歇滚动

其实现在网上已经有很多类似的插件了，直接搜一下即可拿来使用了，就不需要重复造轮子了。这里只是为了自己理解，了解无缝滚动的原理，鼠标经过和移除就没做相关的事件了，直接上HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>scorll</title>
<style>
    ul,li{
        margin:0;
        padding:0;
    }
    .scroll,.scroll2{
        height: 80px;
        width: 300px;
        border-radius: 10px;
        background: #CCC;
        padding:10px;
        margin:15px auto;
        }
    #scroll1,#scroll2{
        width:100%;
        height:100%;
        overflow: hidden;
    }
</style>
</head>
<body>
    
    <div>
        <div id="scroll1">
            <ul>
                <li>000000000000  <span>2018-12-12</span></li>
                <li>lllllllllll  <span>2018-12-12</span></li>
                <li>22222  <span>2018-12-12</span></li>
                <li>333  <span>2018-12-12</span></li>
                <li>4lllllllllll  <span>2018-12-12</span></li>
                <li>5lllllllllll  <span>2018-12-12</span></li>
                <li>6lllllllllll  <span>2018-12-12</span></li>
                <li>7lllllllllll  <span>2018-12-12</span></li>
                <li>8lllllllllll  <span>2018-12-12</span></li>
                <li>9lllllllllll  <span>2018-12-12</span></li>
                <li>l0llllllllll  <span>2018-12-12</span></li>
                <li>lllllllllll  <span>2018-12-12</span></li>
                <li>l2lllllllll  <span>2018-12-12</span></li>
                <li>l3lllllllll  <span>2018-12-12</span></li>
                <li>l4lllllllll  <span>2018-12-12</span></li>
                <li>l5lllllllll  <span>2018-12-12</span></li>
                <li>l6lllllllll  <span>2018-12-12</span></li>
                <li>l7lllllllll  <span>2018-12-12</span></li>
                <li>l8lllllllll  <span>2018-12-12</span></li>
                <li>l9lllllllll  <span>2018-12-12</span></li>
                <li>20lllllllll  <span>2018-12-12</span></li>
                <li>21lllllllll  <span>2018-12-12</span></li>
                <li>22222222222222  <span>2018-12-12</span></li>
            </ul>
        </div>
    </div>
    <div>
    <div id="scroll2">
        <ul id="item1">
            <li>第一个  <span>2018-12-12</span></li>
            <li>lllllllllll  <span>2018-12-12</span></li>
            <li>22222  <span>2018-12-12</span></li>
            <li>333  <span>2018-12-12</span></li>
            <li>4lllllllllll  <span>2018-12-12</span></li>
            <li>5lllllllllll  <span>2018-12-12</span></li>
            <li>l7lllllllll  <span>2018-12-12</span></li>
            <li>l8lllllllll  <span>2018-12-12</span></li>
            <li>l9lllllllll  <span>2018-12-12</span></li>
            <li>最后一个<span>2018-12-12</span></li>
        </ul>
    </div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/2.0.2/jquery.min.js"></script>
<script>
//间歇滚动
var liFirst = document.getElementById('scroll1').getElementsByTagName('li')[0];
var liH = liFirst.offsetHeight;
function autoScroll(){
    $('#scroll1 ul').animate({
        marginTop:'-'+liH+'px'
    },1000,function(){
        $(this).css('marginTop',0).find("li:first").appendTo(this);   
    })
}
setInterval('autoScroll()',2000);  //这里是设置了2秒滚动一次

//无缝滚动
var scroll2 = document.getElementById('scroll2'); //获取需要滚动的元素
function scrollUp(){
    var li2 = scroll2.getElementsByTagName('li')[0]; //第一个li
    var liH = li2.offsetHeight; //获取第一个li的高度
    ++scroll2.scrollTop; //屏幕向上滚动
    if( scroll2.scrollTop % liH == 0){ //滚动完第一个元素则把 元素移动追加到最后一个的后面，实现无缝滚动
        scroll2.getElementsByTagName('ul')[0].appendChild(li2);
    }
}
var scrollTime = setInterval('scrollUp()',40); //做一个定时器，40毫秒执行一次函数

</script>
</html>

代码量比较少，应该很容易理解，不明白的欢迎留言讨论~

朗读

版权属于：

Dcr163的博客

本文链接：

http://dcr163.cn/196.html（转载时请注明本文出处及文章链接）

Dcr163的博客

js实现无缝滚动和间歇滚动

js实现无缝滚动和间歇滚动

人生倒计时

热门文章

最新回复

标签云