Este artigo descreve o método de usar deslizamento de arrasto para controlar o tamanho da imagem. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <!
<html>
<head>
<meta http-equiv = content-type content = "text/html; charset = gb2312">
<title> JS arrastar deslizante para controlar o tamanho da imagem </title>
<estilo>
*{margem: 0; preenchimento: 0; tamanho da fonte: 12px;}
.btn {width: 50px; altura: 15px; cursor: ponteiro;}
#picViewPanel {margem: 5 50 0 50px; Largura: 328px; Altura: 248px; Overflow: Auto; Text-Align: Center; Border: Solid 1PX #CCCCC;}
#slider {margem: 0 50px; altura: 15px; largura: 328px; borda: 1px Solid #000000; posição: relativa;}
#sliderleft {altura: 13px; Largura: 13px; Float: esquerda; borda: 1px sólido #cccccc; cursor: ponteiro;}
#sliderblock {altura: 13px; largura: 50px; borda: 1px sólido #cccccc; posição: absoluto; topo: 0; esquerda: 113px; cursor: ponteiro; fundo: #ccccc; text-align: Center;}
#sliderRright {altura: 13px; largura: 13px; float: direita; borda: 1px sólido #cccccc; cursor: ponteiro;}
</style>
</head>
<Body>
<div id = "picViewPanel"> </div>
<div id = "slider">
<span id = "sliderleft"> <<</span>
<span id = "sliderRright" >>>> </span>
<span id = "sliderblock"> == </span>
</div>
</body>
<Cript>
// Golbal
var pv = nulo;
var sd = nulo;
window.onload = function () {
PV = new PicView ("/imagens/m01.jpg");
sd = novo slider (
função (p) {
Document.getElementById ("Sliderblock"). Innerhtml = 2*p + "%";
pv.expand (2*p/100);
},função(){});
}
var PicView = função (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"). ApndendChild (_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 = this;
O.onMousedown = function (e) {
var e = window.event || e;
_sx = O.OffSetLeft;
_cx = e.clientx -_sx;
document.body.onMousEmove = move;
document.body.onMouseUp = UP;
};
função 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;
me.ing (me.centcent);
}
function up () {
document.body.onMouSEMove = function () {};
document.body.onMouseUp = function () {};
}
}
</script>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.