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);