![](/img/trans.png)
[英]Update Input field value with value from a range slider using javascript
[英]Simple range /value Slider in JavaScript
我正在尝试使用javascript
或jQuery
做一个简单的范围/值滑块, div
一个button
。此滑块应在没有bootstrap
或任何其他plugin
或inbuild functions
我的问题是如何在div元素内移动滑块按钮,以及需要执行哪些mouse events
?
注意:这不是幻灯片显示滑块或图像滑块
看一下这个简单的滑块实现。 随意使用和修改您喜欢的方式:
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>
您可以使用拖放事件,其属性设置仅限于其所在的div。 查看此链接拖放参考指南 ,您将看到所需的一切。 使用可拖动和可拖放时,可以将移动限制为水平,也可以设置绑定到的元素。 这样一来,您只能左右移动,限制垂直移动,并保持div的边界。 引导程序使用相同的功能来完成任务。
这是一个基本示例,显示了其中提到的一些内容:
$('. 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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.