DIV CSS 佈局教程網

最近做了一個關於稅務的功能，值得一說的是本頁面的滑塊實現。大家都知道現實中的程序員大部分都是對於頁面和美工不是很熟悉。

本人也是，但是本人比較喜歡自己動手來實現。廢話不多說。上圖：
實現結果:
 
部分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操作去改變相應的組件渲染
備注：
由於公司網絡不是很理想。回家之後會把所有源碼上傳