码迷，mamicode.com
首页 > Web开发 > 详细

js 载入动画 递归依次显示

时间：2015-03-03 14:55:54      阅读：1332      评论：0      收藏：0      [点我收藏+]

标签：

  去年面试过一家做网站的 公司，看了一下他们的案例，看懂一个蛮有意思的 ，一个房地产的官网，是用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类库

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>载入动画 与递归显示</title>
<style>
*{ margin:0; padding:0;}
a{ text-decoration:none;}
ul,li{ list-style:none; margin:0; padding:0;}



.boxxxx{ width:1075px; height:580px; margin:80px auto; border:1px solid #666; background:#FFF; position:relative;}
.navBox{ position:absolute; bottom:0px; left:0; right:0px;}
.nav{ width:1075px; height:34px; margin:0 auto; background:#ddd;  color:#FFF; position:relative;}
.nav ul{ position:absolute; left:0px; top:0;}
.nav ul li{ float:left; display:inline; padding:0 45px; height:34px; line-height:34px; margin-right:1px; background:#999; transition:all 0.3s ease-out 0.3s;}
.nav ul li a{ color:#fff; }
.nav ul li:hover{ background:#666 !important;}

.left{ width:406px; height:565px; position:absolute; top:0; left:0; overflow:hidden; background: url(../images/wxc/3a.jpg) no-repeat center center #fff;}
.left ul {width:406px; height:565px; position:absolute; top:0; left:406px; z-index:22}
.left ul li{ position:absolute;top:0; left:0; display:none;width:406px; height:565px; z-index:23 }

.title{width:406px; height:142px; position:absolute; left:406px; top:0; background:rgba(172,30,64,0.6); background:#392438\9;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(style=0,Opacity=60)"\9;  
filter:alpha(opacity=60)\9;/*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f00000,endColorstr=#7f0000000);*/  z-index:999; display:block; color:#fff ;}
.title h1{ font-family:"Times New Roman","微软雅黑", "宋体", Arial, Tahoma; text-align:left; font-size:24px; float:left; width:91%; height:35px; line-height:35px; padding-left:9%; margin-top:20px; position:relative; }
.title h2{ font-family:"Times New Roman","微软雅黑", "宋体", Arial, Tahoma; text-align:center; font-size:14px; float:left;height:25px; line-height:25px;padding-left:9%; position:relative;}

.right{ width:668px; height:547px; background:#6FF;position:absolute; top:0; right:0; /*overflow:hidden;*/}
.right ul {width:668px; height:565px; position:absolute; top:0; left:0; background:#FFF }
.right ul li{ float:left; display:inline;width:132px; height:565px; margin-left:1px; position:relative; }
.right ul li img{display:none; position:absolute; left:0; right:0; top:-142px; }
.right .liImg{ display:none; width:132px; height:142px; overflow:hidden; opacity:0.3;}
.right .liImg:hover{ cursor:pointer}
.right #lastImg{top:-142px;}
.right .liSlideDown{ width:132px; height:100%; display:none;}
.liBk0{ background:#716058 }
.liBk1{ background:#fceabc }
.liBk2{ background:#eaa000;}
.liBk3{ background:#557da4;}
.liBk4{ background:#cc9966;}
.liContent{ position:absolute; left:0; top:142PX; width:132PX; height:423PX;}
</style>
<script src="../js/jquery-1.8.2.min.js"></script>
<script src="../js/easing.js"></script>
</head>

<body style="background:#666;">


<div class="boxxxx">
    
      <!--左边-->
       <div class="left">
       
        <ul>
        <div class="title"><h1>Dear Sky</h1><h2>This is the new word</h2></div>
        <li style="display:block"><img src="../images/wxc/left1.png" ></li>
        <li><img src="../images/wxc/left2.png" ></li>
        <li><img src="../images/wxc/left1.png" ></li>
        <li><img src="../images/wxc/left2.png" ></li>
        <li><img src="../images/wxc/left1.png" ></li>
       </ul>
      </div>
      
      
      <script>
      $(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);
		 });
		
	
      });
      </script>
      
      <div class="right">
        <ul>
        <li><div class="liSlideDown liBk0"></div><img class="liImg" src="../images/wxc/r1.png" ><div class="liContent">11</div></li>
        <li><div class="liSlideDown liBk1"></div><img class="liImg" src="../images/wxc/r2.png" ><div class="liContent">22</div></li>
        <li><div class="liSlideDown liBk2"></div><img class="liImg" src="../images/wxc/r3.png" ><div class="liContent">33</div></li>
        <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>
        <li><div class="liSlideDown liBk4"></div><img class="liImg " id="lastImg" src="../images/wxc/r5.png" ><div class="liContent">最后一个</div></li>
       </ul>
      </div>
    
     <!--右边-->
    

     <!-- 底部菜单-->
      <div class="navBox">
      <div class="nav">
         <ul>
           <li><a href="">菜单</a></li>
           <li><a href="">首页</a></li>
           <li><a href="">Sky</a></li>
           <li><a href="">其他</a></li>
           <li><a href="">测试</a></li>
           <li><a href="">我们</a></li>
           
         </ul>
      </div>
      </div>
</div>


</body>
</html>

　　

js 载入动画 递归依次显示

标签：

原文地址：http://www.cnblogs.com/surfaces/p/4310870.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！