本文實例講述了JS實現放大、縮小及拖拽圖片的方法。分享給大家供大家參考，具體如下：
var divId;var v_left;var v_top;window.onload=function(){divId = document.getElementById("block1");var height1 = images1.height;//圖片的高度var width1 = images1.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;// 拖拽對象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;}}// 拖拽方法function 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;// 事件會在鼠標按鍵被鬆開時發生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;} else {if (s == "right") {dragObj.style.left = parseInt(dragObj.style.left) - 100;}}}}}//縮小倍數function smallit() {//將圖片縮小，失去熱點height1 = images1.height;width1 = images1.width;images1.height = height1 / 1.1;images1.width = width1 / 1.1;}//放大倍數function bigit() {/*//將圖片放大，不失熱點var zoom = parseInt(images1.style.zoom, 10) || 100;zoom += event.wheelDelta / 12;if (zoom > 0) {images1.style.zoom = (zoom+10) + "%";}*///將圖片放大，失去熱點height1 = images1.height;width1 = images1.width;images1.height = height1 * 1.1;images1.width = width1 * 1.1;}//還原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 width2 = 360;var height2 = 200;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;}//鼠標滾輪放大縮小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;}更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍曆算法與技巧總結》、《JavaScript中json操作技巧總結》、《JavaScript錯誤與調試技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。