首頁 > 文章 > web前端 > jquery easeing實作仿flash的載入動畫_jquery

jquery easeing實作仿flash的載入動畫_jquery

WBOY原創: 2016-05-16 16:10:431365瀏覽

去年面試過一家做網站的公司，看了一下他們的案例，看懂一個蠻有意思的，一個房地產的官網，是用flash做的。感覺不錯。

於是，閒暇之際，簡單的jquery 模仿做了一下。下面是我的效果圖.腳本也沒啥優化，流暢度也沒有flash流暢。但是重要的是看到這個flash，想到

如何實現它效果的思路，非常適合新手。

觀察上訴，首先左側是個載入動畫，

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

});

接著回呼函數呼叫右邊

複製程式碼程式碼如下:

$('.left').find('ul').delay(90).animate({left:0},700,'easeOutSine',function(){//'easeOutSine' 引入easing.js 庫

   rightImg();

   });

  function 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(){//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();

         });//回呼結束

        });

          }      

           });

    };

最後的，點擊右側每一個，對應切換左邊的上部分dear Sky 部分，觀察這裡的顏色，利用index 索引的實現。

下面附上原始碼：不要忘記 jquery 類別庫和easeing類別庫

複製程式碼程式碼如下:

载入动画与递归显示

Dear Sky

This is the new word

      $(文檔).ready(函數(e) {
         //動畫載入
        $('.left').find('ul').delay(90).animate({left:0},700,'easeOutSine',function(){
            rightImg();
            });
            函數 rightImg(){
$('.right').find('.liImg').first().fadeIn(90).animate({top:0,opacity:1},380,'easeOutSine',function myNext(){
  收到 if($('.right').find('#lastImg').is(":animated")&&$('.right').find('#lastImg').css("top",0) ){
                         收到).find('#lastImg').attr("style").indexOf('top:0')){                           $('.title').animate({ left:0},"slow",function(){//Sky 動畫
                                                                        $(this).find('。 🎜>                                     },函數(){
                     可能                                     });//使用結束
結束
結束
結束
結束
結束
                                    });                 }
                   });
             }
        //tab切換效果
                 var liNum=$('.right').find('li').length;
             $('.right').on("點選","li",function(){
         var index=$('.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="title 'liBk' 索引";
          var myClassName='liBk' 索引;
          var title='標題' ' ';
         // console.log('myClassName是' myClassName);
         函數 setTitleClass(myClassName){
             $('.title').each(函數(索引) {
                this.className=(標題 myClassName);
            });
           }
         setTitleClass(myClassName);
        // console.log("liBk" index);
         });
      });
      >腳本