Javascript實現(xiàn)滑塊滑動改變值的實現(xiàn)代碼
更新時間：2013年04月12日 15:08:42 投稿：whsnow
一個功能,值得一說的是本頁面的滑塊實現(xiàn)由于對美工不是很熟悉所以上圖了,感興趣的朋友可以了解下哈
最近做了一個功能，值得一說的是本頁面的滑塊實現(xiàn)。大家都知道現(xiàn)實中的程序員大部分都是對于頁面和美工不是很熟悉。
本人也是，但是本人比較喜歡自己動手來實現(xiàn)。廢話不多說。上圖：
實現(xiàn)結果:
部分js代碼：
復制代碼 代碼如下:
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操作去改變相應的組件渲染
備注：
由于公司網絡不是很理想。回家之后會把所有源碼上傳
相關文章
JavaScript仿淘寶頁面圖片滾動加載及刷新回頂部的方法解析
這篇文章主要介紹了JavaScript仿淘寶頁面圖片滾動加載及刷新回頂部的方法解析,包括懶加載和onbeforeunload等要點的理解,需要的朋友可以參考下2016-05-05
模擬彈出窗口效果，關閉層之前，不能選擇后面的頁內容...2007-02-02
Layui Table js 模擬選中checkbox的例子
今天小編就為大家分享一篇Layui Table js 模擬選中checkbox的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)返回頂部按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
本文主要對Javascript的外部對象進行介紹，列舉了具體實例。便于理解。有需要的朋友可以看下2016-12-12
基于Bootstrap實現(xiàn)的下拉菜單手機端不能選擇菜單項的原因附解決辦法
小編使用bootstrap做的下拉菜單在電腦瀏覽器中可以正常使用，在手機瀏覽器中能彈出下拉列表卻不能選擇列表中的菜單項，怎么回事，如何解決呢？下面小編給大家分享下具體原因及解決辦法，一起看下吧2016-07-07
這篇文章主要為大家詳細介紹了微信小程序用戶信息encryptedData的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
本文主要介紹了webpack之基礎打包優(yōu)化的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下<BR>2022-02-02
JavaScript中的splice主要用來對js中的數組進行操作，包括刪除，添加，替換等。這篇文章主要介紹了JavaScript中的splice方法用法詳解的相關資料,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了JavaScript中的類數組對象介紹,一個對象并不是由Array構造函數所創(chuàng)建的,它依然呈現(xiàn)出數組的行為,在這種情況下,這些對象被稱為“類數組對象”,需要的朋友可以參考下2014-12-12