鼠标拖动遮盖运动,右边大图随之移动,类似于淘宝中的放大镜效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
float: left;
}
#big{
position: relative;
width: 400px;
height: 400px;
overflow: hidden;
border:1px solid;
display: none;
}
#small{
width: 350px;
height: 350px;
position: relative;
border:1px solid;
}
#mask{
position: absolute;
width: 175px;
height: 175px;
left:0;
top:0;
background: rgba(0,0,0,0.3);
display: none;
}
#maximg{
position: absolute;
}
</style>
</head>
<body>
<div id="small">
<img src="./1.jpg" alt="">
<div id="mask"></div>
</div>
<div id="big">
<img src="./2.jpg" alt="" id="maximg">
</div>
</body>
<script src="../../jquery.js"></script>
<script>
//当鼠标出现在小图的时候,蒙版出现
$("#small").mouseover(function(e) {
//将mask显示
$("#big").slideDown(1000);
$("#mask").show();
$("#small").mousemove(function(e){
//获得当前鼠标的坐标点
var x = e.clientX-$("#mask").width()/2+"px";
var y = e.clientY-$("#mask").height()/2+"px";
// console.log(x,y);
$("#mask").css({"top":y,"left":x});
//边界的判断
var maxW = $("#small").outerWidth()-$("#mask").width();
var maxH = $("#small").outerHeight()-$("#mask").height();
var l = $("#mask").offset().left;
var t = $("#mask").offset().top;
if(l<0){
$("#mask").css("left","0px");
}
if(t<0){
$("#mask").css("top","0px");
}
if(l>=maxW){
$("#mask").css("left",maxW);
}
if(t>=maxH){
$("#mask").css("top",maxH);
}
//获得运动比例
var scaleX= ($("#mask").offset().left/maxW)*($("#big").outerWidth()-$("#maximg").width())+"px";
var scaleY= ($("#mask").offset().top/maxW)*($("#big").outerHeight()-$("#maximg").height())+"px";
$("#maximg").css("left",scaleX);
$("#maximg").css("top",scaleY);
})
});
$("#small").mouseleave(function(e) {
$("#big").slideUp(1000);
mask.style.display="none";
});
</script>
</html>
两个图片有相对应的比例关系
小图可移动的最大距离和大图可移动的最大距离是等比例的
所以: 小图移动的距离/小图最大移动距离 == 大图移动的距离/大图最大移动距离