首页
所有分类
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 相关文章推荐
js中将具有数字属性名的对象转换为数组
Mar 06 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
在JavaScript中如何使用宏详解
May 06 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) springCloud(6) 死锁(3) 逻辑备份(1) reduce()(1) 轮询锁(1) 生命周期(1) 远程连接(2) 信号同步(1) 异步机制(1)
You might like
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
详解vue组件基础
2018/05/04 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
3种python调用其他脚本的方法
2020/01/06 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
广播节目策划方案
2014/05/23 职场文书
写给老师的感谢信
2015/01/20 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
秋菊打官司观后感
2015/06/03 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
初三化学教学反思
2016/02/22 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
Pandas数据结构之Series的使用
2022/03/31 Python
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python