目前在学习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:"+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("容器名");
时间： 2024-10-28 22:09:14