jQuery版的放大镜,这里就直接贴上源码好了,主要还是对于事件和选择器的理解和掌握,有问题希望大家能够提出来,本博主菜鸟一个。望大神们体谅:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{
margin: 0;
padding: 0;
}
.magnify{
width: 200px;
margin: 50px auto;
position: relative;
}
/*创建玻璃放大镜的效果*/
.large{
width: 175px;
height: 175px;
position: absolute;
border-radius: 100%;
/*处理放大镜的玻璃效果和阴影效果*/
box-shadow: 0 0 0 7px rgba(255,255,255,0.85),0 0 7px rgba(0,0,0,0.25),inset 0 0 40px 2px rgba(0,0,0,0.25);
/*载入大图*/
background: url(img/iphone.jpg) no-repeat;
/*默认不显示*/
display: none;
}
/*显示*/
.small{
display: block;
}
</style>
<script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<div class="magnify">
<div class="large"></div>
<img class="small" src="img/iphone.jpg" width="200" alt="iPhone" />
</div>
<script>
/*图像初始宽高*/
var native_width = 0;
var native_height = 0;
$(".magnify").mousemove(function (e) {
/*判断图像宽高不为0*/
if(!native_width&&!native_height){
//创建一个新的图像对象,并将小图像的url赋值给对象从而获取小图片的宽高
var image_obj=new Image();
image_obj.src=$(".small").attr("src");
/*console.log(image_obj);*/
//将新建的图片对象的宽高设置为全局变量
native_width=image_obj.width;
native_height=image_obj.height;
}else{
//返回当前鼠标相对于窗口xy轴的位置,并处理放大镜跟随鼠标事件
var magnify_offset=$(this).offset();
var mx=e.pageX-magnify_offset.left;
var my=e.pageY-magnify_offset.top;
//判断鼠标是否在容器之外
if(mx<$(this).width()&&my<$(this).height()&&mx>0&&my>0)
{
$(".large").fadeIn(100);
}
else
{
$(".large").fadeOut(100);
}
if($(".large").is(":visible")) //如果.large元素可见
{
//通过鼠标在小图像上的位置变化,改变大图像背景的位置。计算出鼠标的像素比例,按照比例调整大图像的位置
var rx=Math.round(mx/$(".small").width()*native_width-$(".large").width()/2)*-1;
var ry=Math.round(my/$(".small").height()*native_height-$(".large").height()/2)*-1;
var bgp=rx+"px "+ry+"px";
//鼠标移动放大镜的参数
var px=mx-$(".large").width()/2;
var py=my-$(".large").height()/2;
//鼠标移动放大镜时,需要扣除一半的放大镜高宽,才能保持鼠标处于放大镜的中间
//将计算结果输出到html中,实现移动放大镜
$(".large").css({
left: px,
top: py,
backgroundPosition: bgp
})
}
}
})
</script>
</body>
</html>