js、jQuery實現文字上下無縫輪播、滾動效果

賣女孩的小火柴發表於2018-06-29
JSjQuery

因專案需要實現訊息通知上下無縫輪播的效果，所以寫了一下，在這個分享出來，希望再次遇到此需求的道友，可以直接拷貝來用，節約一點不必要的時間。

原生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>

相關文章