我遇到了下面的滑動視窗SVG，它不僅可以改變寡婦的開始和結束范圍，還可以滾動選擇的范圍的差異。同樣的鏈接可以在
我們到底該怎么稱呼這個，憤怒的選擇器？還是滑動視窗？ 我甚至無法在谷歌上找到正確的術語。我們在Jquery中是否有任何類似的解決方案？
大多數的范圍選擇器只允許我們改變開始和結束的范圍，但不允許我們用這個差異來滾動瀏覽。
請分享有關如何實作這一目標的指標或資源。
感謝您
uj5u.com熱心網友回復：
看看你的#2鏈接正在做什么，他們正在使用純SVG來繪制所有專案和元素。互動是移動和操縱SVG本身。
jQuery UI中沒有任何東西可以做到這一點。你可以定制jQuery UI Slider來提供一個類似的用戶界面。考慮一下下面的情況。這是一個非常輕量級的例子，作為一個概念的證明。
。$(function() {
var handle = $("#custom-handle") 。
$("#slider").slider({
create: function() {
var $self = $（this）。
$(".ui-slider-handle"/span>, this).css({
height: ($self.height() - 4) "px"。
width: "100px"。
background: "透明",
頂部: "1px",
邊框顏色: "black",
margin: 0。
}).resizable（{
classes: {
"ui-resizable-e": "ui-icon ui-gon-grip-dotted-vertical",
"ui-resizable-w": "ui-icon ui-icon-grip-dotted-vertical".
},
containment: $self,
handles: "e,w"。
});
},
slide: function(event, ui) {
}
});
});#custom-handle .ui-resizable-e,
#custom-handle .ui-resizable-w {
top: 40px;
}< link rel="styleheet" href="/code. jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code. jquery.com/jquery-1.12.4.js"></script>
<script src="https://code. jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider"/span> style="height: 100px;">
< svg class="chart" width="100%">
<polyline
fill="none"。
stroke="#0074d9"
stroke-width="2"
points="
1,100
20,60
40,80
60,20
80,30
100,75
120,60,
140,33
160,37
180,40
200,45
220,20
240,2
260,10
280,75
300,60
320,45
340,30
360,20
380,10
400,19
420,12
440,45
460,50
480,80"/>
</svg>/span>
< div id="custom-handle"/span> class="ui-slider-handle"/span>> </div>>
</div>/span>在這里，我將滑塊變大，并用代表大專案的SVG來填充它。這也可以是一個圖片。我正在使用一個自定義手柄，正如下面的演示所建議的。https://jqueryui.com/slider/#custom-handle 這只是一個造型問題，并調整主題使其適合你。我還讓手柄可以調整大小。這是有它自己的優點和缺點的。
最后要做的是確定如何處理手柄的溢位。它將移動到滑塊的最后一個位置，并且手柄可能會移出 "視口"。你可以加入一些碰撞檢測，防止滑塊進一步移動。在Stack Overflow的一些其他主題中已經討論過這一問題。
您還可以考慮以下內容。http://paperjs.org/
uj5u.com熱心網友回復：
基于@Twisty的解決方案，下面的解決方案使用jquery范圍滑塊。 我確信，我們可以在SVG中找到一個更干凈的解決方案。 我只是想知道如何在沒有SVG的情況下實作這個方案。
。$(function() {
$("#slider-range-custom"/span>).slider({
range: true,
min: 0,
max: 100,
values: [0, 10] 。
創建。function() {
var $self = $（this）。
$(".ui-slider-handle"/span>, this).css({
height: ($self.height() - 4) "px"。
width: "5px"。
top: "1px",
邊框顏色: "black",
margin: 0,
cursor: 'e-resize'。
})
},
slide: function(event, ui) {
var smin = $（'#slider-range-custom'）.attr（'min'）。
var smax = $（'#slider-range-custom'）.attr（'max'）。
var span = $('#slider-range-custom').find('span') 。
var divRect = $(' [class="ui-slider-range ui-corner-all ui-widget-header"]')
if ((event.clientX >= divRect. offset().left 10 & & event. clientX <= divRect.offset（）。 left divRect.width() - 10）) {
if (event.originalEvent) {
event.preventDefault（）。
var prevX = $('#slider-range-custom').attr('prevX') || 0;
$('#slider-range-custom').attr('prevX', event.clientX) 。
if (event.clientX < prevX) {
$('#slider-range-custom').attr('direction', 'left') 。
} else {
$('#slider-range-custom').attr('方向', '右')。
}
return;
} else {
$('#slider-range-custom').attr('direction', 'none') 。
return。
}
} else {
$('#slider-range-custom').attr('direction', 'none') 。
if (! ($(span[0]). hasClass('ui-state-hover') || $(span[1]) 。 hasClass('ui-state-hover'))) {
event.preventDefault（）。
return。
}
}
},
change: function(event, ui) {
$('#slider-range-custom').attr('min', ui.values[0]) 。
$('#slider-range-custom').attr('max', ui.values[1] ）。)
var direction = $('#slider-range-custom').attr('direction')。
if (directory == 'left') {
if (event.originalEvent) {
$(this).slider('values'/span>, [ui. values[0] - 5, ui. values[1] - 5] )
}
} else if （方向=='right'） {
if (event.originalEvent) {
$(this).slider(' values', [ui. values[0] 5, ui. values[1] 5] )
}
}
},
});
});span class="hljs-selector-class">.ui-slider-range {
background: transparent ! important;
;
cursor: move;
}< link rel="styleheet" href="https: //code. jquery.com/ui/1.12.1/themes/base/jquery-ui.css">/span>
<script src="https://code. jquery.com/jquery-1.12.4.js"></script>
<script src="https://code. jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="control-pannel" style="margin: 0 auto;width: 75%;">
< div id="slider-range-custom"/span> min="0" max="10"/span> class="ui-slider-handle" style="height: 100px; 背景:透明。
">
< svg class="chart" width="100%">
<polyline
fill="none"。
stroke="#0074d9"
stroke-width="2"
points="
1,100
20,60
40,80
60,20
80,30
100,75
120,60,
140,33
160,37
180,40
200,45
220,20
240,2
260,10
280,75
300,60
320,45
340,30
360,20
380,10
400,19
420,12
440,45
460,50
480,80"/>
</svg>/span>
</div>/span>
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/319951.html
標籤：
上一篇：當使用jQuerydraggable時，為什么我的div不向四面撲去？
下一篇：用一個小方塊移動一個div