плагин:

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>

Оставьте свой комментарий