1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <title></title> 4 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 5 <style type="text/css"> 6 .main_div 7 { 8 margin: 20px auto; 9 text-align: center; 10 } 11 .pic_div 12 { 13 position: relative; 14 background-color: pink; 15 border: 1px dotted red; 16 margin: 10px auto; 17 800px; 18 height: 600px; 19 } 20 img 21 { 22 600px; 23 height: 400px; 24 } 25 </style> 26 <script type="text/javascript"> 27 if (!document.getElementsByClassName) { 28 document.getElementsByClassName = function (className, element) { 29 var children = (element || document).getElementsByTagName('*'); 30 var elements = new Array(); 31 for (var i = 0; i < children.length; i++) { 32 var child = children[i]; 33 var classNames = child.className.split(' '); 34 for (var j = 0; j < classNames.length; j++) { 35 if (classNames[j] == className) { 36 elements.push(child); 37 break; 38 } 39 } 40 } 41 return elements; 42 }; 43 } 44 function bigit() { 45 var image = document.getElementsByClassName("pic")[0]; 46 // var image = $("#tt"); 47 image.style.height = image.height * 1.1 + 'px'; 48 image.style.width = image.width * 1.1 + 'px'; 49 } 50 function littleit() { 51 var image = document.getElementsByClassName("pic")[0]; 52 // var image = $("#tt"); 53 image.style.height = image.height / 1.1 + 'px'; 54 image.style.width = image.width / 1.1 + 'px'; 55 } 56 </script> 57 </head> 58 <body> 59 <form id="form1" runat="server"> 60 <div style="" class="main_div"> 61 <p> 62 图片在一个区域里放大缩小</p> 63 <button onclick="bigit()"> 64 图片放大</button> 65 <button onclick="littleit()"> 66 图片缩小</button> 67 <div class="pic_div"> 68 <img src="Image/2.png" class="pic" alt="" id="tt"> 69 </div> 70 </div> 71 </form> 72 </body> 73 </html>