JS: How to zoom in, zoom out, and drag and drop images [compatible with IE and Firefox], and js drag and drop

JS: How to zoom in, zoom out, and drag and drop images [compatible with IE and Firefox], and js drag and drop

This document describes how to zoom in, zoom out, and drag images in JavaScript. We will share this with you for your reference. The details are as follows:

Var divId; var v_left; var v_top; window. onload = function () {divId = document. getElementById ("block1"); var height1 = images1.height; // The Image Height var width1 = images1.width; // The Image Width v_left = (document. body. clientWidth-width1)/2; v_top = (document. body. clientHeight-height1)/2; divId. style. left = v_left; divId. style. top = v_top;} drag = 0; move = 0; // drag the object var ie = document. all; var nn6 = document. getElementById &&! Document. all; var 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 the function initDrag (e) {var oDragHandle = nn6? E.tar get: 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; // The event will return false when the mouse button is released;} document. onmousedown = initDrag; document. onmouseup = new Function ("isdrag = false"); // move the function clickMove (s) {if (s = "up") {dragObj. style. top = parseInt (dragObj. style. top) + 100;} else {if (s = "down") {dragObj. style. top = parseInt (dragObj. style. top)-100;} else {if (s = "left") {dragObj. style. left = parseInt (dragObj. style. left) + 100;} else {if (s = "right") {dragObj. style. left = parseInt (dragObj. style. left)-100 ;}}}/// function smalmultiple () {// scale down the image and lose the hotspot height1 = images1.height; width1 = images1.width; images1.height = height1/1.1; images1.width = width1/1.1;} // function bigit () {/* // enlarge the image without losing the hotspot var zoom = parseInt (images1.style. zoom, 10) | 100; zoom + = event. wheelDelta/12; if (zoom> 0) {images1.style. zoom = (zoom + 10) + "%";} * // zoom in the image to lose the hotspot height1 = images1.height; width1 = images1.width; images1.height = height1 * 1.1; images1.width = width1 * 1.1;} // restore function realsize () {images1.style. zoom = 100 + "%"; images1.height = images2.height; images1.width = images2.width; divId. style. left = v_left; divId. style. top = v_top;} function featsize () {var width1 = images2.width; var height1 = images2.height; var wid2= 360; var height2 = 200; var h = height1/height2; var w = width1/wid22. if (height1