JS to zoom in, zoom out and drag the picture method "compatible ie, Firefox" _javascript Skills

This article describes the JS implementation of zooming, shrinking and dragging pictures. Share to everyone for your reference, specific as follows:

var divID;
var v_left;
var v_top; Window.onload=function () {divid = document.getElementById ("Block1"); var height1 = images1.height;//Image height var width1 = im
ages1.width;//picture 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 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"; o
DragObj.style.left = (nn6 NTX + e.clientx-x: NTX + event.clientx-x) + "px";
return false; }//Drag method function Initdrag (e) {var odraghandle = nn6? e.target:event.srcelement; var topelement = "HTML"; while (OD Raghandle.tagname!= topelement && odraghandle.classname!= "dragable") {Odraghandle = nn6? odraghandle.parentno
De:oDragHandle.parentElement; } if (odraghandle.classname = "D")Ragable ") {Isdrag = true; odragobj = odraghandle; nty = parseint (oDragObj.style.top + 0); y = nn6? e.clienty:event.cli
Enty;
NTX = parseint (oDragObj.style.left + 0); x = nn6?
E.clientx:event.clientx;
Document.onmousemove = Movemouse;
The document.onmouseup=mup;//event will return FALSE when the mouse button is loosened;
} Document.onmousedown = Initdrag;
Document.onmouseup = new Function ("Isdrag=false");  Move the function Clickmove (s) {if (s = = "Up") {dragObj.style.top = parseint (dragObj.style.top) + +} else {if (s = = "Down") {dragObj.style.top = parseint (dragObj.style.top)-+} else {if (s = = "Left") {DragObj.style.left = Parsein
T (dragObj.style.left) + 100;
else {if (s = = ' right ') {DragObj.style.left = parseint (dragObj.style.left)-100;}}} }//Zoom out multiple function smallit () {//Reduce the picture, lose the hotspot height1 = images1.height; width1 = images1.width; images1.height = height1/
1.1;
Images1.width = width1/1.1; }//Magnification function bigit () {/*//will enlarge the picture without losing the hotspot var zoom = parseint (Images1.style.zoom, 10) | | 100;
Zoom + = EVENT.WHEELDELTA/12; if (Zoom > 0) {images1.style.zoom = (zoom+10) + "%";}
* *///enlarge the picture, lose the hot 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; d
Ivid.style.left=v_left;
Divid.style.top=v_top;  function Featsize () {var width1 = images2.width; var height1 = images2.height; var width2 = 360; var height2 = var
h = height1/height2;
var w = width1/width2;  if (Height1 < height2 && Width1 < width2) {images1.height = height1; images1.width = width1;} else {if (h > W) {images1.height = height2; images1.width = Width1 * HEIGHT2/HEIGHT1;} else {images1.width = width2; images1.
Height = height1 * WIDTH2/WIDTH1;
} block1.style.left = 0;
block1.style.top = 0; //mouse wheel zoom in to reduce function bbimg (o) {/*var eleleft; var eletop; if (document.documentelement) {eleleft = Document.docUmentelement.scrollleft;
Eletop = Document.documentElement.scrollTop;
} else{eleleft = document.body.scrollLeft; eletop = Document.body.scrollTop;} v_left+=eleleft;
V_top+=eletop;
Divid.style.left=v_left;
Divid.style.top=v_top; Alert (document.documentElement.scrollTop + "----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;

 }

For more information on JavaScript-related content readers can view the site topics: "JavaScript switching effects and tips summary", "JavaScript animation effects and tips Summary", "JavaScript Search Algorithm Skills summary", " JavaScript data structure and algorithm skills summary, JavaScript traversal algorithm and tips summary, JavaScript JSON operation tips Summary, javascript error and debugging skills summary and JavaScript mathematical calculation of usage summary 》

I hope this article will help you with JavaScript programming.