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

随机推荐

Lucene 实例教程(四)之检索方法总结
原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本人声明.否则将追究法律责任. 作者: 永恒の_☆ 地址: http://blog.csdn.net/chenghui031 ...
JavaScript采用append添加的元素错误
1.错误叙述性说明于IE览器上: Uncaught HierarchyRequestError:Failed to excute 'appendChild' on 'Node':The new ch ...
Android---53---多线程下载
采用HttpURLConnection HttpURLConnection从继承URLConnection,它也可以被用来发送到指定的网站GET求 POST求. 办法: int getResponse ...
codeforces55D数位dp
codeforces55D 查询给定区间内的beautiful number. 一个数字是beautiful number当且仅当能被自己的各个数字不为0的位整除. 这个dp的状态还是挺难想的.一个 ...
黄聪：Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (高级)
原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (高级) 本章介绍的是企业库加密应用程序模块 ...
潜水JVM
原文地址:http://blog.jamesdbloom.com/JVMInternals.html(转载请注明出处和本文地址英文原文) 本文简要解析JVM的内部结构.下图显示了一个典型的一块JVM( ...
SSO（Single Sign On）系列（一）--SSO简单介绍
任何类型的站点,到达一定规模之后一定会存在这种问题:比方我们有N个系统.传统方式下我们就须要有N对不同的username和password,本来这些系统的开发都能为我们带来良好的效益,用户在用的时候并 ...
live555 for Android
因为Live555 包中未提供Android 的config 所以编译器来比較麻烦,须要自己编写Android.mk ,下面是我通过改动现有的config文件,在cygwin实现编译的过程,co ...
Android:What is ART?
背景:Android4.2之前,安卓手机系统的应用程序均在Dalvik Java的虚拟机上执行,这样的执行模式还要依靠一个编译器来实现与应用程序的沟通.应用程序每次执行时,都须要将程序内的代码转变为机 ...
ExtJs迄今datefield控制设置默认值
假设extjs4 datefield日期控件设置默认值.为当天的前一月,和后一月 Ext.Date.MONTH 月 Ext.Date.YEAR 年 Ext.Date.DAY ...

jquery animate的递归调用

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

随机推荐

热门专题