js 动画初探

浏览数：32 / 时间：2015年06月09日

直接上代码

几个参数和函数:

CSS

absolute:

绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。可脱离文档流。要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。

relative:

相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

JQUERY

animate("style","speed"):该方法通过CSS样式将元素从一个状态改变为另一个状态。

find():找到某个方法。

下面demo演示了鼠标划过图片出现内容的例子。

主要思想为先把 .title 左移覆盖，然后通过鼠标事件 animate() 方法出现在图片中。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .brands-list {
 8             width: 480px;
 9             height: 350px;
10             overflow: hidden;
11             margin: 20px auto 0 auto;
12         }
13         .brands-list li a {
14             position: relative;
15             height: 104px;
16             display: block;
17             cursor: pointer; }
18         .brands-list li a .title
19         { z-index: 2;
20             position: absolute;
21             bottom: 10px;
22             left: -160px;
23             width: 150px;
24             height: 20px;
25             padding: 0 0 0 10px;
26             color: #f1e8eb;
27             line-height: 17px;
28             font-size:12px;}
29   </style>
30 　　　　<script src="js/jquery.js"></script>　　　　
31 </head>
32 <body>
33   <div class="brands-list">
34       <ul>
35           <li><a href="xx"><img src="pic_2.jpg" ><span class="title">TEST</span>
36       </a></li>
37       </ul>
38   </div>
39 </body>
40 <script>
41     $(function(){
42         $(".brands-list li a").hover(function(){
43             $(this).find(".title").animate({left:‘0px‘});
44         },function(){
45             $(this).find(".title").animate({left:‘-160px‘});
46         });
47     });
48 </script>
49 </html>