Javascript實現(xiàn)滑塊滑動改變值的實現(xiàn)代碼
更新時間：2013年04月12日 15:08:42 投稿：whsnow
一個功能,值得一說的是本頁面的滑塊實現(xiàn)由于對美工不是很熟悉所以上圖了,感興趣的朋友可以了解下哈
最近做了一個功能，值得一說的是本頁面的滑塊實現(xiàn)。大家都知道現(xiàn)實中的程序員大部分都是對于頁面和美工不是很熟悉。
本人也是，但是本人比較喜歡自己動手來實現(xiàn)。廢話不多說。上圖：
實現(xiàn)結(jié)果:
部分js代碼：
復(fù)制代碼 代碼如下:
window.onload = function ()
{
var oWin = document.getElementById("win");
var bDrag = false;
var disX = disY = 0;
oWin.onmousedown = function (event)
{
var event = event || window.event;
bDrag = true;
disX = event.clientX - oWin.offsetLeft;
this.setCapture && this.setCapture();
return false
};
oWin.onmousemove = function (event)
{
if (!bDrag) return;
var event = event || window.event;
var iL = event.clientX - disX;
var maxL = 480;
iL = iL < 0 ? 0 : iL;
iL = iL > maxL ? maxL : iL;
oWin.style.marginTop = oWin.style.marginLeft = 0;
oWin.style.left = iL + "px"; //滑塊距離左邊的位置
document.getElementById("hkline").style.width = iL; //滑塊左邊綠色條目的寬度
return false
};
document.onmouseup = window.onblur = oWin.onlosecapture = function ()
{
bDrag = false;
oWin.releaseCapture && oWin.releaseCapture();
};
};
說明：
1、主要用的onmousedown和onmousemove 記錄了拖動之后的位置。然后通過dom操作去改變相應(yīng)的組件渲染
備注：
由于公司網(wǎng)絡(luò)不是很理想。回家之后會把所有源碼上傳
相關(guān)文章
使用Github?Actions發(fā)布npm包完整過程詳解
本文包含本地發(fā)布npm包發(fā)布流程,?和?github?action自動發(fā)布npm包流程,幫助你更好的發(fā)布自己或公司的npm包,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
當(dāng)用戶勾選顯示明文復(fù)選框時，要以明文顯示用戶輸入的密碼，去掉勾選時要變回密文，問題是ie8中是不允許修改input的type屬性2014-09-09
有些小伙伴可能會問caller,callee 是什么?在javascript 中有什么樣的作用?那么本篇會對于此做一些基本介紹。希望能夠?qū)Υ蠹依斫鈐avascript中的callee與caller有所幫助。2015-08-08
這篇文章主要介紹了如何理解JavaScript中的對象，幫助大家更好的學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-08-08
這篇文章主要介紹了讓JavaScript代碼更加精簡的方法技巧,文章通過使用?JavaScript對象解構(gòu)來節(jié)省代碼，JavaScript?對象解構(gòu)賦值在項目開發(fā)中是一個常用的技能。下文實現(xiàn)過程需要的小伙伴可以參考一下2022-06-06
這篇文章主要為大家詳細(xì)介紹了JS調(diào)用安卓手機攝像頭掃描二維碼，并用JS解析二維碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要介紹了javascript中的糖衣語法Promise對象詳解,Promise 對象代表了未來將要發(fā)生的事件，用來傳遞異步操作的消息，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
原型和原型鏈?zhǔn)莏s中的難點也是重點,明白了原型和原型鏈會讓我們在后面不管是學(xué)習(xí)還是工作都會更加高效,這篇文章主要給大家介紹了關(guān)于JavaScript原型與原型鏈的相關(guān)資料,需要的朋友可以參考下2021-10-10
js實現(xiàn)瀏覽器的各種菜單命令比如打印、查看源文件等等
瀏覽器的各種菜單命令比如打印、查看源文件、加入收藏等等，這些在js中時完全可以實現(xiàn)的，本文搜集整理了一些，感興趣的朋友可以參考下2013-10-10
這篇文章主要為大家詳細(xì)介紹了BootStrap modal實現(xiàn)拖拽功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12