带按钮的滑块.怎么提高? [英] Slider with buttons. How to improve?

问题描述

我需要制作一个滑块.

我有内容(应该水平移动)和两个按钮-右"和左".

I have content (which should shift horizontally) and two buttons - "right" and "left".

如果按住按钮不放，内容将开始移动(沿适当的方向).如果您不按住按钮，则运动会停止.此行为复制了普通窗口滚动条的行为.

If you press the button and hold it, the content starts to move (in the appropriate direction). If you not hold the button, then the movement stops. This behavior copies the behavior of a usual window scrollbar.

我写了一些代码:

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

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

But it does have a few things that I do not like:

1. 它总是调用动画函数(loopingAnimation)-我认为这是一个额外的负担(不好).
2. 在移动内容时，他会颤抖和颤抖"-(这不漂亮).

1. It always calls the function animation (loopingAnimation) - I think that this is an extra load (not good).
2. When moving content he "twitches and trembling" - (it's not pretty).

如何更好地优雅地解决此问题，而又没有代码的缺点?

How can I solve this problem more elegantly and without the drawbacks of my code?

推荐答案

如果一次设置多个像素，我认为您无法绕过该函数循环或抽动和颤抖.

I don't think you can get around looping through the function or the twitching and trembling if you animate more than one pixel at a time.

但是我确实尝试清理一下代码，因为您可以将+=1px或-=1px与动画功能一起使用:( Update :删除了动画功能，但您可以使用+=1px或-=1px供将来参考)

But I did try to clean up your code a bit,because you can use +=1px or -=1px with the animation function: (Update: removed the animation function, but you can use +=1px or -=1px for future reference)

$(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，并且不喜欢慢速滚动条，所以我制作了具有鼠标滚轮功能的演示，鼠标拖放功能.这是额外的代码:

Because I have OCD and don't like slow scrollers, I made a demo with mousewheel functionality and mouse drag and drop functionality. Here is the extra code:

更新:实际上，我认为，如果您不使用jQuery动画功能，则滚动会更流畅.我已经更新了上面的代码，并演示.

Update: Actually, I think if you don't use the jQuery animate function you get a smoother scroll. I have updated the code above, and 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'
    });

这篇关于带按钮的滑块.怎么提高?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！