现在很多pc商城查看商品详情的时候,鼠标移动过商品图片的时候,图片都有放大功能,现在利用js一些属性,元素写一个小型的放大镜,代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body,div,img{margin: 0;padding: 0}
#main{width: 300px;height: 187px;margin:50px auto;position: relative;}
#small{width:100%;border:1px solid #666;}
#big{width:100%;height:187px;border:1px solid #666;overflow: hidden;position: absolute;left: 320px;top:0;}
#mark{width:50px;height: 50px;background-color: #ccc;position: absolute;left: 0;top:0;opacity: 0.5}
#big,#mark{display: none}
</style>
</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>
<script type="text/javascript">
//1. 找到小图
var small = document.getElementById('small');
//找到大图
var big = document.getElementById('big');
//找到镜头
var mark = document.getElementById('mark');
//鼠标移入到小图,镜头、大图显示
small.onmouseover = function(){
big.style.display = 'block';
mark.style.display = 'block';
}
//鼠标离开小图,大图、镜头隐藏
small.onmouseout = function(){
big.style.display = 'none';
mark.style.display = 'none';
}
//监视鼠标在小图上的移动行为
small.onmousemove = function(ev){
var x = ev.clientX - this.parentNode.offsetLeft - mark.offsetWidth/2;
var y = ev.clientY - this.parentNode.offsetTop -mark.offsetHeight/2;
if(x<=0){
x = 0;
}
if(y<=0){
y = 0;
}
if(x >= small.offsetWidth - mark.offsetWidth){
x = small.offsetWidth - mark.offsetWidth;
}
if(y >= small.offsetHeight - mark.offsetHeight){
y = small.offsetHeight - mark.offsetHeight;
}
//document.title = this.parentNode.offsetLeft;
//让镜头的坐标等于鼠标的坐标即可
mark.style.left = x +'px';
mark.style.top = y +'px';
//通过镜头移动的比例计算大图移动的距离
//镜头移动的距离 / 总长度 == 大图片移动的距离 / 大图可以移动的总的长度
//mark.offsetLeft / (small.offsetWidth - mark.offsetWidth) == bigLeft / (bigImg.offsetWidth - big.offsetWidth)
var bigImg = big.getElementsByTagName('img')[0];
var bigLeft = mark.offsetLeft/(small.offsetWidth-mark.offsetWidth) * (bigImg.offsetWidth - big.offsetWidth);
var bigTop = mark.offsetTop/(small.offsetHeight-mark.offsetHeight) * (bigImg.offsetHeight - big.offsetHeight);
//先定位布局,才能移动
bigImg.style.position = 'absolute';
bigImg.style.left = -bigLeft+'px';
bigImg.style.top = -bigTop+'px';
}
</script>
</body>
</html>
示意图如下: