图片缩放+拖动（html）

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowImg.aspx.cs" Inherits="ShowImg" %>
  2 
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4 <html xmlns="http://www.w3.org/1999/xhtml">
  5 <head runat="server">
  6     <title></title>
  7     <style>
  8         *
  9         {
 10             margin: 0;
 11             padding: 0;
 12         }
 13         body
 14         {
 15             background: #333;
 16         }
 17         
 18         #imgContainer
 19         {
 20             width: 100%;
 21             height: 100%;
 22         }
 23         .positionButtonDiv
 24         {
 25             position: absolute;
 26             height: 100%;
 27             width: 50px;
 28             z-index: 100000;
 29         }
 30         
 31         
 32         .positionMapClass area
 33         {
 34             cursor: pointer;
 35         }
 36     </style>
 37 </head>
 38 <body>
 39     <form id="form1" runat="server">
 40     <f:PageManager ID="PageManager1" AutoSizePanelID="RegionPanel1" runat="server" />
 41     <f:Panel ID="RegionPanel1" runat="server" ShowBorder="false" ShowHeader="false">
 42         <Content>
 43             <a id="btnLeft" href="javascript:void(0);" onclick="__doPostBack('', 'img:left');">
 44                 <div id="divBtnLeft" class="positionButtonDiv" style="left: 10px; text-align: center">
 45                     <img alt="上一张" id="imgLeft" width="50px" src="res/zoom/images/left.png" />
 46                 </div>
 47             </a><a id="btnRight" href="javascript:void(0);" onclick="__doPostBack('', 'img:right');">
 48                 <div id="divBtnRight" class="positionButtonDiv" style="right: 10px">
 49                     <img alt="下一张" id="imgright" width="50px" src="res/zoom/images/right.png" />
 50                 </div>
 51             </a>
 52             <div style="width: 100%">
 53                 <div id="imgContainer" style="text-align: center; vertical-align: middle; position: relative;
 54                     width: 100%; height: 100%">
 55                     <img src="res/zoom/images/1.jpg" id="imageFullScreen" style="position: absolute;
 56                         z-index: 10000; cursor: pointer;" onmousedown="mouseDown(this,event)" onmousemove="mouseMove(event)"
 57                         ondragstart="mouseStop()" onmouseup="mouseUp(event)" />
 58                 </div>
 59             </div>
 60             <script src="res/js/jquery.min.js" type="text/javascript"></script>
 61             <script>
 62                 function SetImg(imgurl, imgwidth, imgheight) {
 63                     var height = document.body.clientHeight;
 64                     var width = document.body.clientWidth;
 65                     var img = document.getElementById("imageFullScreen");
 66                     img.src = imgurl;
 67                     if (imgwidth >= width && imgheight >= height) {
 68                         if ((imgwidth - width) > (imgheight - height)) {
 69                             imgheight = ((width - 10) / imgwidth) * imgheight;
 70                             imgwidth = width - 10;
 71                         }
 72                         else {
 73                             imgwidth = ((height - 10) / imgheight) * imgwidth;
 74                             imgheight = height - 10;
 75                         }
 76                     }
 77                     else if (imgwidth >= width) {
 78                         imgheight = ((width - 10) / imgwidth) * imgheight;
 79                         imgwidth = width - 10;
 80                     }
 81                     else if (imgheight >= height) {
 82                         imgwidth = ((height - 10) / imgheight) * imgwidth;
 83                         imgheight = height - 10;
 84                     }
 85 
 86                     img.style.width = imgwidth + 'px';
 87                     img.style.height = imgheight + 'px';
 88                     img.style.top = ((height - imgheight) / 2) + 'px';
 89                     img.style.left = ((width - imgwidth) / 2) + 'px';
 90 
 91                     var heightindex = (height - 50) / 2;
 92                     document.getElementById("imgLeft").style.marginTop = heightindex + 'px';
 93                     document.getElementById("imgright").style.marginTop = heightindex + 'px';
 94                     // alert(img.style.zoom);
 95                 }
 96 
 97                 function SetLeftRight(value) {
 98                     document.getElementById("btnLeft").style.display = value;
 99                     document.getElementById("btnRight").style.display = value;
100                 }              
101             </script>
102             <script language="javascript">
103                 var mouseX, mouseY;
104                 var objX, objY;
105                 var isDowm = false; //是否按下鼠标
106                 var imgEle = document.getElementById("imageFullScreen");
107                 function mouseDown(obj, e) {
108                     obj.style.cursor = "move";
109                     objX = imgEle.style.left;
110                     objY = imgEle.style.top;
111                     mouseX = e.clientX;
112                     mouseY = e.clientY;
113                     isDowm = true;
114                 }
115 
116                 function mouseMove(e) {
117 
118                     var x = e.clientX;
119                     var y = e.clientY;
120                     if (isDowm) {
121                         imgEle.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";
122                         imgEle.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px";
123                     }
124                 }
125 
126                 function mouseUp(e) {
127                     if (isDowm) {
128                         var x = e.clientX;
129                         var y = e.clientY;
130 
131                         imgEle.style.left = (parseInt(x) - parseInt(mouseX) + parseInt(objX)) + "px";
132                         imgEle.style.top = (parseInt(y) - parseInt(mouseY) + parseInt(objY)) + "px";
133 
134                         mouseX = x;
135                         rewmouseY = y;
136                         imgEle.style.cursor = "default";
137                         isDowm = false;
138                     }
139                 }
140 
141                 function mouseStop() {
142                     window.event.returnValue = false;
143                 }
144             </script>
145             <script type="text/javascript">
146                 LoadPage();
147                 function fnWheel(obj, fncc) {
148                     obj.onmousewheel = fn;
149                     if (obj.addEventListener) {
150                         obj.addEventListener('DOMMouseScroll', fn, false);
151                     }
152 
153                     function fn(ev) {
154                         var oEvent = ev || window.event;
155                         var down = true;
156 
157                         if (oEvent.detail) {
158                             down = oEvent.detail > 0
159                         }
160                         else {
161                             down = oEvent.wheelDelta < 0
162                         }
163 
164                         if (fncc) {
165                             fncc.call(this, down, oEvent);
166                         }
167 
168                         if (oEvent.preventDefault) {
169                             oEvent.preventDefault();
170                         }
171 
172                         return false;
173                     }
174                 }
175 
176                 function LoadPage() {
177                     var oImg = document.getElementById("imageFullScreen");
178 
179                     fnWheel(oImg, function (down, oEvent) {
180 
181                         var oldWidth = this.offsetWidth;
182                         var oldHeight = this.offsetHeight;
183                         var oldLeft = this.offsetLeft;
184                         var oldTop = this.offsetTop;
185 
186                         var scaleX = (oEvent.clientX - oldLeft) / oldWidth; //比例
187                         var scaleY = (oEvent.clientY - oldTop) / oldHeight;
188 
189                         if (down) {
190                             this.style.width = this.offsetWidth * 0.9 + "px";
191                             this.style.height = this.offsetHeight * 0.9 + "px";
192                         }
193                         else {
194                             this.style.width = this.offsetWidth * 1.1 + "px";
195                             this.style.height = this.offsetHeight * 1.1 + "px";
196                         }
197 
198                         var newWidth = this.offsetWidth;
199                         var newHeight = this.offsetHeight;
200 
201                         this.style.left = oldLeft - scaleX * (newWidth - oldWidth) + "px";
202                         this.style.top = oldTop - scaleY * (newHeight - oldHeight) + "px";
203                     });
204                 }    
205             </script>
206             <!--代码部分end-->
207         </Content>
208     </f:Panel>
209     </form>
210 </body>
211 </html>
其中的一些代码是其他控件的，不用理会，直接看<img>标签和js就ok了
posted @ 2015-11-30 12:04 冰封一夏阅读(1008) 评论(0) 编辑收藏举报
刷新页面返回顶部
冰封一夏

图片缩放+拖动（html）

公告
