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