图片拖拽和缩放

缩放图片直接修改img尺寸,需要将img设置为绝对定位

document.ondragstart=function() {return false;}  //屏蔽火狐拖动图片下载行为
var isMoving=false;
var start_offset_x=0;
var start_offset_y=0;
$("#show_img").mousewheel(function(event, delta, deltaX, deltaY){
    //console.log(delta, deltaX, deltaY);
    var t_width=$("#show_img").width()+delta*15;
    var t_height=$("#show_img").height()+delta*15;
    if (delta < 0){
        t_width = ($("#show_img").width()>50 && $("#show_img").height()>50)?t_width:$("#show_img").width();
        t_height = ($("#show_img").height()>50 && $("#show_img").width()>50)?t_height:$("#show_img").height();
    }
    $("#show_img").width(t_width);
    $("#show_img").height(t_height);
    //$("#show_img").css("margin-left", (parseInt($("#show_img").css("margin-left").split("p")[0])-delta*10)+"px");

    //event.stopPropagation();
    event.preventDefault();
});
$("#show_img").mousedown(function(e){
    isMoving = true;
    start_offset_x = e.pageX;
    start_offset_y = e.pageY;
    event.preventDefault();
});
$("#show_img").mousemove(function(e){
    if (!isMoving)
        return;
    $("#show_img").css("left",(parseInt($("#show_img").css("left").split("p")[0])+e.pageX-start_offset_x)+"px").css("top",(parseInt($("#show_img").css("top").split("p")[0])+e.pageY-start_offset_y)+"px");
    start_offset_x = e.pageX;
    start_offset_y = e.pageY;
});
$("html").mouseup(function(){
    isMoving = false;
    event.preventDefault();
});


<div id='show_img_div' style=' width:100%;overflow:hidden; padding: 10px;position:relative;'><img style='position:absolute;left:0;top:0' id='show_img' src='' width="" height=""></div>


你可能感兴趣的:(图片拖拽和缩放)