Este artículo describe el método de ampliar, reducir y arrastrar imágenes por JS. Compártelo para su referencia, como sigue:
var divid; var v_left; var v_top; window.onload = function () {divid = document.getElementById ("block1"); var hight1 = images1.height; // La altura de la imagen var width1 = images1.width; // el ancho del ancho del ancho del ancho v_left = (document.body.clientwidth-width1)/2; v_top = (document.body.clientHeight-hight1) /2;dividiv.style.left=v_left ;divid.style.top=v_top;} drag = 0; Move = 0;//Drag Object var ie = document.all; var nn6 = document.getelementBy isdrag = false;var y, x;var oDragObj;function moveMouse(e) {if (isdrag) {oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px";oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "Px"; return false;}} // Drag Method Función InitDrag (e) {var odragHandle = nn6? E.Target: Event.SrCelement; var topelement = "html"; while (odraghandle.tagname! = topelement && odraghandle.classname! = "dragable") {odraghandle = nn6? odraghandle.parentnode: odraghandle.parentelement;} if (odraghandle.classname == "dragable") {isDrag = true; odragobj = odraghandle; nty = parseInt (odragobj.style.top + 0); y = nn6? E.Clienty: Event.clienty; ntx = parseInt (odragobj.style.left + 0); x = nn6? e.clientx: event.clientx; document.onmouseMove = movemouse; // document.onmouseUp = mup; // El evento sucederá cuando se libera el botón del mouse;}} document.onmousedown = initDrag; document.OnMouseUp = new Function ("isDrag = false"); // mude clickMove (s) {if (s = s = s = s = s == "up") {up ") parseInt (dragobj.style.top) + 100;} else {if (s == "down") {dragobj.style.top = parseInt (dragobj.style.top) - 100;} else {if (s == "izquierda") {dragobj.style.let = parseInt (parseInt (dragoBj.style.left) + 100;} el más {dragobj.style.left = parseInt (dragobj.style.left) - 100;}}}}}} // encoge múltiples funciones smallit () {// shrink image, pierde hot spot heart1 = images1.height; width1 = images1.width; images1.height = tight1/1.1; imágenes1.width = width1/1.1 /1; bigit () {/*// Zoom la imagen, sin perder el punto caliente var zoom = parseInt (imágenes1.style.zoom, 10) || 100; zoom += event.wheeldelta/ 12; if (zoom> 0) {images1.style.zoom = (zoom +10) +"%";} * /// zoom en y pierde hotspot hight1 = images1.height; width1 = images1.width; images1.height = altura1 * 1.1; imágenes1.width = width1 * 1.1;} RealSize () {imágenes1.style.zoom = 100+"%"; images1.height = images2.height; images1.width = images2.width; divid.style.left = v_left; divid.style.top = v_top;} function freeSize () {var width1 = images2.width; var altura = 200; var h = Height1 / Height2; var w = width1 / width2; if (tight1 <height2 && width1 <width2) {images1.height = height1; images1.width = width1;} else {if (h> w) {images1.Height = width2; images1.height = tight1 * width2/width1;}} block1.style.left = 0; block1.style.top = 0;} // La rueda de ratón zoom y la función bbimg (o) {/ * var eleleft; var eletop; if (document.documentelement) {eleLEft = Docum.Documentelementementementementement; document.documentelement.scrolltop;} else {eleleft = document.body.scrollleft; eletop = document.body.scrolltop;} v_left+= elelft; v_top+= eletop; // divid.style.left = v_left; //style.top = v_top; +"----- xxx"+document.body.scrolltop+window.pageyoffset);*/var zoom = parseInt (o.style.zoom, 10) || 100; zoom + = event.wheeldelta / 12; if (zoom> 0) {o.style.zoom = zoom + "%";} return false;}Para obtener más información sobre el contenido relacionado con JavaScript, consulte los temas de este sitio: "JavaScript cambiando efectos especiales y resumen de técnicas", "JavaScript Animation Efectos especiales y técnicas de técnicas Resumen", "Resumen de habilidades de algoritmo de búsqueda de JavaScript", "Summario de la Operación de Habilidades JavaScript de Javascript" ",", ",", ",", algoritmo de las habilidades de javascripción de JavaScript y técnicas, "", "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "", "", "", "", "", "", Resumen "," Resumen de habilidades de errores y depuración de JavaScript "y" JavaScript Mathematical Operation Usage Resumen "
Espero que este artículo sea útil para la programación de JavaScript de todos.