плагин:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | jQuery.fn.scroller = function(options){ var defaults = {area: 20, velocity: 1} var settings = jQuery.extend(defaults, options); var timeoutID; var change = {x:0,y:0} var o = $(this) function Move(obj) { o.scrollLeft(o.scrollLeft()+change.x).scrollTop(o.scrollTop()+change.y) }; this.bind('mousemove', $(this), function (event) { var obj = $(this) var offset = obj.offset(); var relative = {x:event.pageX - offset.left,y:event.pageY - offset.top} var size = {x:$(this).width(),y:$(this).height()} var scroll = {x:obj.scrollLeft(),y:obj.scrollTop()} change = {x:0,y:0} for (var z in relative){ if (relative[z] < settings.area) change[z] = (relative[z] - settings.area)*settings.velocity; else if (relative[z] > (size[z]-settings.area)) change[z] = (settings.area+relative[z]-size[z])*settings.velocity; } clearInterval(timeoutID) if (change.y || change.x) timeoutID = setInterval(Move,100,[$(this)]); }); this.bind('mouseleave', $(this), function (event) { clearInterval(timeoutID) }) } |
вызов:
1 2 3 4 5 | $(function(){ // area - ширина зоны, реагирующей на положение курсора // velocity - коэффициент скорости прокрутки $('.cnt').scroller({area:50,velocity:0.5}) }) |
Пример использования:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script type="text/ecmascript"> $(function(){ $('.cnt').scroller({area:50}) }) </script> <style> .cnt{overflow:auto; width:200px; height:200px; border:1px solid red; cursor:default} .cnt_in{width:1000px; height:1000px; background:red} </style> <div class="cnt"> <div class="cnt_in"> </div> </div> |
Оставьте свой комментарий