您的位置：首页 > Web前端 > JavaScript

JS控制图片拖动放大缩小旋转支持滚轮放大缩小 IE有效

2013-06-25 11:37 761 查看

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效

JS控制图片拖动放大缩小旋转支持滚轮放大缩小 IE有效