<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body,div,img{margin: 0;padding: 0}
#main{margin:50px;position: relative;}
#small{width: 300px;height: 187px;border: 1px solid #000;position: relative;}
#mark{
width: 50px;
height: 50px;
background: #ccc;
opacity: 0.5;
position: absolute;
left: 0;
top: 0;
display: none;
}
#big{
width:300px;
height: 187px;
border: 1px solid #000;
overflow: hidden;
position: absolute;
left:320px;
top:0px;
display: none;
}
#big img{position: absolute;}
</style>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">
window.onload = function(){
//页面加载完毕找到small、big、mark
var small = $('small');
var big = $('big');
var mark = $('mark');
var bigImg = big.getElementsByTagName('img')[0];
//鼠标移入
small.onmouseover = function(){
mark.style.display = 'block';
big.style.display = 'block';
}
//鼠标移出
small.onmouseout = function(){
mark.style.display = 'none';
big.style.display = 'none';
}
//鼠标在小图移动的时候
small.onmousemove = function(e){
var ev = e || window.event;
//鼠标在small小图里面的距离
var x = ev.clientX - small.parentNode.offsetLeft;
var y = ev.clientY - small.parentNode.offsetTop;
//确定镜头的坐标
var markLeft = x - (mark.offsetWidth/2);
var markTop = y - (mark.offsetHeight/2);
//不让镜头出界
//如果距离左边小于0,就重新赋值为0,
if(markLeft<0){
markLeft = 0;
}
//如果距离顶部小于0,就重新赋值为0
if(markTop<0){
markTop = 0;
}
//如果镜头向右边移动的距离加上本身宽度大于了small小图的宽度,说明出右边的界了
if(markLeft+mark.offsetWidth>small.offsetWidth){
markLeft = small.offsetWidth - mark.offsetWidth;
}
//如果镜头向下面移动的距离加上本身的高度大于了small小图的高度,说明出底部的界了
if(markTop+mark.offsetHeight>small.offsetHeight){
markTop = small.offsetHeight - mark.offsetHeight;
}
//设置镜头的位置
mark.style.left = markLeft+'px';
mark.style.top = markTop+'px';
//计算大图移动的比例(参考excel表中的图)
//markLeft / (small.offsetWidth - mark.offsetWidth) == bigLeft / (bigImg.offsetWidth-big.offsetWidth)
var bigLeft = markLeft / (small.offsetWidth - mark.offsetWidth) * (bigImg.offsetWidth-big.offsetWidth);
var bigTop = markTop / (small.offsetHeight - mark.offsetHeight) * (bigImg.offsetHeight-big.offsetHeight);
bigImg.style.left = -bigLeft+'px';
bigImg.style.top = -bigTop+'px';
}
}
</script>
</head>
<body>
<div id="main">
<!-- 左边的小图 -->
<div id="small">
<img src="img/ktm_small.jpg">
<!-- 镜头 -->
<div id="mark"></div>
</div>
<div id="big">
<img src="img/ktm_big.jpg">
</div>
</div>
</body>
</html>