2012-05-25

jQuery滚动效果

新浪微博的滚动效果，通过JavaScript也能实现，但感觉用JavaScript写这个效果极其麻烦。使用jQuery只需要几行代码就能轻松实现。

首先我们分析下动画原理，微博上的滚动效果主要有两步：滑出，渐变。

首先是滑出

在jQuery中，要使某个标签滑入滑出可以使用slideDown()与sildeUp()函数，分别是向下向上滑动。我们先来实现滑动效果

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>jQuery滚动效果</title>
    <style type="text/css">
      .list {background:#f6f6f6; width:700px;border:1px solid #e2e2e2;height:200px;}
      .list .tit {   border-bottom:1px solid #ddd;text-indent:20px;background:#c3c3b3;height:40px; line-height:40px;color:#b5c;}
      ul {display:block;   padding:10px 10px 0; overflow:hidden; position:relative; top:10px;}    
      ul li {display:block; height:50px; border-bottom:1px dashed #808080; background:#f6f6f6 left top no-repeat; padding-top:3px; margin-bottom:10px; *margin-bottom:5px;}
      .con {margin:20px;}
      .con .list {margin:10px 0px;}
    </style>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script type="text/javascript">
      var arr = new Array();
      arr['0'] = '【小猪】：大家好！欢迎来到琼台博客';
      arr['1'] = '【小牛】：在这里大家可以互相分享技术心得。';
      arr['2'] = '【小狗】：认识大家很高兴啊！';

      var qu = arr.length-1;
        
      window.onload = function(){     
        put();
      }

      function put(){
        var str = '' ;
        for(var i=qu;i<arr.length;i++){
          str += '<li>'+arr[i]+'</li>';
        }
        $('#k').html(str);
        qu--;
        setInterval('show()',3000); 
      }

      function calculate(){
        if(qu<=0){
          qu = arr.length-1;
        }else{
          qu --;  
        }
      }
        
      // 动画主函数
      function show(){
        $('#k li:first').before('<li style="display:none;">'+arr[qu]+'</li>');  
        $('#k li:first').slideDown(500);
        $('#k li:last').animate({ opacity:"0",marginTop:"0"},500,'',function(){$('#k li:last').remove();});
        calculate(); 
      }
    </script>
  </head>
  <body>
    <div class="con">
      <div class="info">
        <h1>jQuery滚动效果</h1>
      </div>
      <div class='list'>
        <div class='tit'><h3>最新动态</h3></div>
        <ul id="k">
          加载中...
        </ul>
      </div>
    </div>
  </body>
</html>

jQuery滚动效果

推荐文章