Este artículo describe el método de usar el control deslizante de arrastrar para controlar el tamaño de la imagen. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <
<html>
<Evista>
<meta http-oquiv = content-type content = "text/html; charset = gb2312">
<title> js arrastra el control deslizante para controlar el tamaño de la imagen </title>
<estilo>
*{margen: 0; relleno: 0; tamaño de fuente: 12px;}
.btn {ancho: 50px; altura: 15px; cursor: pointer;}
#PicViewPanel {margen: 5 50 0 50px; Ancho: 328px; Altura: 248px; Overflow: Auto; Text-Align: Center; Border: Solid 1px #CCCCCC;}
#slider {margen: 0 50px; altura: 15px; ancho: 328px; borde: 1px sólido #000000; posición: relativo;}
#SlerLeft {altura: 13px; Ancho: 13px; float: izquierda; borde: 1px sólido #cccccc; cursor: pointer;}
#SliderBlock {Height: 13px; ancho: 50px; borde: 1px sólido #cccccc; posición: absoluto; arriba: 0; izquierda: 113px; cursor: pointer; fondo: #cccccc; text-align: centro;}
#SliderRight {altura: 13px; ancho: 13px; float: right; borde: 1px sólido #cccccc; cursor: pointer;}
</style>
</ablo>
<Body>
<div id = "PicViewPanel"> </div>
<div id = "control deslizante">
<span id = "sliderleft"> <<</span>
<span id = "sliderright" >>>> </span>
<span id = "sliderBlock"> == </span>
</div>
</body>
<script>
// Golbal
var pv = nulo;
var sd = null;
window.onload = function () {
pv = new PicView ("/Images/M01.jpg");
SD = nuevo control deslizante (
función (p) {
document.getElementById ("SliderBlock"). InnerHtml = 2*p + "%";
PV.EXPAND (2*P/100);
},función(){});
}
var picview = function (url, alt) {
this.url = url;
this.obj = nulo;
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 = esto;
o.onmouseDown = function (e) {
var e = window.event || e;
_sx = O.OffSetleft;
_cx = e.clientx -_sx;
document.body.onmousemove = Move;
document.body.onmouseUp = up;
};
Función Move (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;
yo.ing (yo.percent);
}
function up () {
document.body.onmouseMove = function () {};
document.body.onmouseUp = function () {};
}
}
</script>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.