鼠标悬停商品图片，图片放大，并且可拖动

本文主要是介绍鼠标悬停商品图片，图片放大，并且可拖动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果类似http://www.artpollo.com/Artwork/ArtworkDetails?id=2224847

.artworkDetail .detailMiddle .detailImg{display:inline-block;vertical-align:middle;max-height:740px;max-width:770px;}
.artworkDetail .detailMiddle .bigImg{vertical-align:middle;background-size:500%;height:740px;width:770px;background-position:50% 0%;cursor:move;display:none;}

//鼠标悬停图片放大
function mouseCoverImg() {
$(".detailImg").mouseover(function () {
var width = $(".detailImg").css("width");
var height = $(".detailImg").css("height");
$(".bigImg").css("width", width);
$(".bigImg").css("height", height);
//$(".bigImg").css("top", top+"px");
$(".detailImg").css("display", "none");
$(".bigImg").css("display", "inline-block");
});
$(".bigImg").mouseleave(function () {
$(".detailImg").css("display", "inline-block");
$(".bigImg").css("display", "none");
});
}

//鼠标在图片移动监听
function mousemoveImg() {
$(".bigImg").mousemove(function (e) {
var Y = $('.bigImg').offset().top;
var X = $('.bigImg').offset().left;
var x = e.pageX;
var y = e.pageY;
//console.log(e.pageX + "," + e.pageY);
var positionX = (x - X) / $(".bigImg").width() * 100;
var positionY = (y - Y) / $(".bigImg").height() * 100;
$(".bigImg").css("background-position-x", positionX + "%");
$(".bigImg").css("background-position-y", positionY + "%");
});
}