jQuery を模倣した Sina グラフィックスと完全に互換性があり、テキストのフェードインとフェードアウト、主要なブラウザーの断続的なスクロール効果_jquery

1. 効果と機能の説明: Sina Weibo の画像テキストリストを模倣し、断続的に上下にスクロールします。

2. 実装の原則は、最初に 4 つの画像のみを表示するように div を設定し、その後、画像を上下にスクロールできるようにアニメーション イベントを追加します。エフェクトは li タグによって再生され、各 li は全体として扱われ、それらは div に入り、最終的に div から出るときに表示されます。アニメーション効果を完全に実行します。

3. 動作環境

Firefox および Google Chrome ブラウザの IE6 IE7 IE8 以降で実装できます

4. すべての画像の圧縮パッケージ用の新しいファイルを作成し、パッケージを解凍してフォルダーに配置します。ダウンロード後、画像の圧縮パッケージが表示され、ダウンロードできます。フォルダー名はすでに書き込まれており、html5 内のパスは

と一致するため、変更する必要はありません。

5. 作成したhtmlファイルを保存する際、一部の漢字が正常に表示されるようにエンコードタイプを(署名付きUTF-8)に変更します。保存タイプ(T)を(すべてのファイル(*.*))に変更します。 )、html5フォルダーと解凍した画像フォルダーを同じフォルダーに置きます

6. コード

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

>



">http://code.jquery.com/jquery-1.9.1.js">>

(関数($){
    $.fn.simpleSpy = 関数 (制限、間隔){
        限界 = 限界 || 4;
        /*div開始终表示4单位の高さ*/
        間隔 = 間隔 || 4000;
        /*各アニメーション効果を制御する時間 4000 秒は、一番下の写真から 5 番目の写真が消えて上の 1 つのアニメーションが表示されるまでの 4 秒に相当します */
        return this.each(function(){
            var $list = $(this),
            /*获取得すべての列表项目的缓存*/
            項目 = []、
            /*未初期化*/
            currentItem = 制限、
            合計 = 0、
            /*初化以後*/
            高さ = $list.find('> li:first').height();
            /*列表制限li元素*/
            $list.find('> li').each(function(){
            /*获得缓存*/
                items.push('

' $(this).html() '

');
                /*すべての列表のリエリア面の保存を取得*/
            });
            total = items.length;
            /*開始终表示在缓存里的li*/
            $list.wrap('

').parent().css({高さ : 高さ * 制限});
            /*制御 div は、画像が消失しても、div の消失によって変化することはなく、同じ高さを維持します*/
            $list.find('> li').filter(':gt(' (limit - 1) ')').remove();
            /*使用遍歴メソッドを介してすべてのli元素を実際に削除する方法を取得します*/
            関数 spy(){
            /*最初の 2 番目の画像から最上方に入力された効果*/
                var $insert = $(items[currentItem]).css({高さ : 0,不透明度 : 0,表示 : 'none'}).prependTo($list);
                /*新しい div を入力、透明度および高さはゼロ*/
                $list.find('> li:last').animate({ 不透明度 : 0}, 1000, function(){
/*トラバースによるアニメーション挿入の効果、時間は 1 秒です*/
$insert.animate({ 高さ : 高さ }, 1000).animate({ 不透明度 : 1 }, 1000);
/* 新しい最初の div の高さを増やします*/
                                                                                                                                                                                                  /*この削除の影響は何ですか? 初めてページをロードすると、画像のみで属性値のない li がいくつか存在することになります。クリアとは、最初のアニメーションが終了した後に、属性のない li を削除することです。属性のないものは、アニメーション効果のない高 li*/
のないものです。 });
現在のアイテム ;
/*常に最初の li 位置に次の li 画像を表示します*/
If(現在のアイテム >= 合計){
/*4 つの画像が以上である場合、それらすべてが画像全体以上である*/
現在の項目 = 0;
/*その後は0から開始*/
}
setTimeout(スパイ, 間隔)
/*ul 4 秒以内に完了してください*/
}
スパイ();
/*エフェクトのスイッチ全体*/
});
};
})(jQuery);


$(document).ready(function(){
$('ul.spy').simpleSpy();
/*ul.spy は simpleSpy() テンプレート メソッドを呼び出します*/
});

jquery は新浪微博の画像テキストリストを模倣しますギャップスクロールフェードインおよびフェードアウトスクロール

                                                                                                                                                                                                                                                                 ＆lt; p class = "info"＆gt; 2008年11月29日by neue＆lt;/p＆gt;                                                                                                                                                                                                                                         " title="リフレットの表示">                                                                                                                                                                

2008 年 11 月 29 日、neue 作成


           
           
• 
                  http://www.jb51.net/" title="ケイト モロスのリトル ビッグ プラネットを見る">
                 

  http://www.jb51.net/" title="ケイト モロス リトル ビッグ プラネットを見る">ケイト モロス リトル ビッグ プラネット
                 

  2008 年 11 月 29 日、neue 作成

  
             

           
• 
                  http://www.jb51.net/" title="無題の表示">
                 

  http://www.jb51.net/" title="無題を見る">無題

  
                 

  2008 年 11 月 29 日 by mike1052

  
             

           
• 
                  http://www.jb51.net/" title="チュートリアルのライブラリを表示">
                 

  http://www.jb51.net/" title="私のチュートリアルのライブラリを表示">私のチュートリアルのライブラリ

  
                 

  2008 年 11 月 29 日 by FrancescoOnAir

  
             

           
• 
                  http://www.jb51.net/" title="Sandy を表示 — 無料の個人メール アシスタント - ログイン">
                 

  http://www.jb51.net/" title="Sandy を表示 — 無料のパーソナル メール アシスタント - ログイン">Sandy — 無料 a>

  
                 

  2008 年 11 月 29 日 by John Doe

  
             

           
• 
                  http://www.jb51.net/" title="Sandy を表示 — 無料の個人メール アシスタント - ログイン">
                 

  http://www.jb51.net/" title="Sandy を表示 — 無料のパーソナル メール アシスタント - ログイン">Sandy — 無料 a>

  
                 

  2008 年 11 月 29 日 by John Doe

  
             

           
• 
                  http://www.jb51.net/" title="Sandy を見る — 無料の個人メール アシスタント">
                 

  http://www.jb51.net/" title="Sandy — 無料のパーソナル メール アシスタントを表示">Sandy — 無料
                 

  2008 年 11 月 29 日 by John Doe

  
             

           
• 
                  http://www.jb51.net/" title="n ブログの値を表示">
                 

  http://www.jb51.net/" title="n 件のブログの値を表示">n 件のブログの値

  > ;
                 

  2008 年 11 月 29 日 by John Doe