JavaScript4方向ギャップレススクロール集（マルチブラウザIE、Firefox対応）

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript4方向ギャップレススクロール集（マルチブラウザIE、Firefox対応）_代表的な特殊効果

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:04 PM

互換性があるスクロール

学習... JS 制作リファレンスのこのセクション MSClass.js

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

boxmove(d1,d2,d3,e,obj) 
d1 = 周辺コンテナ 
d2 = コンテンツ 
d3 = d2 のコンテンツをコピーして、循環スクロールを置き換えます 
e = 方向メソッド 
 1 、2、3、4 = 自動スクロール、それぞれ上、右、下、左に対応 
 "上"、"右"、"下"、"左" = 手動スクロール、対応to: top、right、bottom 、Left 
 obj = 手動スクロールが選択されている場合にこれに設定され、イベント バインディング操作に使用されます。自動スクロールの設定は必要ありません。 

<h1>
</h1>スクロールコレクション<hr>
<h2>

</h2>上<div id="a" style="overflow:hidden;height:100px;width:90px;">
<div id="a1">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
</div>
<div id="a2">
</div>
</div>
<h2>
</h2>

</h2>手動スクロール - <div id="aa" style="overflow:hidden;height:100px;width:90px;">上<div id="aa1"> <img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">下<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt=""><img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
</div>
<div id="aa2">
</div>
</div>
<script type="text/javascript"> 
// 自动滚动 
function boxmove(d1,d2,d3,e,obj){ 
    var speed=30; 
    var demo=document.getElementById(d1);  
    var demo1=document.getElementById(d2);  
    var demo2=document.getElementById(d3); 
    demo2.innerHTML=demo1.innerHTML; 
    function boxTop(){ 
            if(demo2.offsetTop-demo.scrollTop<=0){demo.scrollTop-=demo1.offsetHeight} 
            else{demo.scrollTop++} 
        } 
    function boxRight(){ 
            if(demo.scrollLeft<=0){demo.scrollLeft+=demo2.offsetWidth} 
            else{demo.scrollLeft--} 
        } 
    function boxBottom(){  
            if(demo1.offsetTop-demo.scrollTop>=0){demo.scrollTop+=demo2.offsetHeight} 
            else{demo.scrollTop--} 
        } 
    function boxLeft(){ 
            if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth} 
            else{demo.scrollLeft++} 
        } 
    if(e==1){ 
            var MoveTop=setInterval(boxTop,speed); 
            demo.onmouseover=function(){clearInterval(MoveTop);} 
            demo.onmouseout=function(){MoveTop=setInterval(boxTop,speed)} 
        } 
    if(e==2){ 
            var MoveRight=setInterval(boxRight,speed); 
            demo.onmouseover=function(){clearInterval(MoveRight)} 
            demo.onmouseout=function(){MoveRight=setInterval(boxRight,speed)} 
        } 
    if(e==3){ 
            var MoveBottom=setInterval(boxBottom,speed); 
            demo.onmouseover=function(){clearInterval(MoveBottom);} 
            demo.onmouseout=function(){MoveBottom=setInterval(boxBottom,speed)} 
        } 
    if(e==4){ 
            var MoveLeft=setInterval(boxLeft,speed) 
            demo.onmouseover=function(){clearInterval(MoveLeft)} 
            demo.onmouseout=function(){MoveLeft=setInterval(boxLeft,speed)} 
        } 
    if(e=="top"){ 
            MoveTop=setInterval(boxTop,speed) 
            obj.onmouseout=function(){clearInterval(MoveTop);} 
        } 
    if(e=="right"){ 
            MoveRight=setInterval(boxRight,speed) 
            obj.onmouseout=function(){clearInterval(MoveRight);} 
        } 
    if(e=="bottom"){ 
            MoveBottom=setInterval(boxBottom,speed) 
            obj.onmouseout=function(){clearInterval(MoveBottom);} 
        } 
    if(e=="left"){ 
            MoveLeft=setInterval(boxLeft,speed) 
            obj.onmouseout=function(){clearInterval(MoveLeft);} 
        } 
    }     
</script>
<script type="text/javascript"> 
boxmove("a","a1","a2",1); 
</script>
<script type="text/javascript"> 
boxmove("b","b1","b2",2); 
</script><script type="text/javascript"> 
boxmove("c","c1","c2",3); 
</script>
<script type="text/javascript"> 
boxmove("d","d1","d2",4); 
</script><h2>Manual scrolling - <strong onmouseover="boxmove('bb','bb1','bb2','left',this);">Left</strong> <strong onmouseover="boxmove('bb','bb1','bb2','right',this);">Right</strong>
</h2>
<div id="bb" style="overflow:hidden;height:100px;width:90px;">
<div id="bb1">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
</div>
<div id="bb2"></div>
</div>

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7529

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

JavaScriptで指定した要素の位置へのスクロールを実装するにはどうすればよいですか? Oct 22, 2023 am 08:12 AM

JavaScriptで指定した要素位置までスクロールする機能を実装するにはどうすればよいですか? Web ページにおいて、ユーザーの視線を特定の要素の位置に集中させる必要がある場合、JavaScript を使用して、指定された要素の位置までスクロールする機能を実装できます。この記事では、JavaScript を使用してこの関数を実装する方法と、対応するコード例を紹介します。まず、対象要素の位置情報を取得する必要があります。 Element.getBoundingClientを使用できます

Win10 の最も安定したバージョン Dec 25, 2023 pm 07:58 PM

