去年面试过一家做网站的 公司，看了一下他们的案例，看懂一个蛮有意思的 ，一个房地产的官网，是用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类库
载入动画 与递归显示
<script><br />
$(document).ready(function(e) {<br />
//载入动画<br />
$('.left').find('ul').delay(90).animate({left:0},700,'easeOutSine',function(){<br />
rightImg();<br />
});<br />
function rightImg(){<br />
$('.right').find('.liImg').first().fadeIn(90).animate({top:0,opacity:1},380,'easeOutSine',function myNext(){<br />
$(this).parent().next().find('.liImg').fadeIn(90).animate({top:0,opacity:1},420,'easeOutSine',myNext); <br />
if($('.right').find('#lastImg').is(":animated")&&$('.right').find('#lastImg').css("top",0)){<br />
//if($('.right').find('#lastImg').attr("style").indexOf('top:0')){<br />
//alert('最后一个运动好了');<br />
$('.title').animate({ left:0},"slow",function(){//Sky 动画<br />
$(".right").find('li').hover(function(){ // 右侧 hover效果<br />
$(this).find('.liSlideDown').slideDown().show().animate({opacity:0.7},"slow");<br />
},function(){<br />
$(this).find('.liSlideDown').stop(true,false).slideUp().hide();<br />
});//回调结束<br />
});<br />
} <br />
});<br />
}<br />
//tab 切换效果<br />
var liNum=$('.right').find('li').length;<br />
$('.right').on("click","li",function(){<br />
var index=$('.right').find("li").index(this);<br />
//alert(index);<br />
$('.left').find('li').eq(index).fadeIn(1250).siblings().fadeOut(800).end().add('.title').fadeIn(1500);<br />
//$('.title').addClass("liBk"+index).removeClass("liBk"+(index=index-1));<br />
// var myClassName="title 'liBk'+index";<br />
var myClassName='liBk'+index;<br />
var titles='title'+' ';<br />
// console.log('myClassName是'+myClassName);<br />
function setTitleClass(myClassName){<br />
$('.title').each(function(index) {<br />
this.className=(titles+myClassName);<br />
});<br />
}<br />
setTitleClass(myClassName);<br />
// console.log("liBk"+index);<br />
});<br />
});<br />
</script>
以上就是使用jquery类库简单实现仿FLASH载入动画的实例了，希望大家能够喜欢。
695
收藏
