1.为了居中显示，考虑到div不好设置，用table做边框
缩放原理：调整图片宽高、定位left、top；
平移：鼠标事件位置、定位left、top。
目前贴出实现代码，具体研究内容再做补充
下面是源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src=‘/js/jquery-1.7.2.min.js‘ type=‘text/javascript‘></script>
<style>
html,body {
margin:0;
height:100%;
} //图片绝对定位，平移时使用
#box {
position:absolute;
}
</style>
</head>
<body>
<table style="height:100%;width:100%;" id="tabID" >
<tr >
<td style="text-align:center;vertical-align:middle;">
<img src="/images/a.png" id="box" onmousewheel="return bbimg(this)" />
</td>
</tr>
</table>
<script type="text/javascript">
// img缩放 -->
function bbimg(o){ //下面3行代码也可以缩放，但是跟position:absolute冲突，会导致图片的left、top定死，只能往右往下缩放
// var zoom=parseInt(o.style.zoom, 10)||100; // zoom+=event.wheelDelta/12; //if (zoom>0) o.style.zoom=zoom+‘%‘; var w=o.width; var h=o.height; if(event.wheelDelta>0){//放大 wheelDelta大于0是滚轮往下，小于滚轮往上 o.width=w*1.3; o.height=h*1.3; var left=o.offsetLeft; var top=o.offsetTop; o.style.left=left-(0.3 * w)/2+"px"; o.style.top=top-(0.3 * h)/2+"px"; }else{ o.width=w*0.7; o.height=h*0.7; var left=o.offsetLeft; var top=o.offsetTop; o.style.left=left+(0.3 * w)/2+"px"; o.style.top=top+(0.3 * h)/2+"px"; } return false; } //初始设置图片显示、位置function AutoResizeImage(maxWidth,maxHeight,objImg){ var img = new Image(); img.src = objImg.src; var hRatio; var wRatio; var Ratio = 1; var w = img.width; var h = img.height; wRatio = maxWidth / w; hRatio = maxHeight / h; if (maxWidth ==0 && maxHeight==0){ Ratio = 1; }else if (maxWidth==0){ if (hRatio<1) Ratio = hRatio; }else if (maxHeight==0){ if (wRatio<1) Ratio = wRatio; }else if (wRatio<1 || hRatio<1){ Ratio = (wRatio<=hRatio?wRatio:hRatio); } if (Ratio<1){ w = w * Ratio; h = h * Ratio; } objImg.height = h; objImg.width = w; objImg.style.left=(maxWidth-w)/2+"px"; objImg.style.top=(maxHeight-h)/2+"px"; } //拖动 var oDiv = document.getElementById("box"); oDiv.onmousedown=function(ev) { var oEvent = ev||event; var disX = oEvent.clientX - oDiv.offsetLeft; var disY = oEvent.clientY - oDiv.offsetTop; document.onmousemove=function (ev) { oEvent = ev||event; //360兼容模式不识别ev，故拼上event oDiv.style.left = oEvent.clientX -disX+"px"; oDiv.style.top = oEvent.clientY -disY+"px"; return false; } document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } return false; } </script> </body> </html>
时间： 2024-08-28 01:46:52