向上滑动效果

html结构：

 1 <div class="top">
 2         <h1>一元传奇</h1>
 3         <div class="area">
 4             <ul>
 5                 <li>1</li>
 6                 <li>2</li>
 7                 <li>3</li>
 8                 <li>4</li>
 9                 <li>5</li>
10                 <li>6</li>
11                 <li>7</li>
12                 <li>8</li>
13                 <li>9</li>
14                 <li>10</li>
15                 <li>11</li>
16                 <li>12</li>
17                 <li>13</li>
18                 <li>14</li>
19                 <li>15</li>
20                 <li>16</li>
21                 <li>17</li>
22                 <li>18</li>
23                 <li>19</li>
24                 <li>20</li>
25             </ul>
26         </div>
27     </div>

css结构：

 1 <style type="text/css">
 2     html,body,ul,ol,li{
 3         margin: 0;
 4         padding: 0;
 5     }
 6     .top{
 7         position: relative;
 8         width: 300px;
 9         height: auto;
10     }
11     .top>h1{
12         background-color: #898989;
13         margin: 0;
14         line-height: 30px;
15         font-size: 16px;
16         color: #fff;
17         padding: 5px;
18     }
19     .top>.area{
20         position: relative;
21         overflow: hidden;
22         width: 100%;
23         height: 500px;
24     }
25     .area>ul{
26         position: absolute;
27         width: 100%;
28         height: auto;
29         left: 0;
30         top: 0;
31     }
32     .area>ul>li{
33         width: 100%;
34         height: 50px;
35     }
36     </style>

js结构：

 1 <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
 2     <script type="text/javascript">
 3         $(function(){
 4             var 
 5                 area_ul = $('div.area>ul'),
 6                 area_ul_lis = $('div.area>ul>li');
 7 
 8             // 为。。。
 9             area_ul_lis.each(function(index){
10                 var $self = $(this);
11                 if(index % 2 == 0){
12                     // 偶数    
13                     $self.css('background-color','#cccfff');
14                 }else{
15                     // 奇数
16                     $self.css('background-color','#fffccc');
17                 }
18             });
19 
20             // area_ul.before().after().append().prepend()
21             // area_ul.prepend('<li></li>').css('top','-50px');
22             setInterval(function(){
23                 area_ul.animate({
24                     top : '-50px'
25                 },500,function(){
26                     var area_ul_lis_t = $('div.area>ul>li');
27                     $(this).css('top','0').append(area_ul_lis_t.eq(0));
28                 });
29             },1000);
30         });
31     </script>

 

posted @ 2016-07-24 22:48  jiangxiaobo  阅读(737)  评论(0)  编辑  收藏  举报