[英]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
創建一些 polyfill,這個自定義范圍滑塊就可以安全使用:
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>
演示: http : //jsbin.com/dulifezi/2/edit
我在這里為這個片段創建一個 repo → https://github.com/taufik-nurrohman/range-slider
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.