鼠标对图片的操作(缩放、拖动)

//鼠标滚轮缩放
function bbimg(o){
    $(o).css({'width':'auto','height':'auto','max-width':'auto','max-height':'auto'})
    $('.fancybox-inner').css('overflow','hidden')
    var zoom=parseInt(o.style.zoom, 10)||100;
    zoom+=event.wheelDelta/12;
    if (zoom>0) {
        console.log(zoom)
        o.style.zoom=zoom+'%';
    }
    return false;
}
// 鼠标状态  0=>鼠标松开  1=>鼠标按住
var _move = 0;
var _obj,position_left,position_top;
// 鼠标点击
function down(obj){

    _move = 1;   //修改状态  鼠标按住
    _obj = $(obj);   //操作对象
    //判断鼠标操作  1是左键

    if(event.button == 1 || event.button == 0){
        // 获取点击时  鼠标在页面的位置
        if(event.pageX){
            pageX = event.pageX;
            pageY = event.pageY;
        }else{
            pageX = event.clientX;
            pageY = event.clientY;
        }

        // 获取对象的top left值
        position_left = parseFloat(_obj.css('left').split('p')[0]);
        position_top = parseFloat(_obj.css('top').split('p')[0]);
    }
}
//鼠标移动
function mousemove(){
    // 判断是否在按住鼠标的状态下
    if(_move == 1){
        if(event.pageX){
            pageX2 = event.pageX;
            pageY2 = event.pageY;
        }else{
            pageX2 = event.clientX;
            pageY2 = event.clientY;
        }
        //控制图片移动
        $('.fancybox-image').css({'top':position_top+pageY2 - pageY+'px',"left":position_left+pageX2 - pageX+'px'})
    }
}
//开始移动
function mousestop(o){
    window.event.returnValue = false;
}
//鼠标释放
function mouseup(){
    // 修改鼠标状态
    _move = 0;
}

猜你喜欢

转载自blog.csdn.net/qq_36061522/article/details/81234399