슬라이더를 드래그하여 이미지 크기를 제어하는 방법

저자：Eve Cole 업데이트 시간：2025-06-09 05:32:02

이 기사에서는 Drag Slider를 사용하여 이미지의 크기를 제어하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.

다음과 같이 코드를 복사하십시오. <! doctype html public "-// w3c // dtd html 4.0 Transitional // en">

<html>

<헤드>

<title> js 슬라이더를 드래그하여 그림 크기를 제어합니다 </title>

<스타일>

*{마진 : 0; 패딩 : 0; font-size : 12px;}

.btn {너비 : 50px; 높이 : 15px; 커서 : 포인터;}

#picviewpanel {마진 : 5 50 0 50px; 너비 : 328px; 높이 : 248px; 오버플로 : 자동; 텍스트-정렬 : 중심; 테두리 : solid 1px #cccccc;}

#slider {마진 : 0 50px; 높이 : 15px; 너비 : 328px; 테두리 : 1px 솔리드 #000000; 위치 : 상대;}

#sliderleft {높이 : 13px; 폭

#SliderBlock {높이 : 13px; 너비 : 50px; 테두리 : 1px Solid #CCCCCC; 위치 : 절대; 상단 : 0; 왼쪽 : 113px; 커서 : 포인터; 배경 : #CCCCCC; 텍스트-알림 : 중심;}

#sliderright {높이 : 13px; 너비 : 13px; float : 오른쪽; 테두리 : 1px solid #cccccc; 커서 : 포인터;}

</스타일>

</head>

<body>

</div>

</body>

<cript>

// Golbal

var pv = null;

var sd = null;

Window.onload = function () {

pv = new picview ( "/images/m01.jpg");

SD = 새로운 슬라이더 (

함수 (p) {

document.getElementById ( "sliderBlock"). innerHtml = 2*p + "%";

pv.expand (2*p/100);

},기능(){});

}

var picview = function (url, alt) {

this.url = url;

this.obj = null;

this.alt alt? alt : "";

this.realwidth = null;

this.realheight = null;

this.zoom = 1;

this.init ();

}

picview.prototype.init = function () {

var _img = document.createElement ( "IMG");

_img.src = this.url;

_img.alt = this.alt;

_img.style.zoom = this.zoom;

document.getElementById ( "picviewpanel"). AppendChild (_img);

this.obj = _img;

this.realwidth = _img.offsetWidth;

this.realheight = _img.offsetheight;

}

picview.prototype.rebind = function () {

this.obj.style.width = this.realwidth*this.zoom+"px";

this.obj.style.height = this.realHeight*this.zoom+"px";

//this.obj.style.zoom = this.zoom;

}

picview.prototype.expand = function (n) {

this.zoom = n;

this.rebind ();

}

var slider = function (ing, ed) {

this.block = document.getElementById ( "SliderBlock");

this.percent = 0;

this.value = 0;

this.ing = ing;

this.ed = ed;

this.init ();

}

slider.prototype.init = function () {

var _sx = 0;

var _cx = 0;

var o = this.block;

var me = 이것;

o.onmousedown = function (e) {

var e = Window.event || e;

_SX = O.OffSetLeft;

_cx = e.clientx-_sx;

document.body.onmouseMove = 이동;

document.body.onmouseup = up;

};

기능 이동 (e) {

var e = Window.event || e;

var pos_x = e.clientx- _cx;

pos_x = pos_x <13? 13 : pos_x;

pos_x = pos_x> 248+15-50? 248+15-50 : pos_x;

o.style.left = pos_x+"px";

me.percent = (pos_x-13)/2;

Me.ing (Me.Percent);

}

함수 업 () {

document.body.onmouseMove = function () {};

document.body.onmouseup = function () {};

}

</스크립트>

</html>

이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.

슬라이더를 드래그하여 이미지 크기를 제어하는 ​​방법

슬라이더를 드래그하여 이미지 크기를 제어하는 방법