简单的纯Javascript拖动控制器滑块
Simple pure Javascript drag controller slider
欢迎全世界的开发者。
我想有一些简单的帮助,纯Javascript (30行), JQuery免费(和其他库的)拖动控制滑块。
我已经搜索了几个月,发现了许多脚本,但我不喜欢-Jquery,因为大多数脚本需要4,5,6个javascript包括…我喜欢更小和基本的脚本。我喜欢按我想要的方式调整它们,我也可以从较小的脚本中学到很多东西。
所有我需要的是一个简单的滑块,我可以使用:缩放图像,滚动页面,改变亮度的图像(与PHP)等。
我是新的javascript (2个月),这就是我现在得到的。
<script type="text/javascript">
_item = null;
mouse_x = 0;
drag_x = 0;
function move_init() {
document.onmousemove = _move;
document.onmouseup = _stop;
}
function _stop(){
_item = null;
}
function _move(e){
mouse_x = document.all ? window.event.clientX : e.pageX;
if(_item != null){
_item.style.left = (mouse_x - drag_x) + "px";
}
}
function _move_item(drag)
{
_item = drag;
drag_x = mouse_x - _item.offsetLeft;
}
move_init();
drag.onmousedown=_move_item(); // Agh.. did'nt figure out how this works
</script>
<style type="text/css">
#drag{background:#797979;color:#fff;width:30px;height:15px;position:relative;}
#track{background:red; width:200px;}
</style>
<div id="track"><div id="drag" onmousedown="_move_item(this);" >x</div></div>
我很感激你的帮助。我在2012年12月31日写了这篇文章。所以新年快乐。请对彼此好。
谢谢。
此代码适用于现代浏览器。只要为addEventListener
创建一些填充,这个自定义范围滑块就可以安全使用了:
function rangeSlider(id, onDrag) {
var range = document.getElementById(id),
dragger = range.children[0],
draggerWidth = 10, // width of your dragger
down = false,
rangeWidth, rangeLeft;
dragger.style.width = draggerWidth + 'px';
dragger.style.left = -draggerWidth + 'px';
dragger.style.marginLeft = (draggerWidth / 2) + 'px';
range.addEventListener("mousedown", function(e) {
rangeWidth = this.offsetWidth;
rangeLeft = this.offsetLeft;
down = true;
updateDragger(e);
return false;
});
document.addEventListener("mousemove", function(e) {
updateDragger(e);
});
document.addEventListener("mouseup", function() {
down = false;
});
function updateDragger(e) {
if (down && e.pageX >= rangeLeft && e.pageX <= (rangeLeft + rangeWidth)) {
dragger.style.left = e.pageX - rangeLeft - draggerWidth + 'px';
if (typeof onDrag == "function") onDrag(Math.round(((e.pageX - rangeLeft) / rangeWidth) * 100));
}
}
}
<style>
.range-slider {
width:300px;
height:20px;
margin:0 auto 1em;
position:relative;
cursor:e-resize;
}
.range-slider:before {
content:"";
display:block;
position:absolute;
top:9px;
left:0;
width:100%;
height:2px;
background-color:black;
}
.range-slider span {
display:block;
height:inherit;
position:relative;
z-index:2;
background-color:red;
cursor:inherit;
}
</style>
<div class="range-slider" id="range-slider-1">
<span></span>
</div>
<script>
rangeSlider('range-slider-1', function(value) {
document.getElementById('test-area').innerHTML = value + '%';
});
</script>
演示:
<style>
.range-slider {
width:300px;
height:20px;
margin:0 auto 1em;
position:relative;
cursor:e-resize;
}
.range-slider:before {
content:"";
display:block;
position:absolute;
top:9px;
left:0;
width:100%;
height:2px;
background-color:black;
}
.range-slider span {
display:block;
height:inherit;
position:relative;
z-index:2;
background-color:red;
cursor:inherit;
}
</style>
<div class="range-slider" id="range-slider-1">
<span></span>
</div>
<script>
rangeSlider('range-slider-1', function(value) {
document.getElementById('test-area').innerHTML = value + '%';
});
</script>
http://jsbin.com/dulifezi/2/edit
更新
我在这里为这个片段创建一个repo→https://github.com/taufik-nurrohman/range-slider
看一下DragDealer.js:https://skidding.github.io/dragdealer/
这里有一个基于滑动条的值来改变图像不透明度的例子。
希望这对你有帮助!
相关文章:
- 调整窗口大小时,可拖动的对象会出现在容器外部
- 删除对HTML元素的拖动
- jQuery UI可排序-多连接列表拖动
- 禁用SVG拖动
- 旋转后拖动对象
- JQuery UI可拖动潜水与滚动棒到鼠标
- jsPlumb-拖动克隆而不进行复制
- 当我在节点上拖动鼠标时,我如何防止使用d3.ehavior.zoom().on(“缩放”,重绘)
- 如何使元素在可拖动元素内可单击
- 如何在使用Kinetic拖动同一对象后,在旋转动画中保持先前的偏移
- 在d3中拖动一条线
- 使元素在iframe中可拖动
- 通过拖动可以更改三维模型对象在Three.js场景中的位置
- 如何使所有绘制的(矩形、圆形、直线、多边形)都可拖动?纯JS
- 拖动开始时更改可拖动元素的大小
- 如何正确拖动jqgrid编辑表单
- 交互.js拖动的项目移动到顶部
- 拖动&删除Fullcalendar.io资源-更新视图
- 如何在侦听器之后添加可拖动功能
- 简单的纯Javascript拖动控制器滑块