<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0px;
padding: 0px
}
.ll{
position: relative;
display: inline-block;
border:1px solid gray;
width: 350px;
height: 350px;
float: left;
}
.ll img{
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
}
.rr{
display: inline-block;
width: 500px;
height: 500px;
border:1px solid gray;
overflow: hidden;
position: relative;
float: left;
}
.yed{
float: left;
width: 125px;
height: 125px;
background: yellow;
opacity: 0.5;
display: none;
position: absolute;
z-index: 999;
}
.rr img{
position: absolute;
}
</style>
</head>
<body>
<div class="ll">
<span class="yed"></span>
<img src="image/5ae19b0eN9fa5ceae.jpg"/>
</div>
<span class="rr">
<img src="image/5ae19b0eN9fa5ceae (1).jpg"/>
</span>
</body>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(".rr").hide();
//移动到小盒子上
$(".ll").mouseover(function(e){
//使黄色盒子显示出来
$(".yed").show();
//使右边那个大盒子显示出来
$(".rr").show();
//实现鼠标的位置位黄色盒子的中心坐标
//1.首先计算鼠标悬浮后的位置
var loca = e || window.event;
//鼠标的横向位置
var sx = loca.clientX;
//鼠标的纵向位置
var sy = loca.clientY;
console.log(sx,sy);
//黄色盒子的左移动位置相当于鼠标到盒子的左边界的距离
//获得黄色盒子的宽度和高度的一半大小
var yw = $(".yed").outerWidth() / 2;
var yh = $(".yed").outerHeight() / 2;
//获得黄色盒子的实际宽高加上边框的距离
var ysk = $(".yed").outerWidth(true);
var ysg = $(".yed").outerHeight(true);
console.log(ysk,ysg);
//获得盒子的位移位置
var shijix = sx - yw ;
var shijiy = sy - yh;
// console.log(yw,yh);
//不能使黄色盒子移除边界
if(shijix < 0){
shijix = 0
}
if(shijiy < 0){
shijiy = 0;
}
if(shijix > $(".ll").width() - ysk){
shijix = $(".ll").width() - ysk;
}
if(shijiy > $(".ll").height() - ysg){
shijiy = $(".ll").height() - ysg;
}
$(".yed").css({
left: shijix + "px",
top: shijiy + "px"
});
//求比例 当前黄色盒子的位移位置与左侧小盒子与黄色盒子差值的一个比值
var bilileft = shijix / ($(".ll").width() - $(".yed").width());
var bilitop = shijiy / ($(".ll").height() - $(".yed").height());
console.log($(".rr>img").outerWidth() - $(".rr").outerWidth());
$(".rr>img").css({
//由于移动的一个位置与大图片的移动位置相反,设置 - 号
left: -($(".rr>img").width() - $(".rr").width())*bilileft + "px",
top: -($(".rr>img").height() - $(".rr").height())*bilitop + "px"
});
})
$(".ll").mouseout(function(){
$(".yed").hide();
$(".rr").hide();
})
</script>
</html>
jQuery放大镜
猜你喜欢
转载自blog.csdn.net/qq_41839784/article/details/89512146
今日推荐
周排行