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=" 100%"> 53 <div id="imgContainer" style="text-align: center; vertical-align: middle; position: relative; 54 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了