断続的でシームレスなスクロール効果(GIFを使用した録音の効果はあまり良くありません。興味があればコードをダウンできます)、特定のコンテンツは次のとおりです。
コード:
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>シームレススクロール</title> <style> *{margin:0; padding:0;} .box {width:500px; height:height:400px; magrat;相対;幅:500px;高さ:400px;オーバーフロー:hidden;} item {height:40px; color:#fff; line-height:40px; text-align:center;} .item:nth-child(2n){background:#000} </stircion> <crupt> <scrollup => <scrollup => <scrollup => <scrollup => <scrollup => <scrollup => <scrollup = = document.getElementById(json.id); } else {objscroll.scrolltop ++; } else {var timer(){timerval(){scrollup()、30); } else {objscrolltop ++;スクロールの高さ:断続的なスクロールアップ({on:true、id: 'block'}); scrollup({id: 'block2'、height:120}); } </script> </head> <body> <div> <div id = "block"> <div> 1シームレススクロール</div> <div> 2シームレススクロール</div> <div> 3 3 div> div> div> 4シームレススクロール</div> <div> <div> 8シームレススクロール</div> <div> 9シームレススクロール</div> <div> 10シームレススクロール</div> <div> 11 div> <div> 12シームレススクロール</div> <div> 13 id = "block2"> <div> 1断続的な巻物</div> <div> 1断続的なスクロール</div> <div> 2断続的なスクロール</div> <div> 3断続的な巻物</div> <div>スクロール</div> <div> 8断続的な巻物</div> <div> 9断続的な巻物</div> <div> 10断続的なスクロール</div> <div> 12断続的な巻物</div> <div> 12断続的な巻物</div> <div> 13 intermittentスクロール< </div> </div> </div> </body> </html>注記:
1.ボックスブロックはCSSオーバーフローと非表示である必要があります:オーバーフロー:隠し
2。断続的なスクロール/シームレススクロールの2つの機能があります
3.まず、まったく同じコードの一部をコピーしてシームレスにスクロールします。実行タイマーは、スクロールトップ値を増やし続けます。スクロールトップの値がボックスの高さよりも大きい場合は、スクロールトップを0に設定して、もう一度やり直します。断続的なスクロールがこれに基づいて追加され、SetimeOutは断続的に実行され、Scrolltopが到着すると指定された高さが停止します。
4。質問:setInterval(function(){scrolling()}、30);コードでは、このように書くことで実行できます。これは機能しません。素晴らしいマスターのガイダンスはありますか? 2つの違いは何ですか?メカニズムは何ですか?
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。