<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
display:block;
}
.box{
margin:50px;
position:relative;
}
#small{
width:350px;
height: 350px;
border:1px solid #ccc;
position:absolute;
top:0;
left:0;
}
#small img{
width: 100%;
height: 100%;
}
#move{
width:100px;
height:100px;
background:rgba(255,255,0,.3);
position:absolute;
top:0;
left:0;
display:none;
cursor:move;
}
#big{
width:400px;
height:400px;
border:1px solid #ddd;
position:absolute;
left:360px;
top:0;
overflow:hidden;
}
#big img{
width:800px;
height:800px;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div class="box">
<div id="small">
<img src="./img/1.jpg" alt="">
<div id="move"></div>
</div>
<div id="big">
<img src="./img/2.jpg" alt=" ">
</div>
</div>
<script src="./jquery-1.11.1.min.js"></script>
<script>
//划上小块时让move块显示隐藏
$("#small").hover(function(){
$("#move").show();
},function(){
$("#move").hide();
});
//按比例求move块的尺寸（move块显示小图的几分之几对应右边显示器得显示对应大图的几分之几）
var w = $("#big").width()*$("#small").width()/800;
$("#move").css({"width":w,"height":w});
//move块的拖拽
$("#small").bind("mousemove",function(e){
var mX = e.clientX;
var mY = e.clientY;
var l = mX-$("#move").width()/2-$(this).offset().left;
var t = mY-$("#move").height()/2-$(this).offset().top;
if(l<=0){
l=0;
}else if(l>=$(this).width()-$("#move").width()){
l=$(this).width()-$("#move").width();
}
if(t<=0){
t=0;
}else if(t>=$(this).height()-$("#move").height()){
t=$(this).height()-$("#move").height();
}
$("#move").css({"left":l+"px","top":t+"px"})
//求偏移距离（move向右偏移小图的几分之几那么对应大图得向左偏移对应的几分之几）
var left = $('#move').position().left;
var top = $("#move").position().top;
var bigL = 800*left/350;
var bigT = 800*top/350;
$("#big img").css({"left":-bigL+"px","top":-bigT+"px"})
//move块宽/小图宽 = 显示屏的宽/大图的宽 = move块的偏移量/大图的偏移量
})
</script>
</body>
</html>
加油 !
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
