效果如图所示:
可根据选择切换至上一张下一张
话不多说,放代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#small{
width: 250px;
height: 365px;
border: 1px solid #000;
position: absolute;
left: 100px;
top: 100px;
}
#small img{
width: 100%;
height: 100%;
}
#big img{
width:1000px;
height:1450px;
position: absolute;
}
#big{
display: none;
width: 400px;
height: 365px;
border: 1px solid #000;
position: absolute;
left: 400px;
top: 100px;
overflow: hidden;
}
#mark{
width: 100px;
height: 100px;
background-color: white;
opacity: 0.5;
filter: alpha(opacity=50);
position: absolute;
left: 0px;
top: 0px;
display: none;
}
#prev{
top: 10px;
left: 60px;
position: relative;
}
#next{
top: 10px;
left: 80px;
position: relative;
}
</style>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$(function(){
$("#small").mouseenter(function(){
$("#mark,#big").show()
}).mouseleave(function(){
$("#mark,#big").hide()
}).mousemove(function(ev){
var l=ev.pageX-$(this).offset().left-50;
var t=ev.pageY-$(this).offset().top-50
if(l<=0){
l=0
}
if(l>=150){
l=150
}
if(t<=0){
t=0
}
if(t>=265){
t=265
}
//改变遮罩层的位置
$("#mark").css({
left:l,
top:t
})
//同时改变放大图片的位置 四倍于遮罩层图片的位置
//而且是反方向的
$("#big img").css({
left:-4*l,
top:-4*t
})
})
var index=1;
//切换上一张图片
function prev(){
if(index>=2){
index--
}else{
index=4
}
return index
}
//切换下一张图片
function next(){
if(index>11){
index=1
}else{
index++
}
return index
}
//点击上一张图片
$("#prev").click(function(){
prev()
$("#small img").attr("src","img/"+(index)+".jpg")
$("#big img").attr("src","img/"+(index)+".jpg")
})
$("#next").click(function(){
next()
$("#small img").attr("src","img/"+(index)+".jpg")
$("#big img").attr("src","img/"+(index)+".jpg")
})
})
</script>
</head>
<body>
<div id="small">
<img src="img/1.jpg" />
<div id="mark"></div>
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
<div id="big">
<img src="img/1.jpg" />
</div>
</body>
</html>
如此…一个简单的放大镜就做成功啦~