部分js代码
首頁 > web前端 > js教程 > Javascript實作滑桿滑動改變值的實作程式碼_javascript技巧

Javascript實作滑桿滑動改變值的實作程式碼_javascript技巧

WBOY
發布: 2016-05-16 17:37:21
原創
1164 人瀏覽過

最近做了一個關於稅務的功能,值得一說的是本頁面的滑桿實作。大家都知道現實中的程式設計師大部分都是對頁面和美工不是很熟悉。

本人也是,但是本人比較喜歡自己動手來實現。廢話不多說。上圖:
實現結果:
Javascript實作滑桿滑動改變值的實作程式碼_javascript技巧 
部分js代碼

複製代碼 程式碼如下:

window.onload = function ()
{
var oWin = document.getElementById("win");
var bDDrag = fragseD3D3D;
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 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操作去改變對應的元件渲染
備註:
由於公司網路不是很理想。回家之後會把所有原始碼上傳
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板