本篇文章只要是對jquery 圖片縮放拖動的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
一、不使用jquery，簡單的縮放： 代碼如下: <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>onMouseWheel</TITLE> <SCRIPT> var count = 10; function Picture() { count = Counting(count); Resize(count); return false; } function Counting(count){ if (event.wheelDelta >= 120) count++; else if (event.wheelDelta <= -120) count--; return count; } function Resize(count){ oImage.style.zoom = count + '0%'; oCounter.innerText = count + '0%'; } </SCRIPT> </HEAD> <BODY> <div align=center> <span style="font-weight:bold">Size = <span id="oCounter" style="color:red;">100%</span></span> <img id="oImage" src="images/aaa.gif" onmousewheel="return Picture();" > </div> </BODY> </HTML> 一、使用jquery，實現縮放和拖動： 代碼如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <style type="text/css"> #imgBox { width: 200px; height: 200px; background: red; overflow: hidden; margin: auto; position: relative; } #imgMain { position: relative; top: -200px; } </style> <script src="js/jquery-1.2.6.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> $(function () { var event; if ($.browser.mozilla) { event = "DOMMouseScroll"; } else { event = "mousewheel"; } $("#divBlock").bind(event, function (e) { var evt = window.event || e; var newWidth; var newHeight; var newLeft; var newTop; var overHeight = $("#divBlock").height(); if (evt.detail > 0 || evt.wheelDelta < 0) { newWidth = $("#imgMain").width() - 20; newHeight = $("#imgMain").height() - 20; newLeft = $("#imgMain").position().left + 10; newTop = $("#imgMain").position().top + 10 - overHeight; } else { newWidth = $("#imgMain").width() + 20; newHeight = $("#imgMain").height() + 20; newLeft = $("#imgMain").position().left - 10; newTop = $("#imgMain").position().top - 10 - overHeight; } $("#imgMain").css({ left: newLeft + "px", top: newTop + "px" }); $("#imgMain").width(newWidth); $("#imgMain").height(newHeight); } ); $("#divBlock").bind("mousedown", function (e) { var xo = e.pageX; var yo = e.pageY; var imgLeft = $("#imgMain").position().left; var imgTop = $("#imgMain").position().top; var overHeight = $("#divBlock").height(); $("#divBlock").bind("mousemove", function (e) { window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); var x = e.pageX; var y = e.pageY; var bX = $("#imgBox").offset().left; var bY = $("#imgBox").offset().top; $("#imgMain").css("left", x - bX - (xo - bX) + imgLeft); $("#imgMain").css("top", y - bY - (yo - bY) - overHeight + imgTop); }); }); $("#divBlock").bind("mouseup mouseout", function () { $("#divBlock").unbind("mousemove"); }); }); </script> </head> <body> <div id="imgBox"> <div style="width: 200px; height: 200px; cursor: pointer; position: relative; left: 0; top: 0; filter: alpha(opacity=0); opacity: 0; -moz-opacity: 0; background: blue; z-index: 999;" id="divBlock"> </div> <img src="test.jpg" width="200" height="200" alt="" id="imgMain" /> </div> </body> </html>