<html> <head> <title>圖片拖動,放大,縮小,轉向</title>
<script type="text/javascript"> /*滾輪事件*/ var scrollFunc=function(e) { e=e || window.event; if(e.wheelDelta) { if(e.wheelDelta > 0) imgToSize(0);//縮小圖片 else imgToSize(1);//放大圖片 } else { if(e.detail < 0) imgToSize(1);//放大圖片 else imgToSize(0);//縮小圖片 } } if(document.addEventListener){document.addEventListener('DOMMouseScroll',scrollFunc,false);} window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari
function realSize(){ var oImg = document.all('oImg'); var newImg = new Image(); newImg.src = oImg.src; oImg.style.height = newImg.height+"px"; oImg.style.width = newImg.width+"px"; }
// 縮放圖片 function imgToSize(oBool) { var oImg = document.all('oImg'); oImg.style.zoom = parseInt(oImg.style.zoom) + (oBool ? 5 : -5) + '%'; } // 旋轉圖片 var rotateRight = 1;//右轉 var rotateLeft = 3;//左轉 function imgRoll(direction) { var oImg = document.all('oImg'); if(direction == "left") { oImg.style.filter = 'Progid:DXImageTransform.Microsoft.BasicImage(Rotation='+ rotateLeft +')'; rotateLeft -= 1; rotateLeft = rotateLeft== 0 ? 4 : rotateLeft ; }else{ oImg.style.filter = 'Progid:DXImageTransform.Microsoft.BasicImage(Rotation='+ rotateRight +')'; rotateRight += 1; rotateRight = rotateRight==4 ? 0 : rotateRight ; } } // 翻轉圖片 function imgReverse(arg) { var oImg = document.all('oImg'); oImg.style.filter = 'Flip' + arg; } // 拖動圖片 var oBoolean = false, oLeftSpace = 0, oTopSpace = 0; function mStart() { oBoolean = true; if (oBoolean) { var oImg = document.all('oImg'); oLeftSpace = window.event.clientX - oImg.style.pixelLeft; oTopSpace = window.event.clientY - oImg.style.pixelTop; } } function mEnd() { oBoolean = false; } function document.onmousemove() { if (window.event.button==1 && oBoolean) { var oImg = document.all('oImg'); oImg.style.pixelLeft = window.event.clientX - oLeftSpace; oImg.style.pixelTop = window.event.clientY - oTopSpace; return false; } } </script>
</head> <body> <table> <tr> <td> <div style="position: relative; z-index: 1000;"> <input type="button" value="放大" onclick="imgToSize(1);"> <input type="button" value="縮小" onclick="imgToSize(0);"> <input type="button" value="原大小" onclick="realSize();"> <input type="button" value="左旋轉" onclick="imgRoll('left');"> <input type="button" value="右旋轉" onclick="imgRoll('right');"> <input type="button" value="水平翻轉" onclick="imgReverse('H');"> <input type="button" value="垂直翻轉" onclick="imgReverse('V');"> </div> </td> </tr> <tr> <td> <div align="center"> <img id="oImg" src="images/save.jpg" style="position: relative; zoom: 100%; cursor: move;" onmousedown="mStart();" onmouseup="mEnd();"> </div> </td> </tr> </table> </body> </html>