Jquery-动画实例

scrollLeft
  1 <!DOCTYPE html>
  2 <html lang="zh">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Page Title</title>
  6     <style>
  7         *{
  8             margin: 0px;
  9             padding: 0px;
 10         }
 11     .box{
 12         width: 230px;
 13         height: 180px;
 14         position: relative;
 15         left: 200px;
 16     }
 17     .box-child{
 18         width: 100%;
 19         height: 100%;
 20         /* overflow: scroll; */
 21         overflow:hidden;
 22     }
 23     .list{
 24         width: 920px;
 25         height: 180px;
 26     }
 27     .list>div{
 28         width: 230px;
 29         height: 180px;
 30         float: left;
 31         line-height: 180px;
 32         text-align: center;
 33         font-size: 48px;
 34         font-weight: bold;
 35         color: white;
 36     }
 37     .list>div:nth-child(odd){
 38         background-color: red;
 39     }
 40     .list>div:nth-child(even){
 41         background-color: black;
 42     }
 43     .left-btn{
 44         width: 30px;
 45         height: 60px;
 46         line-height: 60px;
 47         text-align: center;
 48         font-size: 30px;
 49         background: #666;
 50         color: white;
 51         position: absolute;
 52        top:  50%;
 53         margin-top: -30px;
 54         left: 0px;
 55     }
 56     .right-btn{
 57         width: 30px;
 58         height: 60px;
 59         line-height: 60px;
 60         text-align: center;
 61         font-size: 30px;
 62         background: #666;
 63         color: white;
 64         position: absolute;
 65         top: 50%;
 66         margin-top: -30px;
 67         right: 0px;
 68 
 69     }
 70     
 71     </style>
 72     <script src="a.js"></script>
 73     <script>
 74     $(function(){
 75         $(".box-child").scrollLeft(230);
 76         $(".left-btn").click(function(){
 77             $(".list").css("fontFamily","华文琥珀");
 78         });
 79         $(".right-btn").click(function(){
 80             $(".list").css("fontFamily","华文楷体");
 81         })
 82     });
 83     function rightSlide(){
 84         $(".box-child").animate({scrollLeft:"+=230"},1200,function(){
 85             if($(this).scrollLeft()==690){
 86                 $(this).scrollLeft(230);
 87             }
 88         });
 89     }
 90     function leftSlide(){
 91         $(".box-child").animate({scrollLeft:"-=230"},1200,function(){
 92             if($(this).scrollLeft()== 0){
 93                 $(this).scrollLeft(460);
 94             }
 95         });
 96     }
 97     
 98     
 99     </script>
100 </head>
101 <body>
102     <!-- 230*180 relative -->
103     <div class="box">
104         <!-- 230*180 overflow -->
105         <div class="box-child">
106             <!-- 920*180 内部大的容器 -->
107             <div class="list">
108                 <div>李白</div>
109                 <div>王昭君</div>
110                 <div>李白</div>
111                 <div>王昭君</div>
112             </div>
113             <!-- 左右按钮 -->
114             <div class="left-btn" onclick="leftSlide()" >&lt;</div>
115             <div class="right-btn" onclick="rightSlide()">&gt;</div>
116         </div>
117     </div>
118 </body>
119 </html>
appendTo
  1 <!DOCTYPE html>
  2 <html lang="zh">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Page Title</title>
  6     <style>
  7         *{
  8             margin: 0px;
  9             padding: 0px;
 10         }
 11     .box{
 12         width: 230px;
 13         height: 180px;
 14         position: relative;
 15         left: 200px;
 16     }
 17     .box-child{
 18         width: 100%;
 19         height: 100%;
 20         /* overflow: scroll; */
 21         overflow:hidden;
 22     }
 23     .list{
 24         width: 460px;
 25         height: 180px;
 26     }
 27     .list>div{
 28         width: 230px;
 29         height: 180px;
 30         float: left;
 31         line-height: 180px;
 32         text-align: center;
 33         font-size: 48px;
 34         font-weight: bold;
 35         color: white;
 36     }
 37    .red{
 38         background-color: red;
 39     }
 40     .black{
 41         background-color: black;
 42     }
 43     .left-btn{
 44         width: 30px;
 45         height: 60px;
 46         line-height: 60px;
 47         text-align: center;
 48         font-size: 30px;
 49         background: #666;
 50         color: white;
 51         position: absolute;
 52        top:  50%;
 53         margin-top: -30px;
 54         left: 0px;
 55     }
 56     .right-btn{
 57         width: 30px;
 58         height: 60px;
 59         line-height: 60px;
 60         text-align: center;
 61         font-size: 30px;
 62         background: #666;
 63         color: white;
 64         position: absolute;
 65         top: 50%;
 66         margin-top: -30px;
 67         right: 0px;
 68 
 69     }
 70     
 71     </style>
 72     <script src="a.js"></script>
 73     <script>
 74     $(function(){
 75      
 76         $(".left-btn").click(function(){
 77             $(".list").css("fontFamily","华文琥珀");
 78         });
 79         $(".right-btn").click(function(){
 80             $(".list").css("fontFamily","华文楷体");
 81         })
 82     });
 83     function rightSlide(){
 84         $(".box-child").animate({scrollLeft:"+=230"},800,function(){
 85            $(".list>div:first").appendTo($(".list"));
 86            $(".box-child").scrollLeft(0);
 87         });
 88     }
 89     function leftSlide(){
 90         $(".list>div:first").appendTo($(".list"));
 91         $(".box-child").scrollLeft(230);
 92         $(".box-child").animate({scrollLeft:"-=230"},800)
 93     };
 94     
 95     
 96     
 97     </script>
 98 </head>
 99 <body>
