2009/02/18

jQuery plugin: Scrollite

I wrote a simple jQuery plugin today, called Scrollite. This plugin makes it easier to create a float layer, scrolling with the page. Here's the code:
jQuery.fn.scrollite = function(left, margin, duration) {
margin = parseInt(margin) || 0; duration = parseInt(duration) || 0;
return this.each(function() {
  var target = jQuery(this).css({position: 'absolute', zIndex: 10000})
      .css(left ? 'left' : 'right', margin + 'px');
  jQuery(window).bind('load scroll resize', function() {
      target.animate({top: (jQuery(window).height() + window.scrollY - target.height() - margin) + 'px'}, duration);
  });
});
};
Features & options:
  • Float it without writing CSS code.
  • Place the float container in the left or right (default);
  • Customize the speed of sliding by set duration time in millisecond (Immediately sliding is default behavior);
  • Customize the margin by set margin in pixel (default: 0)
Usage:
  • $('#node').scrollite();
    Paramless call, use all default options;
  • $('#node').scrollite(false, 10);
    Put it in the right with 10-pixel-margin;
  • $('#node').scrollite(true, 5, 20);
    Put it in the left with 5-pixel-margin, complete slide in 20 milliseconds.
Demo:
Just navigate to this page, and check out the simple code :)

20 条评论: