html 图片在一个div中放大缩小效果 

 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>&nbsp;&nbsp;
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>

 

posted @ 2018-11-18 11:22  每天进步多一点  阅读(6474)  评论(0)    收藏  举报