최근에 세금 관련 기능을 만들었고 이 페이지에서 슬라이더 구현을 언급할 가치가 있습니다. 실제로 대부분의 프로그래머는 페이지와 아트에 익숙하지 않다는 것을 누구나 알고 있습니다.
저도 그렇지만 직접 하는 걸 더 좋아해요. 더 이상 말도 안되는 소리는 없습니다. 위:
구현 결과:
js 코드의 일부:
window.onload = function ()
{
var oWin = document.getElementById("win")
var bDrag = false;
var disX = disY = 0;
oWin.onmousedown = 함수(이벤트)
{
var event = event || window.event
disX = event.clientX - oWin.offsetLeft;
this.setCapture && this.setCapture();
return false
}
oWin.onmousemove = 함수(이벤트)
if (!bDrag) return;
var event = event || window.event;
var iL = event.clientX - disX
var maxL = 480; ; 0 ? 0 : iL; iL > maxL : iL;
oWin.style.marginLeft = 0
oWin.style.left "; // 왼쪽에서부터 슬라이더의 위치
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 작업을 사용하여 해당 구성 요소 렌더링을 변경합니다.
비고:
회사 네트워크가 그리 이상적이지 않기 때문입니다. 집에가서 소스코드 다 올려드릴게요