jquery イージングで Flash のような読み込みを実現

昨年、Webサイトを制作している会社に取材したところ、事例を見て、非常に興味深いものに出会いました。それはFlashを使って作られた不動産の公式Webサイトでした。気持ちいいですね。

それで、暇なときに簡単な jquery の模倣を作成しました。以下は私のレンダリングです。スクリプトは最適化されていないため、滑らかさは Flash ほど滑らかではありません。しかし、重要なことは、このフラッシュを見たときに私が思ったことです

その効果を達成する方法のアイデアは初心者に非常に適しています。

アピールを観察してください。まず、左側に読み込みアニメーションがあります。

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

$('.left').find('ul').lay(90).animate({left:0},700,'easeOutSine',function(){
});

次に、右側のコールバック関数を呼び出します

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

$('.left').find('ul').lay(90).animate({left:0},700,'easeOutSine',function(){//'easeOutSine' は easing.js ライブラリを導入します
rightImg();
});
関数 rightImg(){
$('.right').find('.liImg').first().fadeIn(90).animate({top:0,opacity:1},380,'easeOutSine',function myNext(){// myNext は自分自身を (再帰的に) 呼び出します
$(this).parent().next().find('.liImg').fadeIn(90).animate({top:0,opacity:1},420,'easeOutSine',myNext);
if($('.right').find('#lastImg').is(":animated")&&$('.right').find('#lastImg').css("top",0) ){
//if($('.right').find('#lastImg').attr("style").indexOf('top:0')){
//alert('最後の演習が完了しました');
$('.title').animate({ left:0},"slow",function(){//空のアニメーション
$(".right").find('li').hover(function(){ // 右ホバー効果
$(this).find('.liSlideDown').slideDown().show().animate({opacity:0.7},"slow");
},function(){
$(this).find('.liSlideDown').stop(true,false).slideUp().hide();
});//コールバックの終了
});
                                                                     });
};

最後に、右側のそれぞれをクリックし、それに応じて左側の親愛なる Sky パーツの上部を切り替え、ここで色を観察し、インデックス Index の実装を使用します。

ソース コードは以下に添付されています: jquery クラス ライブラリとイージング クラス ライブラリを忘れないでください

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

     
      

       

       

Dear Sky

This is the new word


       
• 

       
• 

       
• 

       
• 

       
• 

      

     

      <スクリプト>
      $(document).ready(function(e) {
         //ダウンロード入アニメ
        $('.left').find('ul').lay(90).animate({left:0},700,'easeOutSine',function(){
            rightImg();
            });
            関数 rightImg(){
                              $('.right').find('.liImg').first().fadeIn(90).animate({top:0,opacity:1},380,'easeOutSine',function myNext(){
                  $(this).parent().next().find('.liImg').fadeIn(90).animate({top:0,opacity:1},420,'easeOutSine',myNext); 
                      if($('.right').find('#lastImg').is(":animated")&&$('.right').find('#lastImg').css("top",0) ){
                       //if($('.right').find('#lastImg').attr("style").indexOf('top:0')){
                       //alert('最後の一个运动好了');
                          $('.title').animate({ left:0},"slow",function(){//Sky アニメ画
                                    $(".right").find('li').hover(function(){ // 右侧 hover效果
                                    $(this).find('.liSlideDown').slideDown().show().animate({opacity:0.7},"slow");
                                    },function(){
                                    $(this).find('.liSlideDown').stop(true,false).slideUp().hide();
                                    });//回调结束
                                    });
                }
                   });
             }
        //タブ切换效果
                 var liNum=$('.right').find('li').length;
             $('.right').on("クリック","li",function(){
         varindex=$('.right').find("li").index(this);
         //アラート(インデックス);
         $('.left').find('li').eq(index).fadeIn(1250).siblings().fadeOut(800).end().add('.title').fadeIn(1500) ;
         //$('.title').addClass("liBk"index).removeClass("liBk" (index=index-1));
          // var myClassName="タイトル 'liBk' インデックス";
          var myClassName='liBk' インデックス;
          var title='タイトル' ';
         // console.log('myClassName です' myClassName);
         function setTitleClass(myClassName){
             $('.title').each(function(index) {
                this.className=(titles myClassName);
            });
           }
         setTitleClass(myClassName);
        // console.log("liBk" インデックス);
         });
      });
     
     

       

       
• 
  11
  
         
• 
  22
  
         
• 
  33
         
• 
  44
         
• < ;div class="liContent">最後の一つ

      
     

    
    
     

     

        

          
• 菜单

          
• 首页

          
• 空

          
• その他

          
• 测试

          
• 我们

        

     

     

以上は、jquery クラスのクラスを使用してアニメーションに FLASH をインストールする例であり、大家が喜んでくれることを願っています。

このウェブサイトの声明

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