Jquery動畫方法 jquery.animate()

時間 2019-11-13

標籤 jquery 動畫方法 jquery.animate animate 欄目 JQuery 简体版

原文原文鏈接

目前在學習Oracle數據庫，因爲剛接觸，學校讓練習練習HTML內容，就想起了老師之前提起過的animate方法javascript

animate是jquery的一個方法，這個方法主要功能是能實現比較平滑的動態效果，因此你想作一個簡單又不失美觀的動態效果不如試試它css

下面總結一下之前經常使用的幻燈片效果實現用的方法：html

　　切換：show(time)/hide(time):剛接觸Jquery的時候你們應該用的最多的就是這兩個方法，我我的以爲這個方法太醜了，一瞬間消失，或者一瞬間出現java

　　列表滾動：這個多數人會直接使用其css屬性作，或者position().left。。。等等方法，也是直接就過去了，總以爲不高大上jquery

　　fadein()/fadeOut():朦朧感數據庫

　　slipeUp/slipedown()...等等ide

　　代碼量：以上效果，想要實現，代碼量大學習

　　下面是我實現的一個幻燈片切換效果：動畫

　　　　包括大圖片切換、小圖列表突出顯示、文字跟隨小圖跑、this

  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:"+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 }