图片缩放+拖动（html）
图片缩放+拖动（html）
冰封一夏
发布于 2019-09-11 15:29:16
发布于 2019-09-11 15:29:16
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了
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015-11-30 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读