Javascriptスクロール効果を柔軟に制御できるプログラムを共有

11009 ワード
JavaScript
この間、jqueryがスクロール効果を実現する文章をいくつか書いたことがありますが、閲覧量が多いので、これを必要とする人が多いようです.前のいくつかの文章はすべて別々に書いたので、例えば文字のスクロール、画像のスクロール、垂直スクロール、水平スクロール、このようにとても良いパッケージ性がなくて、再利用に不利で、使うのは難易度の係数も少し高いです.この数日前の文章を参考にして、この効果をカプセル化して、もっと柔軟で、もっと使いやすいことを期待しています.
このプログラムは現在実装されています.
1、文字、画像のスクロール
2、水平(左右)、垂直(上下)スクロール
3、多種類のブラウザに対応:IE、Firefox、Opera、Chrome
4、スクロール間隔と各スクロール距離の設定
5、スクロール領域の幅、高さを設定する
まず、使い方を見てみましょう.

  
    

   
     <
   
     html
   
     >
   
     

   
     <
   
     head
   
     >
   
     

   
     <
   
     title
   
     >
   
           
   
     </
   
     title
   
     >
   
     

   
     <
   
     script 
   
     type
   
     ="text/javascript"
   
      src
   
     ="bossma-jscroll.js"
   
     ></
   
     script
   
     >
   
     

   
     <
   
     script 
   
     type
   
     ="text/javascript"
   
     >
   
     
window.onload
   
     =
   
     function
   
     (){

   
     //
   
          ：    ，    ，  ID，    ，    ，      ，      ，    
   
     

   
     var
   
      scroll 
   
     =
   
     new
   
      JScroll(
   
     "
   
     left
   
     "
   
     ,
   
     30
   
     ,
   
     "
   
     content
   
     "
   
     ,
   
     558
   
     ,
   
     165
   
     ,
   
     1674
   
     ,
   
     165
   
     ,
   
     1
   
     );
scroll.Start();
};

   
     </
   
     script
   
     >
   
     

   
     </
   
     head
   
     >
   
     

   
     <
   
     body
   
     >
   
     

   
     <
   
     div 
   
     id
   
     ="title"
   
      style
   
     ="width:100%;height:40px;"
   
     >
   
           
   
     </
   
     div
   
     >
   
     

   
     <
   
     div 
   
     id
   
     ="content"
   
     >
   
     

   
     <!--
   
     
                 ，      div（     id:content）    。

   
     -->
   
     

   
     <
   
     div 
   
     style
   
     ="float:left"
   
     ><
   
     img 
   
     src
   
     ="images/1.png"
   
      
   
     /></
   
     div
   
     >
   
     

   
     <
   
     div 
   
     style
   
     ="float:left"
   
     ><
   
     img 
   
     src
   
     ="images/2.png"
   
      
   
     /></
   
     div
   
     >
   
     

   
     <
   
     div 
   
     style
   
     ="float:left"
   
     ><
   
     img 
   
     src
   
     ="images/3.png"
   
      
   
     /></
   
     div
   
     >
   
     

   
     </
   
     div
   
     >
   
     

   
     <
   
     div 
   
     id
   
     ="foot"
   
     ></
   
     div
   
     >
   
     

   
     </
   
     body
   
     >
   
     

   
     </
   
     html
   
     >

1、まず、ここでは、ページにスクロールコンテナを定義します.

  
    

   
     <
   
     div 
   
     id
   
     ="content"
   
     >

中はスクロールする要素で、スクロール要素の水平または垂直の配列は自分で書く必要がありますが、容器のスタイルの中に書かないでください.容器の内部に要素を追加して、スタイルを設定することができます.
2、JavaScriptを使用してスクロールを初期化する.

  
    

   
     window.onload=function(){
//     ：    ，    ，  ID，    ，    ，      ，      ，    
var scroll =new JScroll("left",30,"content",558,165,1674,165,1);
scroll.Start();
};

スクロール速度は移動するたびの時間間隔であり、小さいほど速くなり、単位はミリ秒である.
スクロールステップは移動するたびの距離で、単位はピクセルです.
scroll.スタート()はスクロールを開始するという意味です.
これでいいです.簡単ではないでしょうか.
このプログラムは、jsファイルの上部を参照するコメントを保持するだけで無料で使用できます.
ここをクリックは、ソースコードおよび例をダウンロードする.
ソース:http://blog.bossma.cn/javascript/javascript-flexible-scroll-words-or-images/
MVC 3~MVC+ZTreeビッグデータ非同期ツリーロードを好きになる
21階層ネストの再帰的ソリューション