滑块与按钮。 如何提高？

我需要制作一个滑块。

我有内容（应该水平移动）和两个按钮 – “右”和“左”。

如果按住按钮并按住它，内容将开始移动（按适当的方向）。 如果您没有按住按钮，则移动停止。 此行为复制通常窗口滚动条的行为。

我写了一些代码：

var animateTime = 1, offsetStep = 5; //event handling for buttons "left", "right" $('.bttR, .bttL') .mousedown(function() { scrollContent.data('loop', true).loopingAnimation($(this)); }) .bind("mouseup mouseout", function(){ scrollContent.data('loop', false); }); $.fn.loopingAnimation = function(el){ if(this.data('loop') == true){ var leftOffsetStr; leftOffsetInt = parseInt(this.css('marginLeft').slice(0, -2)); if(el.attr('class') == 'bttR') leftOffsetStr = (leftOffsetInt - offsetStep).toString() + 'px'; else if(el.attr('class') == 'bttL') leftOffsetStr = (leftOffsetInt + offsetStep).toString() + 'px'; this.animate({marginLeft: leftOffsetStr}, animateTime, function(){ $(this).loopingAnimation(el); }) } return this; } 

但它确实有一些我不喜欢的东西：

1. 它总是调用函数动画（ loopingAnimation ） – 我认为这是一个额外的负载（不好）。
2. 在移动内容时，他“抽搐和颤抖” – （它并不漂亮）。

如何更优雅地解决这个问题，没有我的代码的缺点？

Answer 1

如果你一次动画多个像素，我认为你不能绕过函数循环或颤抖和颤抖。

但我确实试着清理你的代码， 因为你可以使用动画函数+=1px或-=1px ： （ 更新 ：删除了动画function，但你可以使用+=1px或-=1px以备将来参考）

 $(document).ready(function(){ var animateTime = 1, offsetStep = 5, scrollWrapper = $('#wrap'); //event handling for buttons "left", "right" $('.bttR, .bttL') .mousedown(function() { scrollWrapper.data('loop', true); loopingAnimation($(this), $(this).is('.bttR') ); }) .bind("mouseup mouseout", function(){ scrollWrapper.data('loop', false).stop(); $(this).data('scrollLeft', this.scrollLeft); }); loopingAnimation = function(el, dir){ if(scrollWrapper.data('loop')){ var sign = (dir) ? offsetStep : -offsetStep; scrollWrapper[0].scrollLeft += sign; setTimeout( function(){ loopingAnimation(el,dir) }, animateTime ); } return false; }; }) 

因为我有OCD并且不喜欢慢速滚动条，所以我做了一个带有鼠标滚轮function和鼠标拖放function的演示 。 这是额外的代码：

更新 ：实际上，我认为如果你不使用jQuery动画function，你会得到一个更流畅的滚动。 我已经更新了上面的代码和演示 。

 $('#wrap') // wrap around content .mousedown(function(event) { $(this) .data('down', true) .data('x', event.clientX) .data('scrollLeft', this.scrollLeft); return false; }) .mouseup(function (event) { $(this).data('down', false); }) .mousemove(function (event) { if ($(this).data('down') == true) { this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX; } }) .mousewheel(function (event, delta) { this.scrollLeft -= (delta * 30); }) .css({ 'overflow' : 'hidden', 'cursor' : '-moz-grab' });