検索

ホームページ  >  記事  >  ウェブフロントエンド  >  画像シームレススクロールコード(左/下/上)_JavaScriptスキル

画像シームレススクロールコード(左/下/上)_JavaScriptスキル

WBOY
WBOYオリジナル
2016-05-16 17:37:391267ブラウズ

誰もが気づいていると思いますが、 はループでスクロールしないので、多くの代替スクリプトが登場したり、iframe や JS 出力の をどのように実行しても、少し面倒です。この比較的単純な実装アイデアについて説明します。幅を設定してその幅を超えるコンテンツを非表示にし、その中にデモ 1 とデモ 2 を配置するデモ 2 は、demo1 の直接のクローンです。デモ 1 とデモ 2 の接続点までスクロールすると、デモ 1 とデモ 2 が同じであるため、ジャンプの瞬間が区別できなくなり、スクロールの目的が達成されます。 「シームレス」スクロール。

元の著者の作品に基づいて、主にスタイルを変更し、テーブルをラベルに置き換えました。また、JavaScript を標準化して、すべてのブラウザで実行できるようにします。

まず、オブジェクトのいくつかのプロパティについて学びましょう: innerHTML: オブジェクトの開始タグと終了タグにある HTML を設定または取得します。scrollHeight: オブジェクトのスクロールの高さを取得します。

scrollLeft: オブジェクトの左端とウィンドウ内で現在表示されているコンテンツの左端との間の距離を設定または取得します。ウィンドウ内のコンテンツscrollWidth : オブジェクトのスクロール幅を取得します offsetHeight : レイアウトまたは offsetParent プロパティで指定された親座標を基準としたオブジェクトの高さを取得します offsetLeft : レイアウトまたはoffsetParent プロパティで指定された親座標 offsetTop: オブジェクトの相対位置を取得します。 計算された上部の位置 offsetTop プロパティで指定されたレイアウトまたは親座標を基準とした offsetWidth: レイアウトまたは指定された親座標を基準としたオブジェクトの幅を取得しますoffsetParent プロパティによって

コードをコピー コードは次のとおりです:

图片上无缝滚动

向上滚动










<script> <br><!-- <BR>var speed=10; //数字越大速度越慢 <BR>var tab=document.getElementById("demo"); <BR>var tab1=document.getElementById("demo1"); <BR>var tab2=document.getElementById("demo2"); <BR>tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2 <BR>function Marquee(){ <BR>if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时 <BR>tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端 <BR>else{ <BR>tab.scrollTop++ <BR>} <BR>} <BR>var MyMar=setInterval(Marquee,speed); <BR>tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 <BR>tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 <BR>--> <br></script>
图片下无缝滚动

向下滚动










<script> <br><!-- <BR>varspeed=10; //数値が大きいほど速度が遅くなります <BR>var tab=document.getElementById("demo"); <BR> var tab1=document.getElementById("demo1"); <BR>var tab2=document.getElementById("demo2"); <BR>tab2.innerHTML=tab1.innerHTML; //demo2 としてデモ 1 をクローンします。 tab.scrollTop =tab.scrollHeight <BR>function Marquee(){ <BR>if(tab1.offsetTop-tab.scrollTop>=0)//demo1とdemo2の交差点までスクロールする場合<BR>tab.scrollTop =tab2 .offsetHeight // デモは先頭にジャンプします <BR>else{ <BR>tab.scrollTop-- <BR>} <BR>} <BR>var MyMar=setInterval(Marquee,speed); function() { clearInterval(MyMar)};//スクロールを停止するためにマウスが上に移動したときにタイマーをクリアします<BR>tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//マウスが離れる タイマー<BR>--> <br></script>
画像左シームレススクロール
<--
#demo {
background: #FFF;
overflow:hidden;
border: 1px 破線 #CCC;
#demo img { <🎜; > ボーダー: 3px ソリッド #F2F2F2;
}
#indemo {
幅: 800%;
}
#demo1 {
フロート: 左;
}
#demo2 {
float: left;
}
-->














<--
varspeed=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)}; .onmouseout =function() {MyMar=setInterval(Marquee,speed)};
-->
画像右シームレス スクロール
🎜 >右にスクロール

="#">





;



<-
varspeed=10; //数値が大きいほど速度は遅くなります。
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab.scrollLeft<=0)
タブ.scrollLeft =tab2 .offsetWidth
else{
tab.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function(); {clearInterval(MyMar )};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
🎜>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jqueryに基づいて、背景の左側のメニューをクリックして上下にスライドしてdisplay_jqueryに移動します次の記事：jqueryに基づいて、背景の左側のメニューをクリックして上下にスライドしてdisplay_jqueryに移動します

関連記事

続きを見る