首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery+easeing实现仿flash的载入动画

Posted in Javascript onMarch 10, 2015

 去年面试过一家做网站的 公司，看了一下他们的案例，看懂一个蛮有意思的 ，一个房地产的官网，是用flash做的。感觉不错。

jquery+easeing实现仿flash的载入动画

于是，闲暇之际，简单的jquery 模仿做了一下。下面是我的效果图.脚本也没啥优化，流畅度也没有flash流畅。但是重要的是看到这个flash，想到

如何实现它效果的思路，非常适合新手。

jquery+easeing实现仿flash的载入动画

观察上诉，首先左侧是个载入动画，

$('.left').find('ul').delay(90).animate({left:0},700,'easeOutSine',function(){

});

jquery+easeing实现仿flash的载入动画

接着 回调函数  调用右侧

$('.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();

         });//回调结束

        });

          }      

           });

    };

jquery+easeing实现仿flash的载入动画

最后的，点击右侧每一个，对应切换左边的上部分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类库简单实现仿FLASH载入动画的实例了，希望大家能够喜欢。

jquery+easeing实现仿flash的载入动画

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript内存管理详细解析
Nov 11 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
下一代Bootstrap的5个特点 超酷炫！
Jun 17 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
关于meta viewport中target-densitydpi属性详解（推荐）
Aug 18 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 #Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 #Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 #Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 #Javascript
JQuery操作元素的css样式
Mar 09 #Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 #Javascript
jquery获取及设置outerhtml的方法
Mar 09 #Javascript
数据同步(1) 分析统计(1) Tomcat(18) ipad(1) 条形图(1) redis shake(1) 阿里云(6) 速龙(1) 窗口函数(3) 排名(1)
You might like
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
javascript 进阶篇1 正则表达式，cookie管理，userData
2012/03/14 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
微信小程序商城项目之侧栏分类效果（1）
2017/04/17 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
python使用arp欺骗伪造网关的方法
2015/04/24 Python
简单介绍Python中的try和finally和with方法
2015/05/05 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
python 两个数据库postgresql对比
2019/10/21 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
python实现字符串和数字拼接
2020/03/02 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
高中毕业生自我鉴定范文
2013/09/26 职场文书
办加油卡单位介绍信
2014/01/09 职场文书
前处理班长职位说明书
2014/03/01 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
培训感想范文
2015/08/07 职场文书
大学校园招聘会感想
2015/08/10 职场文书
超市主管竞聘书
2015/09/15 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
python xlwt模块的使用解析
2021/04/13 Python
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
世界十大狙击步枪排行榜
2022/03/20 杂记
python双向链表实例详解
2022/05/25 Python