html:
<div class="small_box">
<span class="mask"></span>
<div class="float_layer">
<div class="big_box">
<img src="pattern15.jpg">
</div>
</div>
<img src="pattern15.jpg">
</div>
css:
* {
margin:0;
padding:0;
}
.small_box {
width:240px;
height:240px;
margin-left:10px;
margin-top:10px;
position:relative;
}
.small_box img {
width:240px;
height:240px;
}
.small_box .mask {
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
opacity:0;
z-index:2;
cursor:move;
}
.small_box .float_layer {
position:absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background:rgba(0,0,0,0.5);
display:none;
}
.big_box {
position:absolute;
width: 150px;
height: 150px;
border-radius: 50%;
overflow:hidden;
}
.big_box img {
position:absolute;
width: 500px;
height: 500px;
}
js:
$(".mask").mouseover(function() {
$(".float_layer").show();
});
$(".mask").mouseout(function() {
$(".float_layer").hide();
});
$(".mask").mousemove(function(e) {
var layer=$(".float_layer"),
box=$(".small_box");
var l = e.pageX - box.offset().left - (layer.width() / 2);
var t = e.pageY - box.offset().top - (layer.height() / 2);
if (l < 0) {
l = 0;
};
if (l > $(this).width() - layer.width()) {
l = $(this).width() - layer.width();
};
if (t < 0) {
t = 0;
};
if (t > $(this).height() - layer.height()) {
t = $(this).height() - layer.height();
};
layer.css({
"left": l,
"top": t
});
var pX = l / ($(".mask").width() - layer.width());
var pY = t / ($(".mask").height() - layer.height());
$(".big_box img").css({
"left": -pX * ($(".big_box img").width() - $(".big_box").width()),
"top": -pY * ($(".big_box img").height() - $(".big_box").height())
});
})