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 width: 800px;
18 height: 600px;
19 }
20 img
21 {
22 width: 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>
