1. 首頁
  2. 問答
  3. 固定拖動滾動條或淨化器使用jQuery

固定拖動滾動條或淨化器使用jQuery

2013-11-21 46 views

回答

0

---------------------------------- 例＃1

所以正如我在評論中提到的 - Kendo-ui滑塊Kendo-ui slider將會這樣做。 這裏是一個例子Fiddle

基本上我做的內容比屏幕更寬，然後通過改變它的邊距將它移動到滑塊的「滑動」事件。

注意：這不是唯一的方法來做到這一點。只是一個例子。

HTML

<div id="main"></div> 
<input id="slider" class="balSlider" value="0" />

的CSS：

#main { 
    width:2000px; 
    height:200px; 
    background: #1e5799; 
    /* Old browsers */ 
    background: -moz-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%); 
    /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #1e5799), color-stop(25%, #29b221), color-stop(77%, #d83a22), color-stop(100%, #f2f282)); 
    /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%); 
    /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%); 
    /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%); 
    /* IE10+ */ 
    background: linear-gradient(to right, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%); 
    /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#f2f282', GradientType=1); 
    /* IE6-9 */ 
}

的Javascript：

var slider = $("#slider").kendoSlider({ 
    increaseButtonTitle: "Right", 
    decreaseButtonTitle: "Left", 
    slide: sliderOnSlide, 
    min: 0, 
    max: 20, 
    smallStep: 2, 
    largeStep: 1 
}).data("kendoSlider"); 

function sliderOnSlide(e) { 
    $("#main").css("margin-left", "-" + (e.value * 20)+"px"); 
}

-------------- -------- 示例＃2

您可以使用Custom scroll bar plugin來實現相同。 這裏是Fiddle

HTML

<body class="container default-skin"> 
<div id="main" ></div> 
</body>

CSS

body 
{ 
height:202px; 
    width:300px; 

} 

#main { 
    width:2000px; 
    height:200px; 
    background: #1e5799; 
    /* Old browsers */ 
    background: -moz-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%); 
    /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #1e5799), color-stop(25%, #29b221), color-stop(77%, #d83a22), color-stop(100%, #f2f282)); 
    /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%); 
    /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%); 
    /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%); 
    /* IE10+ */ 
    background: linear-gradient(to right, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%); 
    /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#f2f282', GradientType=1); 
    /* IE6-9 */ 
}

的Javascript

$(document).ready(function() { 
    $(".container").customScrollbar(); 
});

來源

2013-11-21 13:18:47

相關問題

 相關問題