100     <!-- 230*180 relative -->
101     <div class="box">
102         <!-- 230*180 overflow -->
103         <div class="box-child">
104             <!-- 460*180 内部大的容器 -->
105             <div class="list">
106                 <div class="red">李白</div>
107                 <div class="black">王昭君</div>
108             </div>
109             <!-- 左右按钮 -->
110             <div class="left-btn" onclick="leftSlide()" >&lt;</div>
111             <div class="right-btn" onclick="rightSlide()">&gt;</div>
112         </div>
113     </div>
114 </body>
115 </html>
animate
  1 <!DOCTYPE html>
  2 <html lang="zh">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Page Title</title>
  6     <style>
  7         *{
  8             margin: 0px;
  9             padding: 0px;
 10         }
 11     .box{
 12         width: 230px;
 13         height: 180px;
 14         position: relative;
 15         left: 200px;
 16     }
 17     .box-child{
 18         width: 100%;
 19         height: 100%;
 20         /* overflow: scroll; */
 21         overflow:hidden;
 22     }
 23     .list{
 24         width: 1610px;
 25         height: 180px;
 26     }
 27     .list>div{
 28         width: 230px;
 29         height: 180px;
 30         float: left;
 31         line-height: 180px;
 32         text-align: center;
 33         font-size: 48px;
 34         font-weight: bold;
 35         color: white;
 36     }
 37    .red{
 38         background-color: red;
 39     }
 40     .black{
 41         background-color: black;
 42     }
 43     .yellow{
 44         background-color: yellow;
 45     }
 46     .pink{
 47         background-color:pink;
 48     }
 49     .green{
 50         background-color:green;
 51     }
 52     .white{
 53         background-color:#cfcfcf;
 54     }
 55     .skyblue{
 56 
 57         background-color:skyblue;
 58     }
 59   
 60     .left-btn{
 61         width: 30px;
 62         height: 60px;
 63         line-height: 60px;
 64         text-align: center;
 65         font-size: 30px;
 66         background: #666;
 67         color: white;
 68         position: absolute;
 69        top:  50%;
 70         margin-top: -30px;
 71         left: 0px;
 72     }
 73     .right-btn{
 74         width: 30px;
 75         height: 60px;
 76         line-height: 60px;
 77         text-align: center;
 78         font-size: 30px;
 79         background: #666;
 80         color: white;
 81         position: absolute;
 82         top: 50%;
 83         margin-top: -30px;
 84         right: 0px;
 85 
 86     }
 87     
 88     </style>
 89     <script src="a.js"></script>
 90     <script>
 91     $(function(){
 92      
 93         $(".left-btn").click(function(){
 94             $(".list").css("fontFamily","华文琥珀");
 95         });
 96         $(".right-btn").click(function(){
 97             $(".list").css("fontFamily","华文楷体");
 98         })
 99     });
