jquery animate的递归调用

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

jquery animate的递归调用的更多相关文章

jQuery animate()动画效果
1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...
Python-函数的递归调用
递归调用顾名思义即在函数内部调用函数(自己调用自己),通常用它来计算阶乘,累加等注意: - 必须有最后的默认结果 if n ==0,(不能一直调用自己,如果没有可能会造成死循环) - 递归参数必 ...
jquery animate 动画效果使用解析
animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的先看动画效果:http://keleyi.com/keleyi/phtml/jq ...
关于C++的递归调用（n的阶乘为例）
C++,是入门编程界的一门初期的语言.今天我们浅谈一下有关C++的递归调用. 在没有继承,多态,封装之前,C++几乎看成是C语言,除了一些简单的输出和头文件. 具体代码实现如下: #include&l ...
java中父类与子类，不同的两个类中的因为构造函数由于递归调用导致栈溢出问题
/* 对于类中对成员变量的初始化和代码块中的代码全部都挪到了构造函数中, 并且是按照java源文件的初始化顺序依次对成员变量进行初始化的,而原构造函数中的代码则移到了构造函数的最后执行 */ impo ...
【转】使用jquery animate创建平滑滚动效果
这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下滚动到顶部: $('.scroll_to ...
玩坏JVM很简单--toString的递归调用
在JVM的内存管理机制下很少发生内存溢出的情况.至少我碰见的少,好像在SSH我多次发布项目时候出现过一次.今天看见一个特简单的方法让内存溢出(好吧,我似乎作死了--!): public class I ...
关于static 的研究与递归调用的输出
static的作用 :1.保存上次执行的结果 2.static int m; 这里默认m的初始值为0,即默认值是0 #include "stdio.h" int fun(int ...
C#函数式编程之递归调用
关于递归相信大家已经熟悉的不能再熟悉了,所以笔者在这里就不多费口舌,不懂的读者们可以在博客园中找到很多与之相关的博客.下面我们直接切入正题,开始介绍尾递归. 尾递归普通递归和尾递归如果仅仅只是从代码 ...

随机推荐

C#开发Linux守护进程
用C#开发Linux守护进程 Linux守护进程(Daemon)是Linux的后台服务进程,它脱离了与控制终端的关联,直接由Linux init进程管理其生命周期,即使你关闭了控制台,daemon ...
(step7.2.2)hdu 2161(Primes——判断是否是素数)
题目大意:输入一个n,判断您是否是素数.. 解题思路:简单数论代码如下: /* * 2161_1.cpp * * Created on: 2013年8月31日 * Author: Administr ...
c#为了实现自己的线程池功能(一)
线程池的技术背景在面向对象编程中,创建和销毁对象是非常费时间的,由于创建一个对象要获取内存资源或者其他很多其他资源,所以提高服务程序效率的一个手段就是尽可能降低创建和销毁对象的次数.特别是一些非常耗 ...
net Mvc模块化开发
Asp.net Mvc模块化开发之“部分版本部分模块更新(上线)” 项目开发从来就不是一个简单的问题.更难的问题是维护其他人开发的项目,并且要修改bug.如果原系统有重大问题还需要重构. 怎么重构系统 ...
WITH AS
表 id pid name获取下面所有的子节点
基于j2ee的程序代写MVC架构
人力资源管理系统完成系统静态页面设计,页面数量不少于10个,页面需用CSS进行美化,并为需要验证的信息利用JavaScript提供客户端验证.要求至少包含部门信息及部门内员工信息的添加.修改.删除和 ...
IOT(Index Organized Table)
我们知道一般的表都以堆(heap)的形式来组织的,这是无序的组织方式.Oracle还提供了一种有序的表,它就是索引组织表,简称IOT表.IOT表上必须要有主键,而IOT表本身不对应segment,表里 ...
WebPack实例与前端性能优化
[前端构建]WebPack实例与前端性能优化计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给 ...
easyui动力头 && 动态加入tabs
今天,在实现了业务时的,我们需要根据后台操作,以产生多个数据tab页,而且每一个tab页表格根据需要动态生成的标题数据. 返回后台数据格例如,下面的公式: 实现方法例如以下: //$("#c ...
html5移动开发--js温馨提示
1.a标签执行js笔试 <a id="myID" href="javascript:myfuction();"></a> 2.实时监听i ...

jquery animate的递归调用

jquery animate的递归调用的更多相关文章

随机推荐

热门专题