В этой статье описывается метод использования ползунка перетаскивания для управления размером изображения. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Скопируйте код следующим образом: <! Doctype html public "-// w3c // dtd html 4.0 transitional // en">
<html>
<голова>
<meta http-equiv = content-type content = "text/html; charset = gb2312">
<Title> JS Drag Slider для управления размером изображения </title>
<style>
*{Margin: 0; Padding: 0; Font-Size: 12px;}
.btn {ширина: 50px; высота: 15px; cursor: pointer;}
#picviewpanel {margin: 5 50 0 50px; Ширина: 328px; Высота: 248px; переполнение: Auto; Text-Align: Center; граница: твердый 1PX #CCCCC;}
#slider {рентабель: 0 50px; высота: 15px; ширина: 328px; граница: 1px sold #000000; положение: относительно;}
#SliderLeft {высота: 13px; Ширина: 13px; float: слева; граница: 1px sold #cccccc; cursor: pointer;}
#sliderblock {height: 13px; ширина: 50px; граница: 1px solid #ccccccc; положение: абсолют; вершина: 0; слева: 113px; cursor: pointer; founal: #ccccc; text-align: center;}
#SliderRight {высота: 13px; ширина: 13px; float: right; граница: 1px solid #ccccc; cursor: pointer;}
</style>
</head>
<тело>
<div id = "picviewpanel"> </div>
<div id = "слайдер">
<span id = "sliderleft"> <<</span>
<span id = "sliderright" >>>> </span>
<span id = "sliderblock"> == </span>
</div>
</body>
<Скрипт>
// Гольбал
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);
}, function () {});
}
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 = move;
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 () {};
}
}
</script>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.