100     function rightSlide(){
101         $(".box-child").animate({scrollLeft:"+=230"},800,function(){
102            $(".list>div:first").appendTo($(".list"));
103            $(".box-child").scrollLeft(0);
104         });
105     }
106     function leftSlide(){
107 
108 
109         //把第一个添加到末尾，这样默认显示
110         if($(".box-child").scrollLeft()==0){
111             $(".list>div:first").appendTo($(".list"));
112             $(".box-child").scrollLeft(
113                 ($(".list>div").length-1)*$(".list>div").width()
114             );
115         }
116       
117         $(".box-child").animate({scrollLeft:"-=230"},800)
118     };
119     
120     
121     
122     </script>
123 </head>
124 <body>
125     <!-- 230*180 relative -->
126     <div class="box">
127         <!-- 230*180 overflow -->
128         <div class="box-child">
129             <!-- 460*180 内部大的容器 -->
130             <div class="list">
131                 <div class="red">李白</div>
132                 <div class="black">王昭君</div>
133                 <div class="yellow">韩信</div>
134                 <div class="pink">刘备</div>
135                 <div class="green">孙尚香</div>
136                 <div class="skyblue">费庆虎</div>
137                 <div class="white">马超</div>
138               
139             </div>
140             <!-- 左右按钮 -->
141             <div class="left-btn" onclick="leftSlide()" >&lt;</div>
142             <div class="right-btn" onclick="rightSlide()">&gt;</div>
143         </div>
144     </div>
145 </body>
146 </html>
fadeOut
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    .d{width:300px;height:300px;background-color:Red;}

</style>
</head>

<body>
    
    <div class="d">
    
    </div>

</body>
</html>
<script src="../jquery-3.2.1.min.js"></script>
<Script>

    $(".d").fadeOut(10).fadeIn(100);

</script>

轮播淡入

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <script src="a.js"></script>
  7 <script>
  8     var index = 1;//表示第几个图显示，下标0-7，从1这张图开始生效
  9 
 10     var timeout;//设置绑定timeout的变量
 11     $(function(){
 12         timeout = setTimeout(lunbo,2000);
 13     });
 14     function lunbo(){
 15         //li和a一起改变
 16         $("li").css({background:"none"}).eq(index).css({backgroundColor:"white"})
 17         $(".img-list>a").hide().eq(index).fadeIn(300,function(){
 18             index++;
 19             if(index==8){
 20                 index = 0;
 21             }
 22             timeout = setTimeout(lunbo,2000);
 23         })
 24     }
 25 //点击li的时候触发
 26     // function dj(i){
 27     //     //需要先清除已经发生的准备执行的定时器
 28     //     clearTimeout(timeout);
 29     //     index = i;//改变index的值，调用函数直接显示点击的图片
 30     //     lunbo();
 31     // }
 32 $(function(){
 33 
 34     $("li").click(function(){
 35         //需要先清除已经发生的准备执行的定时器
 36         clearTimeout(timeout);
 37         index = $(this).index();//改变index的值，调用函数直接显示点击的图片
 38         lunbo();
 39 });
 40 
 41 
 42 
 43 });
 44 
 45 
 46 
 47 
 48 
 49 
 50 
 51 
 52 </script>
 53 <style>
 54     *{margin:0px;padding:0px;}
 55     .parent{width:100%;height:425px;position:relative;}
 56     .img-list{
 57         width:1920px;
 58         height:425px;
 59         position:absolute;
 60         left:50%;
 61         margin-left:-960px;
 62         border:2px solid red;
 63     }
 64     .img-list>a{
 65         display:none;    
 66     }
 67     
 68     ul{
 69         width:201px;
 70         height:22px;
 71         border:1px solid red;
 72         position:absolute;
 73         left:50%;
 74         margin-left:-100px;
 75         bottom:10px;
 76         background:rgba(244,244,244,.5);
 77         border-radius:11px;
 78     }
 79     li{
 80         width:14px;
 81         height:14px;    
 82         border-radius:50%;
 83         border:1px solid white;
 84         margin:3px 0px 0px 8px;
 85         float:left;
 86         list-style:none;
 87     }
 88 </style>
 89 </head>
 90 
 91 <body>
 92     
 93     <div class="parent">
 94         <div class="img-list">
 95             <!--8张图-->
 96             <a style="display:block;" href="#"><img src="1.jpg"/></a>
 97             <a href="#"><img src="2.png"/></a>
 98             <a href="#"><img src="3.jpg"/></a>
 99             <a href="#"><img src="4.jpg"/></a>
100             <a href="#"><img src="5.jpg"/></a>
101             <a href="#"><img src="6.jpg"/></a>
102             <a href="#"><img src="7.jpg"/></a>
103             <a href="#"><img src="8.jpg"/></a>
104            </div>
105         <ul>
106             <li style="background-color:white;" ></li>
107             <li></li>
108             <li></li>
109             <li></li>
110             <li></li>
111             <li></li>
112             <li></li>
113             <li></li>
114         </ul>
115     
116     </div>
117 
118 
119 </body>
120 </html>

