js 滾輪控制圖片縮放大小和拖動

abcByme發表於2018-11-19
JS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .dragAble {
        position: relative;
        cursor: move;
    }
    
    .img-con {
        position: relative;
        width: 713px;
        height: 455px;
        overflow: hidden;
        border: 1px solid red;
    }
    </style>
</head>

<body>
    <p class="img-con"><img src="http://img03.tooopen.com/uploadfile/downs/images/20110714/sy_20110714135215645030.jpg" class="dragAble" /></p>
    <script type="text/javascript" charset="utf-8">
    window.onload = function() {
            var oImg = document.getElementsByTagName("img")[0];
            function fnWheel(obj, fncc) {
                obj.onmousewheel = fn;
                if (obj.addEventListener) {
                    obj.addEventListener(`DOMMouseScroll`, fn, false);
                }

                function fn(ev) {
                    var oEvent = ev || window.event;
                    var down = true;

                    if (oEvent.detail) {
                        down = oEvent.detail > 0
                    } else {
                        down = oEvent.wheelDelta < 0
                    }

                    if (fncc) {
                        fncc.call(this, down, oEvent);
                    }

                    if (oEvent.preventDefault) {
                        oEvent.preventDefault();
                    }

                    return false;
                }


            };
            fnWheel(oImg, function(down, oEvent) {

                var oldWidth = this.offsetWidth;
                var oldHeight = this.offsetHeight;
                var oldLeft = this.offsetLeft;
                var oldTop = this.offsetTop;

                var scaleX = (oEvent.clientX - oldLeft) / oldWidth; //比例
                var scaleY = (oEvent.clientY - oldTop) / oldHeight;

                if (down) {
                    this.style.width = this.offsetWidth * 0.9 + "px";
                    this.style.height = this.offsetHeight * 0.9 + "px";
                } else {
                    this.style.width = this.offsetWidth * 1.1 + "px";
                    this.style.height = this.offsetHeight * 1.1 + "px";
                }

                var newWidth = this.offsetWidth;
                var newHeight = this.offsetHeight;

                this.style.left = oldLeft - scaleX * (newWidth - oldWidth) + "px";
                this.style.top = oldTop - scaleY * (newHeight - oldHeight) + "px";
            });
        }
        <!--
        //拖拽
    var ie = document.all;
    var nn6 = document.getElementByIdx && !document.all;
    var isdrag = false;
    var y, x;
    var oDragObj;

    function moveMouse(e) {
        if (isdrag) {
            oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px";
            oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px";
            return false;
        }
    }

    function initDrag(e) {
        var oDragHandle = nn6 ? e.target : event.srcElement;
        var topElement = "HTML";
        while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
            oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
        }
        if (oDragHandle.className == "dragAble") {
            isdrag = true;
            oDragObj = oDragHandle;
            nTY = parseInt(oDragObj.style.top + 0);
            y = nn6 ? e.clientY : event.clientY;
            nTX = parseInt(oDragObj.style.left + 0);
            x = nn6 ? e.clientX : event.clientX;
            document.onmousemove = moveMouse;
            return false;
        }
    }
    document.onmousedown = initDrag;
    document.onmouseup = new Function("isdrag=false");
    </script>
</body>

</html>

只縮放

 <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img border="0" src="http://img03.tooopen.com/uploadfile/downs/images/20110714/sy_20110714135215645030.jpg" onmousewheel="return rollImg(this)">
</body>
<script language="javascript">
function rollImg(o){
   /* 獲取當前頁面的縮放比
       若未設定zoom縮放比，則為預設100%，即1，原圖大小
   */ 
   var zoom=parseInt(o.style.zoom)||100;
   /* event.wheelDelta 獲取滾輪滾動值並將滾動值疊加給縮放比zoom
       wheelDelta統一為±120，其中正數表示為向上滾動，負數表示向下滾動
   */
   zoom+=event.wheelDelta/12;
   /* 如果縮放比大於0，則將縮放比載入到頁面元素 */
   if (zoom>0) o.style.zoom=zoom+`%`;
   /* 如果縮放比不大於0，則返回false，不執行操作 */
   return false;
}
</script>
</html>

 

相關文章