首页
所有分类
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 相关文章推荐
IE bug table元素的innerHTML
Jan 11 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 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) apply(1) Pool(1) 数据处理(2) GUI(2) agg(1) pandas(7) 音频(1) Tkinter(4) mp3Play(1)
You might like
php的access操作类
2008/04/09 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
js arguments对象应用介绍
2012/11/28 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
python计算N天之后日期的方法
2015/03/31 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
浅谈Django REST Framework限速
2017/12/12 Python
python中logging包的使用总结
2018/02/28 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
python调用摄像头显示图像的实例
2018/08/03 Python
【python】matplotlib动态显示详解
2019/04/11 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
美国最好的保健品打折网店：Swanson
2017/08/04 全球购物
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
四风问题查摆剖析材料
2014/10/11 职场文书
导游词怎么写
2015/02/04 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
Redis数据结构之链表与字典的使用
2021/05/11 Redis