基于鼠标位置的平滑滚动条（Jquery）
HI！
我想基于鼠标位置创建一个平滑滚动条。 我们的想法是创建一个固定宽度的外部div。 内容非常宽，必须根据鼠标位置向左或向右滚动。 如果内容是“无限的”或“无限的”，那就太好了。 内容是一个非常宽的图像，重复’seamelesly’。
任何人都可以通过在jQuery中创建它来帮助我吗？
Thanx提前！
亚历克斯
您可以将图像设置为div的背景，并使用jquery为background-position设置动画。 （ 因为它让我感兴趣，这是一个实现 ）
演示 http://jsfiddle.net/gaby/72yhW/
HTML
CSS
.backdrop{ position:relative; height:300px; /*could be anything really..*/ width:400px; /*could be anything really..*/ border:3px solid #6699ff; background: url('YOUR IMAGE PATH GOES HERE') 0 0 repeat-x; } .direction{ position:absolute; width:50%; height:100%; } .left{left:0;top:0;} .right{right:0;top:0;}
jQuery的
$(function(){ var x=0, y=0, rate=0, maxspeed=10; var backdrop = $('.backdrop'); $('.direction', backdrop).mousemove(function(e){ var $this = $(this); var left = $this.is('.left'); if (left){ var w = $this.width(); rate = (w - e.pageX - $(this).offset().left + 1)/w; } else{ var w = $this.width(); rate = -(e.pageX - $(this).offset().left + 1)/w; } }); backdrop.hover( function(){ var scroller = setInterval( moveBackdrop, 10 ); $(this).data('scroller', scroller); }, function(){ var scroller = $(this).data('scroller'); clearInterval( scroller ); } ); function moveBackdrop(){ x += maxspeed * rate; var newpos = x+'px '+y+'px'; backdrop.css('background-position',newpos); } });
有两个现有的令人敬畏的jQuery插件完全符合您的要求：
1） http://manos.malihu.gr/jquery-thumbnail-scroller
2） http://www.convergent-evolution.co.uk/resources/jquery-plugins/scrolling-carousel/
数字1更精致，因为它具有更平滑的滚动动作，并且可以选择性地突出当前hover在项目上。
有一个名为Smooth Div Scroll的jQuery插件就是这样做的。 它可以平滑地滚动内容，您可以通过将鼠标hover在滚动条内的两个热点（左侧和右侧，可见或不可见）上来控制它。 有一个无限滚动选项。