js、jQuery实现文字上下无缝轮播、滚动效果

时间：2024-07-04 09:36:32

因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。

原生JS版本

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>文字上下无缝轮播</title>

</head>

<style>

    * {

        margin: 0;

        padding: 0;

    }

    #container{

        width: 60%;

        margin: 100px auto;

        position: relative;

        height: 200px;

        overflow: hidden;

    }

    #list-wrapper{

        position: relative;

    }

    ul {

        list-style: none;

        background: #f8f8f8;

        text-align: center;

        padding: 0 20px;

    }

    li{

        height: 35px;

        line-height: 35px;

        color: #fff;

    }

    li:nth-child(odd){

        background: #5077aa;

    }

    li:nth-child(even){

        background: #fb6b06;

    }

</style>

<body>

<div id="container">

    <div id="list-wrapper" style="top: 0">

        <ul class="notice-list" id="notice-list">

            <li>富强、*、文明、和谐、*1</li>

            <li>富强、*、文明、和谐、*2</li>

            <li>富强、*、文明、和谐、*3</li>

            <li>富强、*、文明、和谐、*4</li>

            <li>富强、*、文明、和谐、*5</li>

            <li>富强、*、文明、和谐、*6</li>

        </ul>

        <ul class="notice-list" id="notice-list-2">

        </ul>

    </div>

</div>

<script>

    var ROLL_SPEED = 100

    var noticeList1 = document.getElementById('notice-list');

    var noticeList2 = document.getElementById('notice-list-2');

    var listWrapper = document.getElementById('list-wrapper');

    noticeList2.innerHTML=noticeList1.innerHTML;

    var timer = setInterval(rollStart, ROLL_SPEED);

    function rollStart() {

        if (Math.abs(_subStr(listWrapper.style.top)) >= noticeList1.clientHeight) {

            listWrapper.style.top = '0px'

        } else {

            var top = listWrapper.style.top

            listWrapper.style.top = _subStr(top)-1+'px'

        }

    }

    // 截取px前数值

    function _subStr(str) {

        var index = str.indexOf('px');

        if (index > -1) {

            return parseFloat(str.substr(0, index + 1))

        }

    }

</script>

</body>

</html>

jQuery版本

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>文字上下无缝轮播</title>

</head>

<style>

    * {

        margin: 0;

        padding: 0;

    }

    #container{

        width: 60%;

        margin: 100px auto;

        position: relative;

        height: 200px;

        overflow: hidden;

    }

    #list-wrapper{

        position: relative;

        top: 0;

    }

    ul {

        list-style: none;

        background: #f8f8f8;

        text-align: center;

        padding: 0 20px;

    }

    li{

        height: 35px;

        line-height: 35px;

        color: #fff;

    }

    li:nth-child(odd){

        background: #5077aa;

    }

    li:nth-child(even){

        background: #fb6b06;

    }

</style>

<body>

<div id="container">

    <div id="list-wrapper">

        <ul class="notice-list" id="notice-list">

            <li>富强、*、文明、和谐、*1</li>

            <li>富强、*、文明、和谐、*2</li>

            <li>富强、*、文明、和谐、*3</li>

            <li>富强、*、文明、和谐、*4</li>

            <li>富强、*、文明、和谐、*5</li>

            <li>富强、*、文明、和谐、*6</li>

        </ul>

        <ul class="notice-list" id="notice-list-2">

        </ul>

    </div>

</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script>

    var ROLL_SPEED = 100

    var noticeList1 = $('#notice-list');

    var noticeList2 = $('#notice-list-2');

    var listWrapper = $('#list-wrapper');

    noticeList2.html(noticeList1.html())

    listWrapper.css('top', 0)

    var timer = setInterval(rollStart, ROLL_SPEED);

    function rollStart() {

        if (Math.abs(_subStr(listWrapper.css('top'))) >= noticeList1.height()) {

            listWrapper.css('top', 0)

        } else {

            var top = listWrapper.css('top');

            listWrapper.css('top', _subStr(top) - 1)

        }

    }

    // 截取px前数值

    function _subStr(str) {

        var index = str.indexOf('px');

        if (index > -1) {

            return parseFloat(str.substr(0, index + 1))

        }

    }

</script>

</body>

</html>

相关文章