189

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <style>
  7     *{margin:0px;padding:0px;}
  8     .box{
  9         width:1010px;
 10         height:222px;
 11         position:relative;
 12         left:200px;
 13         }
 14     .box-child{
 15         width:1010px;
 16         height:222px;
 17         overflow:hidden;
 18     }
 19     .list{
 20         width:2020px;
 21         height:222px;    
 22     }
 23     .list>div{
 24         width:1010px;
 25         height:222px;
 26         float:left;
 27     }
 28     .list>div>a{
 29         position:relative;
 30         float:left;
 31         margin:0px 2px 2px 0px;
 32     }
 33     .list>div>a:nth-child(3){
 34         margin:0px;    
 35     }
 36     .list>div>a:nth-child(7){
 37         margin:0px;    
 38     }
 39     
 40     .left-btn{
 41         width:26px;
 42         height:74px;
 43         line-height:74px;
 44         text-align:center;
 45         font-size:30px;
 46         background:#666;
 47         color:White;
 48         position:absolute;
 49         top:50%;
 50         margin-top:-37px;
 51         left:0px;    
 52     }
 53     .right-btn{
 54         width:26px;
 55         height:74px;
 56         line-height:74px;
 57         text-align:center;
 58         font-size:30px;
 59         background:#666;
 60         color:White;
 61         position:absolute;
 62         top:50%;
 63         margin-top:-37px;
 64         right:0px;    
 65     }
 66 </style>
 67 </head>
 68 
 69 <body>
 70     <!--1010*222 relative-->
 71     <div class="box">
 72         <!--1010*222 overflow-->
 73         <div class="box-child">
 74             <!--2020*222 内部大的容器-->
 75             <div class="list">
 76                 <div>
 77                     <a href="#"><img src="images/1.jpg"/></a>
 78                     <a href="#"><img src="images/2.jpg"/></a>
 79                     <a href="#"><img src="images/3.jpg"/></a>
 80                     <a href="#"><img src="images/4.jpg"/></a>
 81                     <a href="#"><img src="images/5.jpg"/></a>
 82                     <a href="#"><img src="images/6.jpg"/></a>
 83                     <a href="#"><img src="images/7.jpg"/></a>
 84                     <a href="#"><img src="images/8.jpg"/></a>
 85                 </div>
 86                 <div>
 87                     <a href="#"><img src="images/9.jpg"/></a>
 88                     <a href="#"><img src="images/10.jpg"/></a>
 89                     <a href="#"><img src="images/11.jpg"/></a>
 90                     <a href="#"><img src="images/12.jpg"/></a>
 91                     <a href="#"><img src="images/13.jpg"/></a>
 92                     <a href="#"><img src="images/14.jpg"/></a>
 93                     <a href="#"><img src="images/15.jpg"/></a>
 94                     <a href="#"><img src="images/1.jpg"/></a>
 95                 </div>
 96             </div>
 97         </div>
 98         <!--左右按钮-->
 99         <div class="left-btn" onclick="left()">&lt;</div>
100         <div class="right-btn" onclick="right()">&gt;</div>
101     </div>
102 
103 </body>
104 </html>
105 <script src="a.js"></script>
106 <script>
107     
108     
109     
110      
111     var timeout=setTimeout(right,2000);
112     
113     function right(){
114             clearTimeout(timeout);
115             //匹配box-child是否在执行动画
116             if($(".box-child:animated").length==0){
117                 $(".box-child").animate({scrollLeft:"+=1010"},1000,function(){
118                     $(".list>div:first").appendTo($(".list"));
119                     $(".box-child").scrollLeft(0);
120                     timeout=setTimeout(right,2000);
121                 });    
122             }
123     }
124     function left(){
125             clearTimeout(timeout);
126             //匹配box-child是否在执行动画
127             if($(".box-child").scrollLeft()==0){
128                 $(".box-child").scrollLeft(1010);
129                 $(".list>div:first").appendTo($(".list"));
130             }
131             if($(".box-child:animated").length==0){
132                 $(".box-child").stop().animate({scrollLeft:"-=1010"},1000,function(){
133                     timeout=setTimeout(right,2000);
134                 });    
135             }
136     }
137 
138 
139 
140 
141 
142 </script>

 

posted @ 2019-03-06 15:47  我有满天星辰  阅读(154)  评论(0)  编辑  收藏  举报