pig's diary

何でも忘れるので万年初心者ね

jQuery putitScroll 1.0.0 - divの中だけ、ホバーでクルクルスクロール。

$('.your_classes_here').putitScroll();

早速作ってみました、jQueryプラグイン2chまとめブログの方々とか、ぜひ使っていただきたいです。
デモページはこちら>>

/*****************************************************************************
jQuery putitScroll 1.0.0

Copyright (c) 2010 Soichi Takamura (http://d.hatena.ne.jp/piglovesyou/)

Dual licensed under the MIT and GPL licenses:
	http://www.opensource.org/licenses/mit-license.php
	http://www.gnu.org/licenses/gpl.html

------------------------------------------------------------------------------

This plugin smoothly scroll the element that contain <ul> and <li>s.
The Requirements of html code is below:

==================
<div class="your_classes_here">
	<ul>
		<li>Something like text or images.</li>
		<li>Something like text or images.</li>
		<li>Something like text or images.</li>
		<li>Something like text or images.</li>
	</ul>
</div>
==================

And you can just write javascript code like below(after content loaded):

==================
// putitScroll setting
$('.your_classes_here').putitScroll();
==================

It's that easy!
Additionally, you can set these options:

==================
// putitScroll setting with opitons
$('.your_classes_here').putitScroll({
    visibleList: 3,  // 3 is default. this number decides outer div height.
    quality    : 10, // 10 is default. 8~10 is nice. setInterval's loop is up to this.
    steps      : 8   // 8 is default. 6~8 is nice, More small, more slow.
});
==================
*****************************************************************************/
(function(jQuery) {
  jQuery.fn.putitScroll = function(options) {
    var options = jQuery.extend({
        visibleList: 3,
        quality    : 10,
        steps      : 8
    },options);
    return this.each(function(){
	    var targetY=0,
	    		timer;
      var $box = $(this).css({overflow:'hidden'}),
      		$ul  = $('> ul', $box),
          $li  = $('> li', $ul),
		      ul_H = $ul.outerHeight(),
		      li_H = $li.outerHeight(),
		      box_H= $box.height(li_H*options.visibleList).outerHeight()-li_H,
		      ulOffset = ul_H - box_H
      $box.hover(function(){
      	timer = setInterval(loop, 1000/(options.quality+10));
      },function(){
      	clearInterval(timer);
      	
      }).mousemove(function(e){
      	var boxOffset = $box.offset().top+li_H/2;
      	var y = e.clientY - boxOffset;
      	if(y>=0 && y<=box_H) {
	      	targetY = y/box_H*ulOffset;
	      } else {
	      	if (y<0) targetY = 0;
	      	else if (y>box_H) targetY = ulOffset;
	      	else targetY = 0;
	      }
      });
	    var loop = function(){
	    	var currentY = $box.scrollTop();
	    	$box.scrollTop(currentY + (targetY - currentY)/options.steps);
	    }
    });
  };
})(jQuery);