この記事では、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プログラミングに役立つことを願っています。