コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

WBOY
リリース： 2016-05-16 17:37:39
オリジナル
1265 人が閲覧しました

誰もが気づいていると思いますが、 はループでスクロールしないので、多くの代替スクリプトが登場したり、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)};
🎜>
関連ラベル：
シームレスなスクロール
ソース：php.cn
前の記事：jqueryに基づいて、背景の左側のメニューをクリックして上下にスライドしてdisplay_jqueryに移動します 次の記事：jquery_jqueryをベースに左右ボタンクリックによる画像の横スクロールを実装します。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
非表示のサイドパネルを表示: チェックが入っています アニメーション化されたハンバーガー メニューを介してビューに切り替える機能を備えたナビゲーション メニューをサイド パネルに追加したいと考えています。 JSを使わずにCSSだけで作...
から 2024-04-06 15:49:33
0
1
319
React Three Fiber: スクロール イベントが遅れるのはなぜですか? ReactThreeFiber には、カメラのズーム全体にわたって保持したいスプライトを生成する React コンポーネントがあります。アルゴリズムは機能しているようですが (サイ...
から 2024-04-06 13:39:24
0
1
410
Live Server を使用する Web サイトをファイルから起動すると機能しません いくつかのブラウザを試してみましたが、いずれの場合も Web サイトは LiveServer で正常に動作しました。一方、Firefox/Chrome を使用してサイトを起動すると...
から 2024-04-06 12:46:18
0
1
403
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート