首页
所有分类
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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
JS中精巧的自动柯里化实现方法
Dec 12 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
layui清空,重置表单数据的实例
Sep 12 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 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) R601SW(1) ETON(1) S900(1) VOLVO(1) 沃尔沃(1) 66-XI(1) E1-XM(1) 矿石收音机(1) 军机(1)
You might like
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
JavaScript实现切换多张图片
2021/01/27 Javascript
在Python中编写数据库模块的教程
2015/04/29 Python
python避免死锁方法实例分析
2015/06/04 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
python合并同类型excel表格的方法
2018/04/01 Python
简单实现python聊天程序
2018/04/01 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
django的ORM模型的实现原理
2019/03/04 Python
python爬虫之自制英汉字典
2019/06/24 Python
Numpy对数组的操作：创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
法国娇韵诗官方旗舰店：Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
简述安装Slackware Linux系统的过程
2012/05/08 面试题
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
MySQL开启事务的方式
2021/06/26 MySQL
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android