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#函数式编程之递归调用
关于递归相信大家已经熟悉的不能再熟悉了,所以笔者在这里就不多费口舌,不懂的读者们可以在博客园中找到很多与之相关的博客.下面我们直接切入正题,开始介绍尾递归. 尾递归普通递归和尾递归如果仅仅只是从代码 ...

随机推荐

Android版本铎A梦幻连连看游戏源代码完整版
我写主代码,没有版权问题,它少量小游戏和应用源代码稍后会陆续上线!哆啦A梦连连看包含了2种游戏模式和60关卡,并能够通过改动配置文件非常方便的实现自行添加新关卡.採用andengine游戏引擎开发,内 ...
sitemap.xml
内部类在类内部的类 1.解决多继承 2.解决继承和实现接口时候方法名冲突情况 3.实现数据隐藏只有内部类可以拥有4种访问修饰符当内部类为private的时候,有外部类提供方法来访问内部类常规 ...
发展合作-ASP.Net传递页面之间的值
在合作开发中,在页面串传值的时候,遇到了一些困难.在网上搜罗了一下,发现好多的传值方式,能够简单地分下面三种. 一. URL传值原页面的值放到目标页面的URL中.然后通过QueryString方法获 ...
Android规范发展
一.Android 编码规范 1.java 代码中不出现中文.最多凝视中能够出现中文 2.局部变量命名.静态成员变量命名仅仅能包括字母,单词首字母出第一个外,都为大写,其它字母都为小写 3.常量命名 ...
一起学习android图片四舍五入图片集资源（28）
效果图: 參看下面代码: public class MainActivity extends Activity { private ImageView imageView1; private Imag ...
边记边学PHP-（十五）MySQL数据库基础操作2
四.使用可视化工具创建数据库尽管使用命令行感觉更像我们程序猿,可是我还是比較喜欢使用workbench来创建数据库. 首先打开workbench , 一个比較友好的界面就打开了,哈哈.我还是比較喜欢 ...
linux下安装oracle11g 64位最简客户端(转)
安装环境 Linux服务器:SuSe11 sp1 64位 Oracle客户端:Oracle11gR2 64位(最简客户端) 部署流程 1.准备工作,首先在oracle官网下载最新的 ...
一份关于jvm内存调优及原理的学习笔记
JVM 一.虚拟机的基本结构 1.jvm整体架构类加载子系统:负责从文件系统或者网络中加载class信息,存入方法区中. 方法区(Perm):存放加载后的class信息,包括静态方法,jdk1.6以 ...
水题 hdu1002------用BigInteger解决大数问题
Problem Description I have a very simple problem for you. Given two integers A and B, your job is to ...
Android 角色时间戳
我是在用MediaRecorder进行录像时发生视频和音频不同步的问题,请教了一些人后感觉应该是没有时间戳,之前一直觉得时间戳就是给用户看的一个数据,查了一下发现不是的,以下是转载的.希望对大家实用: ...

jquery animate的递归调用

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

随机推荐

热门专题