Question

我已根据需要修改了jQuery UI Slider Scrollbar。滑块http://jqueryui.com/slider/#side-scroll 1

的原始版本

我有html

<div class="ui-slide-range">
    <div id="sliderContent">        
        <div class="viewer ui-corner-all">
            <div class="content-conveyor ui-helper-clearfix">
                <div class="item">
                    <img src="img/item4.jpg" height="152" width="205" alt="">   
                </div>
            </div>
       </div>
       <div id="slider"></div>
    </div>
</div>

和jQuery代码

$(function() {

//vars
var conveyor = $(".content-conveyor", $("#sliderContent")),
item = $(".item", $("#sliderContent"));

//set length of conveyor
conveyor.css("width", item.length * parseInt(item.css("width")));

    //config
    var sliderOpts = {
  max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
      slide: function(e, ui) { 
        conveyor.css("left", "-" + ui.value + "px");
      }
    };

    //create slider
    $("#slider").slider(sliderOpts);
  });

$( "#slider" ).slider({
            range: "min",
            value: 1,
            slide: function() {
                update();
            }
});

如何为此滑块添加鼠标滚轮动作？我使用搜索，发现了很多问题，但答案对我没有帮助。以下是一些问题的链接。 Question1 Question2

我一直在研究这一天，我无论如何都无法解决问题，请帮助。

JsFiddle链接是here

Answer 1

DEMO jquery ui使用jquery mousewheel plugin支持鼠标滚轮的滑块

代码：

$(function() {
    var value;
    $( "#slider" ).slider({
        slide: function( event, ui ) {
            value = $( "#slider" ).slider( "value" );
            $('#slider_val').html(value);
        }
    });

    value = $( "#slider" ).slider( "value" );
    $('#slider_val').html(value);

    $('#slider').on('mousewheel', function(event) {
        event.preventDefault();
        value = $( "#slider" ).slider( "value" );

        //console.log(event.deltaX, event.deltaY, event.deltaFactor);

        //Mousewheel Scrolled up
        if(event.deltaY == -1){
            //alert("scrolled down");
            value = value+1;
            $( "#slider" ).slider("value", value);
            $('#slider_val').html(value);
        }
        //Mousewheel Scrolled down
        else if(event.deltaY == 1){
            //alert("scrolled up");
            value = value-1;
            $( "#slider" ).slider( "value", value );
            $('#slider_val').html(value);
        }
    });

});

Answer 2

（这篇文章的工作版）

你忘记了＆＃34;移动＆＃34; content（div with class＆＃34; scroll-content＆＃34; in slider）
已更改（向下滚动=查看新照片）

内容和滑块的固定值

setTimeout( sizeScrollbar, 10 );//safari wants a timeout

$( ".scroll-pane" ).mousewheel(function (event, delta, deltaX, deltaY) {    
    event.preventDefault();

    var 
        value = scrollbar.slider( "option", "value" ),  // Get position of slider (% of 100%)
        value2 = scrollbar.slider( "option", "value" ), // Get position of slider (% of 100%)

        scrollSpeed = 75,
        widthFull = 2000;   // variable (for help: getimagesize, widthNow += ImgWidth, widthFull += widthNow)
        scrollLimit = (-1) * widthFull + innerWidth;    // innerWidth - browser's width


    value = (-1) * (value / 100) * widthFull  + delta * scrollSpeed;
    value > 0 && (value = 0);                           // 'left' limit
    value < scrollLimit && (value = scrollLimit);       // 'right' limit

    $(".scroll-content").css('margin-left', value );    // Setter for content


    value2 += -1 * delta * ( 100 / (widthFull / scrollSpeed) ); //100% / (count of times want to scroll)
    value2 < 0 && (value2 = 0);
    value2 > 100 && (value2 = 100);

    scrollbar.slider( "option", "value", value2 );   // Setter for slider
});

Answer 3

我找到了解决这个问题的方法，可能对某人有用。

setTimeout( sizeScrollbar, 10 );//safari wants a timeout
$( ".scroll-pane" ).mousewheel(function (event, delta, deltaX, deltaY) {event.preventDefault();
   var value = scrollbar.slider( "option", "value" );
   value -= delta;
   value > 100 && (value = 100);
   value < 0 && (value = 0);
scrollbar.slider( "option", "value", value );
        });

 });

只需要在我的代码中添加包装块。谢谢大家。

JsFiddle link

jQuery UI Slider滚动条中的鼠标滚轮控件

3 个答案: