无缝滚动实现方式一：用自身的offsetLeft 实现

最新推荐文章于 2024-05-22 11:20:37 发布

原创最新推荐文章于 2024-05-22 11:20:37 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript 基本小效果的实现 #函数

Webpage Effects 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现元素无缝滚动的方法。通过克隆节点并利用offsetLeft属性，可以创建平滑且无限循环的水平滚动效果。

基础样式：

/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式*/ 
*{margin: 0;padding: 0;list-style: none;outline: none;}
.inner{width: 320px;height: 180px;position: relative;overflow: hidden;}
#box{width: 320px;height: 180px;padding: 5px;border: 1px solid #ddd;margin: 100px auto 0;}
.inner ul{width: 1000%;position: absolute;top: 0;left: 0;}
.inner ul li{float: left;}
span.span{display: block;width: 320px;height:180px;}
span.span1{background-color: pink;}
span.span2{background-color: red;}
span.span3{background-color: green;}
span.span4{background-color: purple;}
span.span5{background-color: blue;}

html骨架：

<div id="box">
    <div class="inner">
        <ul>
            <li>
                <a href="#none">
                    <span class='span span1'></span>
                </a>
            </li>
            <li>
                <a href="#none">
                    <span class='span span2'></span>
                </a>
            </li>
            <li>
                <a href="#none">
                    <span class='span span3'></span>
                </a>
            </li>
            <li>
                <a href="#none">
                    <span class='span span4'></span>
                </a>
            </li>
            <li>
                <a href="#none">
                    <span class='span span5'></span>
                </a>
            </li>
        </ul>
    </div>
</div>

javascript模块：

scroll('box'); // 调用函数
// 用自身的offsetLeft 实现的无缝滚动 (同理可用offsetTop实现上下的无缝滚动效果) 
function scroll(eleId) {
    var con = document.getElementById(eleId);
    var inner = con.children[0];
    var ul = inner.children[0];
    var ulis = ul.children;
    var l = ulis.length;
    var unit = inner.offsetWidth;

    // 克隆节点并且添加到ul里面
    for(var i = 0; i < l; i++) {
        ul.appendChild( ulis[i].cloneNode(true) );
    }
    // 运动开始
    con.timer = setInterval(move,1);
    function move() {
        ul.style.left = ul.offsetLeft - 1 + 'px';
        if(ul.offsetLeft <= - unit * l ){
            ul.style.left = 0;
        }
    }
    con.onmouseover = function() {
        clearInterval(con.timer);
    }
    con.onmouseout = function() {
        clearInterval(con.timer);
        con.timer = setInterval(move,1);
    }
}