本文实例讲述了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程序设计有所帮助。