您好,欢迎来到华佗小知识。
搜索
您的当前位置:首页jquery+easeing实现仿flash的载入动画_jquery

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 Sky

This is the new word










  • $(document).ready(function(e) {
    //载入动画
    $('.left').find('ul').delay(90).animate({left:0},700,'easeOutSine',function(){
    rightImg();
    });
    function 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();
    });//回调结束
    });
    }
    });
    }
    //tab 切换效果
    var liNum=$('.right').find('li').length;
    $('.right').on("click","li",function(){
    var index=$('.right').find("li").index(this);
    //alert(index);
    $('.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'+index";
    var myClassName='liBk'+index;
    var titles='title'+' ';
    // console.log('myClassName是'+myClassName);
    function setTitleClass(myClassName){
    $('.title').each(function(index) {
    this.className=(titles+myClassName);
    });
    }
    setTitleClass(myClassName);
    // console.log("liBk"+index);
    });
    });



  • 11

  • 22

  • 33

  • 44

  • 最后一个








  • 菜单

  • 首页

  • Sky

  • 其他

  • 测试

  • 我们







  • Copyright © 2019- huatuo0.cn 版权所有 湘ICP备2023017654号-2

    违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

    本站由北京市万商天勤律师事务所王兴未律师提供法律服务