我正在尝试通过在div 中使用javascript 或jQuery、button 来做一个简单的范围/值滑块。这个滑块应该在没有bootstrap 或任何其他pluginor 的情况下完成inbuild functions
我的问题是如何在 div 元素中移动滑块按钮，需要什么 mouse events 才能做到这一点？
注意：这不是幻灯片滑块或图像滑块
【问题讨论】：
标签： javascript jquery html slider mouseevent
看看这个简单的滑块实现。随意使用和修改您喜欢的方式：
document.addEventListener('DOMContentLoaded', function() {
var sliders = document.querySelectorAll('.my-slider');
[].forEach.call(sliders, function(el, i) {
var btn = el.firstElementChild,
span = el.nextElementSibling.querySelector('span'),
isMoving = false;
var move = function(e) {
if (isMoving) {
var min = 0,
max = el.offsetWidth - btn.offsetWidth,
mousePos = (e.pageX - el.offsetLeft - (btn.offsetWidth / 2)),
position = (mousePos > max ? max : mousePos < min ? min : mousePos),
value = Math.floor((position / max) * 100);
btn.style.marginLeft = position + 'px';
btn.value = value;
span.textContent = value;
}
};
el.addEventListener('mousedown', function(e) {
isMoving = true;
move(e);
});
document.addEventListener('mouseup', function(e) {
isMoving = false;
});
document.addEventListener('mousemove', function(e) {
move(e);
});
});
});.my-slider {
width: 250px;
border: 1px solid #999;
border-radius: 3px;
background-color: #ccc;
height: 10px;
line-height: 10px;
}
.my-slider__button {
border: 1px solid #333;
border-radius: 3px;
margin-top: -4px;
width: 18px;
height: 18px;
background-color: #eee;
display: block;
}
div {
margin-top: 6px;
}<div class="my-slider">
<button class="my-slider__button"></button>
</div>
<div>
<strong>Current value: </strong><span></span>
</div>
<div class="my-slider">
<button class="my-slider__button"></button>
</div>
<div>
<strong>Current value: </strong><span></span>
</div>
<div class="my-slider">
<button class="my-slider__button"></button>
</div>
<div>
<strong>Current value: </strong><span></span>
</div>【讨论】：
addEventListener，也不支持 event.pageX，也不支持 Array.prototype.forEach）。如果您需要支持 IE8，则必须获取一些 polyfill 才能使其工作。
您使用拖放事件，其属性设置仅限于其所在的 div。查看此链接Drag Drop Reference Guide，您将看到所需的一切。当你使用可拖拽时，你可以限制移动到水平方向，也可以设置它绑定的元素。这将允许您只从左到右移动，并限制垂直移动，并保持在 div 的边界内。 bootstrap 使用相同的功能来完成它。
这是一个基本示例，展示了一些提到的内容：
$('. draggable').draggable({
axis: 'y',
handle: '.top'
drag: function( event, ui ) {
var distance = ui.originalPosition.top - ui.position.top;
// if dragged towards top
if (distance > 0) {
//then set it to its initial state
$('.draggable').css({top: ui.originalPosition.top + 'px'});
}
}
});
【讨论】：
试试这个：
$('img').mouseenter(function(){ //or you can use hover()
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: "right" };
// Set the duration (default: 400 milliseconds)
var duration = 1000;
$(this).toggle(effect, options, duration);
});
【讨论】：