您好,欢迎访问一九零五行业门户网

jquery+easeing实现仿flash的载入动画_jquery

去年面试过一家做网站的 公司,看了一下他们的案例,看懂一个蛮有意思的 ,一个房地产的官网,是用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 skythis is the new word
11
22
33
44
最后一个
菜单
           首页
           sky
           其他
           测试
           我们
以上就是使用jquery类库简单实现仿flash载入动画的实例了,希望大家能够喜欢。
其它类似信息

推荐信息