zoukankan      html  css  js  c++  java
  • Jquery动画方法 jquery.animate()

    目前在学习Oracle数据库,由于刚接触,学校让练习练习HTML内容,就想起了老师以前提起过的animate方法

    animate是jquery的一个方法,这个方法主要功能是能实现比较平滑的动态效果,所以你想做一个简单又不失美观的动态效果不如试试它

    下面总结一下以前常用的幻灯片效果实现用的方法:

      切换:show(time)/hide(time):刚接触Jquery的时候大家应该用的最多的就是这两个方法,我个人觉得这个方法太丑了,一瞬间消失,或者一瞬间出现

      列表滚动:这个多数人会直接使用其css属性做,或者position().left。。。等等方法,也是直接就过去了,总觉得不高大上

      fadein()/fadeOut():朦胧感

      slipeUp/slipedown()...等等

      代码量:以上效果,想要实现,代码量大

      

      下面是我实现的一个幻灯片切换效果:

        包括大图片切换、小图列表突出显示、文字跟随小图跑、

      

      1 <!DOCTYPE html>
      2 <html>
      3   <head>
      4     <base href="<%=basePath%>">
      5     <title>animate实现幻灯片</title>
      6     
      7     <link rel="stylesheet" type="text/css" href="animate.css" />
      8     <script type="text/javascript" src="jquery-1.8.3.js">
      9     </script>
     10         
     11     <script type="text/javascript">
     12         var index=0;
     13         var flag=true;
     14         $(function(){
     15             $(".imgshow li:not(:first)").hide();
     16             $(".text li:not(:first)").hide();
     17             styleMe(".imglist li:eq("+index+")");
     18             change(index);
     19             $(".imgshow").mouseover(function(){
     20                 flag=false;
     21             
     22             });
     23             $(".imgshow").mouseout(function(){
     24                 flag=true;
     25             
     26             });
     27             $(".imglist li").bind({
     28                 mouseout:function(){
     29                     flag=true;
     30                 },mouseover:function(){
     31                     flag=false;
     32                     index=$(this).index();
     33                     
     34                     change(index);
     35                 },click:function(){
     36                     flag=false;
     37                     styleMe($(this));
     38                     index=$(this).index();
     39                     change(index);
     40                 }
     41             
     42             });
     43             
     44                 setInterval(function(){
     45                     
     46                     if(flag){
     47                         index=index+1;
     48                         if(index==5){
     49                             index=0;
     50                         }
     51                         change(index)
     52                     }
     53                     
     54                 
     55                     
     56                 
     57                 
     58                 },4000);
     59             });
     60     //图片切换
     61         function change(index){
     62             //图片
     63             
     64             styleMe(".imglist li:eq("+index+")");
     65             $(".imgshow li:eq("+index+")")
     66             .show().animate({opacity:'0.5'},300).animate({opacity:'1'},500)
     67             .siblings()
     68             .hide();
     69             //文本
     70             var left=$(".imglist li:eq("+index+")").position().left+180;
     71             //alert(left);
     72             if(index==4){
     73                 //200=ul初始位置180px +padding20px;
     74                 //获取有些问题,直接赋值
     75                var width=480;
     76             
     77                 left=left-width;    
     78             }
     79             $(".text").stop(true,true);
     80             $(".text").animate({opacity:'0.7',marginLeft:left},700).animate({opacity:'1'},200);
     81         //    alert("index:"+index+";left:"+left+";"+width);
     82             $(".text li:eq("+index+")")
     83             .show()
     84             .siblings()
     85             .hide();
     86             
     87             
     88             //$(".text").css("margin-left",left);
     89         
     90         
     91         }
     92         function styleMe(doc){
     93             $(doc).stop(true,true);
     94             $(doc).animate({marginTop:'-25px'},200).siblings().animate({marginTop:'0px'},400);
     95             $(doc).addClass("mouse").siblings().removeClass("mouse");
     96         }    
     97     </script>
     98   </head>
     99       
    100   <body>
    101       
    102     <div>
    103         <ul class="imgshow">
    104         <li><img src="img/1.jpg" /></li>
    105         <li><img src="img/2.jpg" /></li>
    106         <li><img src="img/3.jpg" /></li>
    107         <li><img src="img/4.jpg" /></li>
    108         <li><img src="img/5.jpg" /></li>
    109     
    110     </ul>
    111     <ul class="imglist">
    112         <li><img src="img/1.jpg" /></li>
    113         <li><img src="img/2.jpg" /></li>
    114         <li><img src="img/3.jpg" /></li>
    115         <li><img src="img/4.jpg" /></li>
    116         <li><img src="img/5.jpg" /></li>
    117     
    118     </ul>
    119     <ul class="text"> 
    120         <li>电影十二生肖去景点</li>
    121         <li>美国农庄公路</li>
    122         <li>青山碧水</li>
    123         <li>阿尔卑斯山下美丽的山庄</li>
    124         <li>这是小羊肖恩嘛?太可爱了吧,好想拥有一只</li>
    125     
    126     </ul>
    127     
    128     </div>
    129     
    130   </body>
    131 </html>

    css代码:

     1 /*animate*/
     2 *{
     3     margin:0px;
     4     padding:0px;
     5 }
     6 body{
     7     width:100%;
     8 
     9 }
    10 div{
    11 width:1000px;
    12 margin:auto;
    13 }
    14 ul{
    15 width:1000px;
    16 margin:auto;
    17 list-style:none;
    18 
    19 }
    20 .imgshow img{
    21     height:600px;
    22     width:1000px;
    23 
    24 }
    25 .mouse{
    26 /**    border-bottom:30px solid green;**/
    27     background-color:#2F2F2F;
    28 }
    29 .imglist{
    30     top:480px;
    31     margin-left:50px;
    32     z-index:2;
    33     position:absolute;
    34 }
    35 .imglist li{
    36     float:left;
    37     padding:20px 10px;
    38     display:block;
    39 
    40 }
    41 .imglist img{
    42         height:60px;
    43         width:100px;
    44 
    45 
    46 }
    47 .text{
    48     width:auto;
    49     top:430px;
    50     margin-left:180px;
    51     z-index:2;
    52     position:absolute;
    53     
    54 }
    55 .text li{
    56     padding:20px 30px;
    57     background-color:#2F2F2F;
    58     color:#ccc;
    59     font-size:14px;
    60 
    61 }

    效果图:

    总结:

      animate缺点:

        每个动画必须演示完才能结束,这就导致如果频繁去使用这个方法,会导致延迟(实际上不是)

      优点:

        animate支持同一个容器的所有动作可以依次从第一个往下执行,这个特性我最喜欢!

      个别缺点解决办法:

       延迟可以使用document.stop("容器名");

      

      

  • 相关阅读:
    CF 461B Appleman and Tree
    POJ 1821 Fence
    NOIP 2012 开车旅行
    CF 494B Obsessive String
    BZOJ2337 XOR和路径
    CF 24D Broken robot
    POJ 1952 BUY LOW, BUY LOWER
    SPOJ NAPTIME Naptime
    POJ 3585
    CF 453B Little Pony and Harmony Chest
  • 原文地址:https://www.cnblogs.com/gcs1995/p/4085824.html
Copyright © 2011-2022 走看看