この記事では、JSのシームレスなスクロール効果の簡単な実装について説明します。次のように、参照のために共有してください。
<！doctype html> <title> javascriptシームレススクロール< /title> <meta charset = "utf-8" /> <meta name = "keywords" content = "javascriptシームレススクロール" /> <メタ= "説明" content = "javascript seamless scroll" /> <style type = ""> cs "> cs"> yahei "、kaiti_gb2312、simsun} #marquee {position：relative;幅：400px;オーバーフロー：隠し;国境：10pxソリッド＃8080C0; } #marquee img {border：0px; } #marquee dl、#marquee dt、#marquee dd、#marquee a {float：left;マージン：0;パディング：0; } #marquee dl {width：1000％;高さ：150px; } </style> <script type = "text/javascript"> var marquee = function（id）{try {document.execcommand（ "backgroundimagecache"、false、true）; } catch（e）{}; var container = document.getElementById（id）、original = container.getElementsByTagname（ "dt"）[0]、clone = container.getElementsByTagname（ "dd"）[0]、speed = arguments [1] || 10; clone.innerhtml = original.innerhtml; container.scrollleft = clone.offsetLeft var rolling = function（）{if（container.scrollleft == 0）{container.scrollleft = clone.offsetLeft; } else {container.scrollleft--; }} varタイマー= setInterval（ローリング、速度）//タイマーコンテナを設定します。 {marquee（ "marquee"）;} </script> <h1> javascriptシームレススクロール（右にスクロール）</h1> <div id = "marquee"> <dl> <dt> <a href = "###"> <img src = "img/o_s017.jpg"/> </a src = "img/o_s018.jpg"/> </a> <a href = "###"> <img src = "img/o_s018.jpg"/> </a> <a href = "###"> <img src = "img/o_s019.jpg"/> </a <A。 href = "###"> <img src = "img/o_s020.jpg"/> </a> <a href = "###"> <img src = "img/o_s021.jpg"/> </a> <a href = "##" <a href = "###"> <img src = "img/o_s022.jpg"/> </a> <a href = "###"> <img src = "img/o_s022.jpg"/> </a> <a href = "###"> <img src = "img/o_s023.jpg"/> </a> </dt> <dd> </dd> </dl> </div>レンダリングは次のとおりです。
JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください：「JavaScriptの切り替え効果とテクニックの要約」、「JavaScript検索アルゴリズムスキルの要約」、「JavaScriptアニメーション効果とテクニックの概要」、「Javascriptエラー、および「Javascriptデータ構造」の概要」の概要の要約の要約をご覧ください。 JavaScriptトラバーサルアルゴリズムとテクニック」、および「JavaScriptの数学的操作の使用法の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。