jquery 图片缩放拖动的简单实例(2)

$("#imgMain").width(newWidth);
            $("#imgMain").height(newHeight);
        }
        );

$("#divBlock").bind("mousedown", function (e) {
                var xo = e.pageX;
                var yo = e.pageY;
                var imgLeft = $("#imgMain").position().left;
                var imgTop = $("#imgMain").position().top;
                var overHeight = $("#divBlock").height();
                $("#divBlock").bind("mousemove", function (e) {

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                    var x = e.pageX;
                    var y = e.pageY;

var bX = $("#imgBox").offset().left;
                    var bY = $("#imgBox").offset().top;

$("#imgMain").css("left", x - bX - (xo - bX) + imgLeft);
                    $("#imgMain").css("top", y - bY - (yo - bY) - overHeight + imgTop);
                });

});

$("#divBlock").bind("mouseup mouseout", function () {
                $("#divBlock").unbind("mousemove");
            });

});
    </script>
</head>
<body>
    <div>
        <div>
        </div>
        <img src="https://www.jb51.net/test.jpg" alt="" />
    </div>
</body>
</html>

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdwwwp.html