js はシームレスなスクロールを実現し、IE や FF_javascript スキルと互換性があります-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

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); 
};