html如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
#small{width:300px;height: 225px;float: left;border: 1px solid #000;position: relative;}
#big{width:300px;height: 225px;float: left;overflow: hidden;border: 1px solid #000;position: relative;margin-left: 40px;}
#mark{width: 100px;height: 100px;opacity: 0.5;background-color: #000;position: absolute;top: 0;left: 0;cursor: move;}
#tu{position: absolute;left: 0;top: 0;}
</style>
</head>
<body>
<div id="box">
<div id="small">
<img src="img/smallpic.jpg" >
<span id="mark"></span>
</div>
<div id="big">
<img src="im/bigpic.jpg" id="tu">
</div>
</div>
</body>
</html>
js如下：
<script type="text/javascript">
// 1.获取所有的对象
// 2.在小图片onmouseover
// 3.获取鼠标距离浏览器的距离
// 4.小兔片距离浏览器的距离
// 5.mark的宽度，一半的宽度
// 6.判断位置和距离
// 7.大于小于
// 8.移动
var small=document.getElementById('small');
var mark=document.getElementById('mark');
var tu=document.getElementById('tu');
small.onmousemove=function(e){
var event=e||window.event;
// 鼠标距离浏览器的距离，event.clientX
// 小图片距离浏览器的距离small.offsetLeft
// mark一半的距离，mark.offsetWidth/2
var left=event.clientX-small.offsetLeft-(mark.offsetWidth)/2;
var top=event.clientY-small.offsetTop-(mark.offsetHeight)/2;
// console.log(left);
// console.log(top);
var maxW=small.offsetWidth-mark.offsetWidth;
var maxH=small.offsetHeight-mark.offsetHeight;
if(left<0)left=0;
if(top<0)top=0;
if(left>maxW)left=maxW;
if(top>maxH)top=maxH;
mark.style.left=left+"px";
mark.style.top=top+"px";
tu.style.left=-left*(tu.offsetWidth/small.offsetWidth)+"px";
tu.style.top=-top*(tu.offsetHeight/small.offsetHeight)+"px";
}
</script>鼠标放上去就会在右边展示放大的位置，且左边鼠标所滑过的区域不会超出图片边界，具体效果如下：
注：图片容器的宽高根据图片大小去调整，去设置适应的高度和宽度。
6257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
