ホームページ ウェブフロントエンド jsチュートリアル js はシームレスなスクロールを実現し、IE や FF_javascript スキルと互換性があります

js はシームレスなスクロールを実現し、IE や FF_javascript スキルと互換性があります

May 16, 2016 pm 06:49 PM
js シームレスなスクロール

原理分析:
1. 最初にコンテナの高さまたは幅 (ul など) を設定し、overflow:hidden を設定します。
2. コンテナの高さを設定した後、コンテンツの高さを設定します。 40pxを超えると、オーバーフローした部分が非表示になり、scrollTop属性が使用可能になります。overflow:scrollを使用して、コンテナのscrollTop(上下にスクロール)属性の値を変更します。コンテンツを 1 ノード分上下に移動します (スクロールの原理)。4. スクロールの高さがスクロールするノードの高さ以上の場合、scrollTop=0 を設定して子ノード ツリーの最初のノードから最後までスクロールすると、中断のないループ スクロール効果が表示されます。
html ソース コード


<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns ="http://www.w3.org/1999/xhtml">
<head>
<title>scroll</title> src=" divCycle.js" src="divCycle.js"></script>
<style><!--
li{ height:20px>
-> ;< /style><style bogus="1">li{ 高さ:20px;
</head>
<div> ;
<ul id="list" style="border:1px #ccc Solid; overflow:hidden; height:40px; width:100px; margin:0; padding:0; list-style-type:none; ">
  • 1

  • 2

  • 3

  • 4
  • ;
  • 5

  • 7

  • 8
  • 🎜><li>9</li>
    </ul>
    </div> javascript"&gt ;<!--
    new simpleScroll("list",20,40,1);
    // --></script>
    </body>
    < /html>


    js ソース コード




    コードをコピーします

    コードは次のとおりです。

    // JavaScript Document

    /*****
    @author leaves chen (leaves615@gmail.com)
    @copyright 2009
    *****/
    var pause=false;
    var scrollTimeId=null;
    var container=null;
    var lineHeight=null;
    var speed=0;
    var delay=0;
    simpleScroll=function(container1,lineHeight1,speed1,delay1){
        container=document.getElementById(container1);
        lineHeight=lineHeight1;
        speed=speed1;
        delay=delay1;
        //滚动效果
        scrollexc=function(){
            if(pause) return ;
            container.scrollTop =2;
            var lh=lineHeight||container.getElementsByTagName('li')[0].offsetHeight;
            if(container.scrollTop%lh<=1){
                clearInterval(scrollTimeId);
                fire();
                container.scrollTop=0;
                setTimeout(start,delay*1000);
            }
        };
        //开始滚动
        start=function(){
            var lh=lineHeight||container.getElementsByTagName('li')[0].offsetHeight;
                if (container.scrollHeight - container.offsetHeight >= lh)
                    scrollTimeId = setInterval(scrollexc, speed);
        };
        //把子节点树中的第一个移动到最后
        fire=function(){
            container.appendChild(container.getElementsByTagName('li')[0]);
        };
        container.onmouseover=function(){pause=true;};
        container.onmouseout=function(){pause=false;};
        setTimeout(start,delay*1000);
    };

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

    ホットな記事タグ

    メモ帳++7.3.1

    メモ帳++7.3.1

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

    SublimeText3 中国語版

    SublimeText3 中国語版

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

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト(SublimeText3)

    JS と Baidu Maps を使用してマップ パン機能を実装する方法 JS と Baidu Maps を使用してマップ パン機能を実装する方法 Nov 21, 2023 am 10:00 AM

    JS と Baidu Maps を使用してマップ パン機能を実装する方法

    推奨: 優れた JS オープンソースの顔検出および認識プロジェクト 推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

    推奨: 優れた JS オープンソースの顔検出および認識プロジェクト

    株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます 株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます Dec 17, 2023 pm 06:55 PM

    株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます

    CSS でシームレスなスクロール効果を実現するためのヒントと方法 CSS でシームレスなスクロール効果を実現するためのヒントと方法 Oct 25, 2023 pm 12:31 PM

    CSS でシームレスなスクロール効果を実現するためのヒントと方法

    CSS を使用してシームレスなスクロール テキスト カルーセル効果を作成する方法 CSS を使用してシームレスなスクロール テキスト カルーセル効果を作成する方法 Oct 25, 2023 am 10:24 AM

    CSS を使用してシームレスなスクロール テキスト カルーセル効果を作成する方法

    PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする Dec 18, 2023 pm 03:39 PM

    PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする

    PHP と JS を使用して株価ローソク足チャートを作成する方法 PHP と JS を使用して株価ローソク足チャートを作成する方法 Dec 17, 2023 am 08:08 AM

    PHP と JS を使用して株価ローソク足チャートを作成する方法

    JSとBaidu Mapsを使って地図ポリゴン描画機能を実装する方法 JSとBaidu Mapsを使って地図ポリゴン描画機能を実装する方法 Nov 21, 2023 am 10:53 AM

    JSとBaidu Mapsを使って地図ポリゴン描画機能を実装する方法

    See all articles