Question

我需要制作一个滑块。

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

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

我写了一些代码：

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

但确实有一些我不喜欢的事情：

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

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

Answer 1

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

但我确实尝试清理你的代码，~~因为你可以使用动态函数+=1px或-=1px：~~（更新：删除了动画功能，但您可以使用+=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并且不喜欢慢速滚动条，所以我made a demo具有鼠标滚轮功能和鼠标拖放功能。这是额外的代码：

更新：实际上，我认为如果你不使用jQuery动画功能，你会得到更顺畅的滚动。我已更新上面的代码，the demo。

$('#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'
    });

滑块与按钮。如何提高？

1 个答案: