放大镜效果
2017-04-18 本文已影响18人
白小虫
商城中常用的图片放大效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>
*{margin: 0;padding: 0;}
body{padding: 100px;}
#demo{
width: 400px;
height: 250px;
position: relative;
border: 1px solid #ccc;
}
#small-box{
position: relative;
z-index: 1;
}
#small-box img{
display: block;
}
#float-box{
display: none;
width: 160px;
height: 100px;
position: absolute;
background-color: #ffc;
border: 1px solid #ccc;
opacity: 0.5;
filter: alpha(opacity=50);
cursor: move;
}
#mark{
position: absolute;
width: 400px;
height: 250px;
z-index: 10;
cursor: move;
background-color: #fff;
opacity: 0;
filter: alpha(opacity=0);
}
#big-box{
display: none;
position: absolute;
top: 0;
left: 460px;
width: 768px;
height: 512px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;
}
#big-box img{
position: absolute;
z-index: 5;
}
</style>
</head>
<body>
<div id="demo">
<div id="small-box">
<div id="mark"></div>
<div id="float-box"></div>
</div>
<div id="big-box">
</div>
</div>
<script>
window.onload = function() {
var objDemo = document.getElementById('demo');
var objSmallBox = document.getElementById('small-box');
var objMark = document.getElementById('mark');
var objFloatBox = document.getElementById('float-box');
var objBigBox = document.getElementById('big-box');
var objBigBoxImage = objBigBox.getElementsByTagName('img')[0];
objMark.onmouseover = function() {
objFloatBox.style.display = 'block';
objBigBox.style.display = 'block';
}
objMark.onmouseout = function() {
objFloatBox.style.display = 'none';
objBigBox.style.display = 'none';
}
objMark.onmousemove = function(e) {
var _event = e || window.event;
var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;
if (left < 0) {
left = 0;
} else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
left = objMark.offsetWidth - objFloatBox.offsetWidth;
}
if (top < 0) {
top = 0;
} else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
top = objMark.offsetHeight - objFloatBox.offsetHeight;
}
objFloatBox.style.left = left + 'px';
objFloatBox.style.top = top + 'px';
var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);
objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + 'px';
objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + 'px';
}
}
</script>
</body>
</html>
简书会自动上传外链图片，所以这里代码里面img标签里面对应的换两个地址【@换成.】，http://7xr9pe.com1.z0.glb.clouddn.com/small@jpg、http://7xr9pe.com1.z0.glb.clouddn.com/big@jpg
效果如下所示：
放大镜预览效果
