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

WBOY

リリース： 2016-05-16 16:10:43

オリジナル

1397 人が閲覧しました

昨年、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" インデックス);
         });
      });