部分js代码
> 웹 프론트엔드 > JS 튜토리얼 > value_javascript 기술을 변경하기 위해 슬라이더 슬라이딩을 구현하는 Javascript 구현 코드

value_javascript 기술을 변경하기 위해 슬라이더 슬라이딩을 구현하는 Javascript 구현 코드

WBOY
풀어 주다: 2016-05-16 17:37:21
원래의
1170명이 탐색했습니다.

최근에 세금 관련 기능을 만들었고 이 페이지에서 슬라이더 구현을 언급할 가치가 있습니다. 실제로 대부분의 프로그래머는 페이지와 아트에 익숙하지 않다는 것을 누구나 알고 있습니다.

저도 그렇지만 직접 하는 걸 더 좋아해요. 더 이상 말도 안되는 소리는 없습니다. 위:
구현 결과:
value_javascript 기술을 변경하기 위해 슬라이더 슬라이딩을 구현하는 Javascript 구현 코드
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 작업을 사용하여 해당 구성 요소 렌더링을 변경합니다.
비고: 회사 네트워크가 그리 이상적이지 않기 때문입니다. 집에가서 소스코드 다 올려드릴게요
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