图片放大缩小可拖动

来源:https://www.sucaihuo.com/js/1865.html 2017-05-02 20:57浏览(884) 收藏

鼠标放到图片上,滚动鼠标可放大缩小图片,移动鼠标可拖动图片
图片放大缩小可拖动
分类:其它特效 > jQuery插件 难易:初级
查看演示 下载资源: 15 下载资源 下载积分: 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'); //放大缩小图片
})
标签: 放大缩小拖动
评论6
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 5楼
    10-16 14:17
    随***声
    这这支持两个手指缩放大小吗?
  • 头像 4楼
    04-21 06:08
    t***o
    嗯 我知道了 我看看是不是火狐浏览器版本低
  • 头像 3楼
    05-06 16:02
    G***n
    还是挺好玩的。
  • 头像 板凳
    05-03 13:11
    舒***畅
    功能还实用的
  • 头像 椅子
    05-03 08:39
    7***2
    很少用到这功能
  • 头像 沙发
    05-03 06:19
    t***o
    火狐浏览器没有移动
1 2