多くのユーザーは、コンピューターの操作中にフリーズやブルースクリーンに遭遇することがありますが、現時点では、最も安定して動作する Win10 バージョンを見つける必要があります。全体的に非常に使いやすく、毎日の使用がスムーズになります。史上最も安定したWin10バージョン 1. Win10純正のオリジナルシステム. ユーザーは簡単な操作を使用できます. システムは最適化されており、強力な安定性、セキュリティと互換性を備えています. ユーザーは手順に従って完璧なマシンを達成できます. 2. ロシアのマスター合理化 win10 のバージョンは厳密に合理化され、多くの不要な機能やサービスが削除されました。合理化後は、システムの CPU とメモリの使用量が減り、動作が速くなります。 3. Win10 Lite Edition 1909 は、異なるハードウェアモデルの複数のコンピューターにインストールされています。

HTML、CSS、jQuery: 自動スクロール掲示板を作成する Oct 27, 2023 pm 06:31 PM

HTML、CSS、および jQuery: 自動的にスクロールする掲示板を作成する最新の Web デザインでは、重要な情報を伝え、ユーザーの注意を引くために掲示板がよく使用されます。自動スクロール掲示板は、Web ページ上で広く使用されており、掲示板のコンテンツがページ上でスクロールしてアニメーション形式で表示され、情報の表示効果とユーザーエクスペリエンスが向上します。この記事ではHTML、CSS、jQueryを使って自動スクロール掲示板を作る方法と具体的なコード例を紹介します。まず、HTが必要です

iframe のスクロール動作を監視する Feb 18, 2024 pm 08:40 PM

iframe のスクロールを監視する方法には、特定のコードサンプルが必要です。iframe タグを使用して Web ページに他の Web ページを埋め込む場合、場合によっては、iframe 内のコンテンツに対して特定の操作を実行する必要があります。一般的なニーズの 1 つは、スクロールが発生したときに対応するコードを実行できるように、iframe のスクロールイベントをリッスンすることです。以下では、JavaScript を使用して iframe のスクロールを監視する方法を紹介し、参考として具体的なコード例を示します。 iframe 要素を取得するまず、必要なものがあります。

Vueで全画面スクロール効果を実装する方法 Nov 08, 2023 am 08:42 AM

Vue で全画面スクロール効果を実現する方法 Web デザインでは、全画面スクロール効果はユーザーに非常にユニークでスムーズなブラウジングエクスペリエンスをもたらします。この記事では、Vue.js で全画面スクロール効果を実現する方法と具体的なコード例を紹介します。全画面スクロール効果を実現するには、まず Vue.js フレームワークを使用してプロジェクトを構築する必要があります。 Vue.js では、vue-cli を使用してプロジェクトのスケルトンをすばやく構築できます。次に、フルページなどのスクロール効果を実現するために、いくつかのサードパーティライブラリを導入する必要があります。

Switch2はSwitchカートリッジと互換性がありますか? Jan 28, 2024 am 09:06 AM

Switch2はGamescom 2023で任天堂から発表された新モデルですが、一部のプレイヤーは新モデルと以前のバージョンのカートリッジの間に互換性の問題があるのではないかと心配しています。 switch2 はスイッチカセットと互換性がありますか? 回答: switch2 はスイッチカセットと互換性がありません。 Switch 2 カートリッジの紹介任天堂の生産チェーン会社からの情報によると、Switch 2 は 64GB カートリッジを使用する可能性があります。パフォーマンスが向上し、より多くの 3A ゲームの名作をサポートするため、より大きなカートリッジ容量が必要になります。なぜなら、多くのゲーム作品は、ゲームカートリッジに詰める前に去勢して圧縮する必要があるからです。さらに、Switch のカートリッジはゲームコンテンツをコピーする傾向があるため、新しいカートリッジに交換してください。

Win11はダイナミック壁紙をサポートしていますか? Jan 01, 2024 pm 06:41 PM

ご存知のとおり、win11 の主な機能は独自の Android サブシステムであり、エミュレータを使用せずに Android ソフトウェアをインストールできますが、win11 Android アプリケーションの遅延の問題もあります。 win11 はダイナミック壁紙に対応していませんか? 回答: Win11 はダイナミック壁紙に対応していますが、使用できない場合は、ソフトウェアまたはシステムのバージョンが遅れている可能性があります。更新されたばかりの場合は、システムの壁紙で覆われている可能性があります。 1. システムまたはソフトウェアのバージョンが遅れている場合は、システムとダイナミック壁紙ソフトウェアを更新してください。 2. システムの壁紙で覆われている場合は、「設定」を開いてみてください。 3. 次に、「個人用設定」で「背景」設定を入力します。 4. 次に、パーソナライズされた背景を「写真」に変更します。 5. 変更が完了したら、通常どおりダイナミック壁紙を設定できます。

JavaScript を使用して、ページの一番下までスクロールしたときに自動的に読み込まれる無限スクロール効果を実現するにはどうすればよいですか? Oct 27, 2023 pm 06:30 PM

JavaScript は、ページの一番下までスクロールすると自動的に読み込まれる無限スクロール効果をどのように実現しているのでしょうか?無限スクロール効果は、現代の Web 開発における一般的な機能の 1 つであり、ページの一番下までスクロールすると、より多くのコンテンツが自動的に読み込まれるため、ユーザーはボタンやリンクを手動でクリックすることなく、より多くのデータやリソースを取得できます。この記事では、JavaScript を使用してこの機能を実現する方法を検討し、具体的なコード例を示します。ページの一番下までスクロールすると自動的に読み込まれる無限スクロール効果を実現するには、主に以下に分かれます

See all articles