Last year, I interviewed a company that makes websites. After looking at their cases, I came across a very interesting one, a real estate official website, which was made using flash. It feels good.
So, in my spare time, I made a simple jquery imitation. Below is my rendering. The script is not optimized, and the smoothness is not as smooth as flash. But the important thing is that when I saw this flash, I thought
The idea of how to achieve its effect is very suitable for novices.
Observe the appeal, first of all there is a loading animation on the left,
$('.left').find('ul').delay(90).animate({left:0},700,'easeOutSine',function(){
});
Then call the callback function on the right
$('.left').find('ul').delay(90).animate({left:0},700,'easeOutSine',function(){//'easeOutSine' introduces the easing.js library
rightImg();
});
function rightImg(){
$('.right').find('.liImg').first().fadeIn(90).animate({top:0,opacity:1},380,'easeOutSine',function myNext(){// myNext calls itself back (recursively)
$(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('The last exercise is done');
$('.title').animate({ left:0},"slow",function(){//Sky animation
$(".right").find('li').hover(function(){ // Right hover effect
$(this).find('.liSlideDown').slideDown().show().animate({opacity:0.7},"slow");
},function(){
$(this).find('.liSlideDown').stop(true,false).slideUp().hide();
});//End of callback
});
});
};
Finally, click on each one on the right side, correspondingly switch the upper part of the dear Sky part on the left, observe the color here, and use the implementation of index index.
The source code is attached below: Don’t forget the jquery class library and easing class library
Copy code The code is as follows:
载入动画 与递归显示
<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载入动画的实例了,希望大家能够喜欢。