图片放大缩小可拖动

查看演示 下载资源 下载积分： 10 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

img.js

var params = {
    flage: false, //判断是否可以拖动
    moveX: 0,
    moveY: 0,
    curX: 0,
    curY: 0,
    downX: 0,
    downY: 0,
    boxW: 0,
    boxH: 0,
    imgW: 0,
    imgH: 0
}
var moveImg = function(obj) {
    $(obj).mousedown(function(e) {
        e.preventDefault();
        params.downX = e.clientX; //当前点击的X轴位置
        params.downY = e.clientY; //当前点击的y轴位置
        params.curX = $(this).css("left"); //距离左边的位置

        params.curY = $(this).css("top"); //距离右边的位置

        params.boxW = $(this).parent().width(); //父级元素的宽
        params.boxH = $(this).parent().height(); //父元素的高
        params.imgW = $(this).width() - params.boxW; //可移动的X轴距离
        params.imgH = $(this).height() - params.boxH; //可移动的Y轴距离

        if (params.boxH < $(this).height() || params.boxW < $(this).width()) {
            params.flage = true;
        }
    })
    $(document).mouseup(function(e) {
        params.flage = false;
    })
    $(obj).mousemove(function(e) {
        e.preventDefault()
        if (params.flage == true) {
            params.moveX = e.clientX - params.downX;
            params.moveY = e.clientY - params.downY;

            var mX = parseInt(params.moveX) + parseInt(params.curX);
            var mY = parseInt(params.moveY) + parseInt(params.curY);
            if (mX < -params.imgW) {
                mX = -params.imgW
            } else if (mX > 0) {
                mX = 0
            }
            if (mY < -params.imgH) {
                mY = -params.imgH;
            } else if (mY > 0) {
                mY = 0;
            }
            $(".box img").css({"left": mX, "top": mY});
        }

    })
}


var zoom;
var direction;
var imgZoom = function(objId) { //拖动图片
    var imgId = document.getElementById(objId);
    zoom = parseInt(imgId.style.zoom, 10) || 100;

    /* 
     * 滚轮事件只有firefox比较特殊，使用DOMMouseScroll; 其他浏览器使用mousewheel;
     * 
     */
    // firefox
    document.body.addEventListener("DOMMouseScroll", function(event) {
        direction = event.detail && (event.detail > 0 ? "mousedown" : "mouseup");
        imgFun(direction, objId)

    });

    // chrome and ie
    document.body.onmousewheel = function(event) {
        event = event || window.event;

        direction = event.wheelDelta && (event.wheelDelta > 0 ? "mouseup" : "mousedown");
        console.log(objId)
        imgFun(direction, objId)
    };
}

function imgFun(dir, id) { //缩放图片
    var img = document.getElementById(id);
    if (zoom > 500)
        zoom = 500;
    else if (zoom < 100)
        zoom = 100;

    if (dir == "mouseup") {
        zoom += 10
        img.style.width = zoom + '%';
    } else {
        zoom -= 10
        img.style.width = zoom + '%';
    }

    if (zoom > 100) { //当图片的百分比大于100%时才可以拖动图片
        img.style.cursor = "move";
    } else {
        img.style.cursor = "default";
    }
}

<div class="box">
    <img src="images/hehua.jpg" id="img"/>
</div>

<script type="text/javascript" src="js/img.js" ></script>

$(function() {
    moveImg(".box img"); //拖动图片
    imgZoom('img'); //放大缩小图片
})