{"id":56,"date":"2024-08-22T09:56:51","date_gmt":"2024-08-22T01:56:51","guid":{"rendered":"https:\/\/a.li6.cc\/?p=56"},"modified":"2024-08-23T15:32:17","modified_gmt":"2024-08-23T07:32:17","slug":"js-%e6%96%87%e5%ad%97%e6%97%a0%e7%bc%9d%e6%bb%9a%e5%8a%a8-%e6%bb%9a%e5%b1%8f%e7%89%b9%e6%95%88","status":"publish","type":"post","link":"https:\/\/a.li6.cc\/index.php\/2024\/08\/22\/js-%e6%96%87%e5%ad%97%e6%97%a0%e7%bc%9d%e6%bb%9a%e5%8a%a8-%e6%bb%9a%e5%b1%8f%e7%89%b9%e6%95%88\/","title":{"rendered":"js \u6587\u5b57\u65e0\u7f1d\u6eda\u52a8 \u6eda\u5c4f\u7279\u6548\u5206\u6790"},"content":{"rendered":"

https:\/\/blog.csdn.net\/qq_39232387\/article\/details\/107337189<\/a><\/p>\n

\n\u9700\u8981\u624b\u52a8\u521b\u5efa\u4e00\u4e2a\u4e00\u6837\u7684\u5185\u5bb9\n\n<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset="utf-8">\n        <title><\/title>\n        <style type="text\/css">\n            .scrollCon {\n                width: 500px;\n                height: 150px;\n                overflow: hidden;\n            }\n            ul,li {\n                margin: 0;\n                list-style: none;\n            }\n            li {\n                height: 40px;\n            }\n        <\/style>\n    <\/head>\n    <body>\n        <div class="scrollCon" id="scrollCon">\n            <ul id="scrollCon1">\n                <li>1<\/li>\n                <li>2<\/li>\n                <li>3<\/li>\n                <li>4<\/li>\n                <li>5<\/li>\n                <li>6<\/li>\n            <\/ul>\n            <ul id="scrollCon2">\n\n            <\/ul>\n        <\/div>\n        <script type="text\/javascript">\n            var conScroll = function(){\n                var scrollCon = document.getElementById("scrollCon");\n                var li = scrollCon.getElementsByTagName("li");\n                var scrollCon1 = document.getElementById("scrollCon1");\n                var scrollCon2 = document.getElementById("scrollCon2");\n                if(li.length > 3){\n                    scrollCon2.innerHTML = scrollCon1.innerHTML;\n                    scrollCon.scrollTop = 0;\n                    function rollStart(){\n                        if(scrollCon.scrollTop >= scrollCon1.scrollHeight){\n                            scrollCon.scrollTop = 0;\n                        }else{\n                            scrollCon.scrollTop++;\n                        }\n                    }\n                    var timer = setInterval(rollStart, 50);\n                    scrollCon.onmouseover = function(){\n                        clearInterval(timer);\n                    }\n                    scrollCon.onmouseout = function(){\n                        timer = setInterval(rollStart, 50);\n                    }\n                }\n            };\n            conScroll();\n        <\/script>\n    <\/body>\n<\/html>\n<\/code><\/pre>\n
\u4ee5\u4e0ademo\u5176\u5b9e\u5e76\u4e0d\u5b8c\u7f8e\uff0c\u8c03\u8bd5\u53d1\u73b0\uff1a
\n\u4e24\u4e2a\u6eda\u52a8\u7684\u5bb9\u5668\u5fc5\u987b\u8bbe\u7f6e\u9ad8\u5ea6\uff0c\u800c\u4e14\u6700\u7ec8\u7ed3\u679c\u53d1\u73b0\u6eda\u52a8\u5230\u4e00\u534a\u5c31\u65e0\u6cd5\u7ee7\u7eed\u79fb\u52a8\u3002
\n\u5728\u7eafdemo\u91cc\u662f\u6ca1\u95ee\u9898\uff0c\u4f46\u5728\u4f7f\u7528\u573a\u666f\u91cc\u5374\u4e0d\u517c\u5bb9\u3002
\n\u6545\u6539\u6210\u4ee5\u4e0bdemo\uff0c\u7528css\u7684transform\u5b9e\u73b0\u79fb\u52a8\u66f4\u52a0\u6d41\u7545<\/p>\n
var conScroll = function(){\n                    var mouseObj = parentBoxNode;\n                    var moveObj = moveBox1Node;\n                    var secondObj = moveBox2Node;\n                    moveObj.style.transform = 'translateY(0px)';\n                    var currentTop = 0;\n                    function rollStart(){\n                        if(Math.abs(currentTop) >= 262){\n                            currentTop = 0;\n                            moveObj.style.transform = 'translateY(0px)';\n                            secondObj.style.transform = 'translateY(0px)';\n                        } else {\n                            currentTop --;\n                            moveObj.style.transform = 'translateY(' + currentTop + 'px)';\n                            secondObj.style.transform = 'translateY(' + currentTop + 'px)';\n                        }\n                    }\n                    var timer = setInterval(rollStart, 50);\n                    mouseObj.onmouseover = function(){\n                        clearInterval(timer);\n                    }\n                    mouseObj.onmouseout = function(){\n                        timer = setInterval(rollStart, 50);\n                    }\n                };\n                conScroll();<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
https:\/\/blog.csdn.net\/qq_39232387\/articl … \u7ee7\u7eed\u9605\u8bfb →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/a.li6.cc\/index.php\/wp-json\/wp\/v2\/posts\/56"}],"collection":[{"href":"https:\/\/a.li6.cc\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a.li6.cc\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a.li6.cc\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a.li6.cc\/index.php\/wp-json\/wp\/v2\/comments?post=56"}],"version-history":[{"count":3,"href":"https:\/\/a.li6.cc\/index.php\/wp-json\/wp\/v2\/posts\/56\/revisions"}],"predecessor-version":[{"id":60,"href":"https:\/\/a.li6.cc\/index.php\/wp-json\/wp\/v2\/posts\/56\/revisions\/60"}],"wp:attachment":[{"href":"https:\/\/a.li6.cc\/index.php\/wp-json\/wp\/v2\/media?parent=56"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a.li6.cc\/index.php\/wp-json\/wp\/v2\/categories?post=56"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a.li6.cc\/index.php\/wp-json\/wp\/v2\/tags?post=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}