JavaScript はスムーズでシームレスなスクロールを実現します_javascript スキル

この記事では、ローリング広告効果を純粋な JS で実装します。具体的な内容は次のとおりです。

最初に完成品を見せてみましょう:

最初は Web ページのスタイルです:

#demo {
 background: #FFF;
 overflow:hidden;
 border: 1px dashed #CCC;
 width: 1280px;
 height:200px;
 }
 #demo img {
 border: 3px solid #F2F2F2;
 }
 #indemo {
 float: left;
 width: 800%;
 }
 #demo1 {
 float: left;
 }
 #demo2 {
 float: left;
 }

レイアウトは次のとおりです:

 <div id="demo">
 <div id="indemo">
 <div id="demo1">
 <a href="#"><img  src="/static/imghwm/default1.png"  data-src="banner.jpg"  class="lazy" border="0" / alt="JavaScript はスムーズでシームレスなスクロールを実現します_javascript スキル" ></a>
 <a href="#"><img  src="/static/imghwm/default1.png"  data-src="banner2.jpg"  class="lazy" border="0" / alt="JavaScript はスムーズでシームレスなスクロールを実現します_javascript スキル" ></a>
 </div>
 <div id="demo2"></div>
 </div>
 </div>

特定の JS 実装:

<script>
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft==0)
tab.scrollLeft-=tab1.offsetWidth
else{

 tab.scrollLeft++;

 }
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval
(Marquee,speed)};
</script>

ここで注意すべき点は次のとおりです:

scrollLeft は、スクロール バーを使用してページを右にスクロールしたときにスクロール バーの左側に隠れるページの幅を表します。

offsetWidth は、スクロール バーやその他の端を含むオブジェクトの表示幅であり、ウィンドウの表示サイズによって変化します。

setInterval() メソッドは、指定された期間 (ミリ秒) に従って関数を呼び出したり、式を計算したりできます。 setInterval() メソッドは、clearInterval() が呼び出されるか、ウィンドウが閉じられるまで関数を呼び出し続けます。

具体的な実装を理解すると理解しやすくなります。

実装原則は次のとおりです。まず、スクロールする必要があるコンテンツをコピーします。右のdivで表示される内容が左のシャドウの内容と同じ場合は、親コンテナの左側のシャドウの内容が表示され、左のシャドウの内容が表示されます。右側は再び非表示になります。右側に表示されているコンテンツが左側に表示されているコンテンツよりも小さい場合、親コンテナは引き続き左側に移動して非表示にします。注意点としては、2枚の写真を左側に同時に配置しているため、右側の半分を表示すると左側の隠れている影が全部表示されてしまい、右側に表示されている内容が表示されてしまうため、左側のコンテンツは同じであるため、循環スクロールの効果が得られます。

このようにしてスムーズなスクロールが実現されます。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。