Js achieves image amplification and drag-and-drop special effect code sharing, and js special effect code

Js achieves image amplification and drag-and-drop special effect code sharing, and js special effect code

This example describes how to use JavaScript to zoom in images and drag and drop special effects. Share it with you for your reference. The details are as follows:
Js achieves image amplification and drag-and-drop effects. This is a very practical js effect. It enables image enlargement and drag-and-drop. It is implemented using native javascript instead of jquery plug-ins, in addition to clicking the zoom in or zoom out button, you can also use the scroll wheel of the mouse to zoom in or out the image.
Run: ---------------------- view the effect source code download -----------------------

TIPS: If the browser cannot run properly, you can try to switch the browsing mode.
The javascript code for image enlargement and drag-and-drop effects is as follows:

<! DOCTYPE html> 
The core code is as follows:

Function onWheelZoom (obj) {// scroll wheel zoom = parseFloat (obj. style. zoom); tZoom = zoom + (event. wheelDelta> 0? 0.05:-0.05); if (tZoom <0.1) return true; obj. style. zoom = tZoom; return false ;}
Key js Code:

Drag = 0 move = 0var 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 ;}} 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; return false ;}} document. onmousedown = initDrag; document. onmouseup = new Function ("isdrag = false"); 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;} e Lse if (s = "right") {dragObj. style. left = parseInt (dragObj. style. left)-100 ;}} function smallit () {var height1 = images1.height; var width1 = images1.width; images1.height = height1/1.2; images1.width = width1/1.2;} function bigit () {var height1 = images1.height; var width1 = images1.width; images1.height = height1 * 1.2; images1.width = width1 * 1.2;} function realsize () {images1.height = images2.height; images1.wid Th = images2.width; block1.style. left = 0; block1.style. top = 0 ;}function featsize () {var width1 = images2.width; var height1 = images2.height; var wid2= 701; var height2 = 576; var h = height1/height2; var w = width1/wid22. if (height1 
The above is the JavaScript code shared for you to enlarge images and drag special effects. I hope you will like it.