控制文章向上下滚动的jQuery插件

好长时间没写是jQuery的代码了，似乎又都忘了个干净！记性实在是太强了，BS一下自己！
整个了一下公司的网站，想找一个控制文本上下滚动的插件，却没找到合意的（或许是俺不会找吧），只好自己动手了！忘了怎么写，就拿前辈们的代码出来，重新过炉一遍了！

其他的都不说，先来看看偶是怎么实现的！
一、HTML页面的实现：

    

    
The Bioscreen Foundation is a non-profit, non-governmental organization established in 2004 with the aim to raise awareness of the importance of a sustainable environment and to effect change through education. While everyone is encouraged to participate in our campaign, our efforts in the promotion of environmental programs specifically target students in higher education as we believe that education is the foundation of environmental improvement.  Through competitions and activities, we hope to introduce them to various concepts of sustainability.

    
    
We endorse Principle 21 of the Rio Declaration which states:

      'The creativity, ideals and courage of the youth of the world should be mobilised to forge a global partnership in order to achieve sustainable development and ensure a better future for all'.

    
    
Through the establishment of the Bioscreen Foundation for Environmental Education, we hope our efforts, coupled with the power of our participants, would raise the public's awareness about the importance of conserving our environment and creating a sustainable world.

    

    

      
  
      

    

  

二、接下来就是jQuery控制还有CSS的配合了：

$(function(){
  //取得容器和文本的各自高度
  var bodyHeight=$('#content_body').height();
  var contentHeight=$('#content_body .body').height();
  
  //如果超出容器高度再实现滚动按钮
  if(contentHeight>bodyHeight){
    $('#slider').css('display','visible');
    //$('#content_body .body').css({height:bodyHeight,overflow:'hidden'});
    var distance=contentHeight-bodyHeight
    var time=distance/20 * 1000;  //设置移动时间间隔，每秒20px
    var posTop=parseInt($('#content_body .body').css('margin-top'))-distance;
    
    $('#slider .up').mouseover(function(){
      $('#content_body .body').animate({marginTop:posTop},time);
      
    }).mouseout(function(){
      $('#content_body .body').stop(true);
    });
    
    $('#slider .down').mouseover(function(){
      $('#content_body .body').animate({marginTop:0},time);  
    }).mouseout(function(){
      $('#content_body .body').stop(true);
    });
  }
});  

三、想了想，为了熟悉一下jQUery插件的开发编写，就又试着改了一下：

/*
 *  主题内容上下移动功能
 *    bHeight:  容器的高度
 *    cHeight:  文章内容的高度
 *    distance:  每秒移动的距离(px)
 *    上下移动的鼠标事件绑定到#slider节点下的.up和.down两个子节点上
 *
 *    by Iawen
 *    2010-11-26 14:56
 */

$(function(){
  //取得容器和文本的各自高度
  var bodyHeight=$('#content_body').height();
  var contentHeight=$('#content_body .body').height();
  
  $('#content_body .body').iawenMoveText({
    bHeight:bodyHeight,
    cHeight:contentHeight
  });

});  

(function($){
  jQuery.fn.iawenMoveText = function(options){
        var defaults = {
            bHeight: 280,
            cHeight : 300,
            distance : 80
        };
        var options = $.extend(defaults, options);
        
        //如果超出容器高度再实现滚动按钮
    if(options.cHeight>options.bHeight){
      $('#slider').show();
  
      var space=options.cHeight-options.bHeight
      var time=space/options.distance * 1000;  //设置移动时间间隔，每秒20px
      var posTop=parseInt($('#content_body .body').css('margin-top'))-space;
      
      $('#slider .up').mouseover(function(){
        $('#content_body .body').animate({marginTop:0},time);  
        
      }).mouseout(function(){
        $('#content_body .body').stop(true);
      });
      
      $('#slider .down').mouseover(function(){
        $('#content_body .body').animate({marginTop:posTop},time);
      }).mouseout(function(){
        $('#content_body .body').stop(true);
      });
    }
    };  
})(jQuery);

好了，收工！自我感觉实在是马虎啊！但自己用做还是凑合！
没办法，功力太浅了，也长时间没用了！

最后来个页面截图：
[img][attach]402[/attach][/img]