js例項：商品放大鏡效果
阿新 • • 發佈：2019-01-28
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
height: 1000px;
}
img{
display:block;
border: none;
}
#zoomBox{
position: relative;
width: 400px;
height: 400px;
border: 1px solid #CECECE;
cursor: move;
}
#midArea{
width: 400px;
height: 400px;
}
#midArea img{
width: 400px;
height: 400px;
}
#zoom{
display: none;
position: absolute;
width: 200px;
height: 200px;
background: yellow;
opacity: .5;
}
#bigArea{
display: none;
position: absolute;
left:400px;
top: -1px;
width: 400px;
height: 400px;
border: 1px solid #CECECE;
overflow: hidden;
}
#bigArea img{
position: absolute;
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<!--放大鏡模組-->
<div id="zoomBox">
<div id="midArea">
<img src="img/m01.jpg">
<div id="zoom"></div>
</div>
<div id="bigArea">
<img src="img/m01.jpg">
</div>
</div>
<script type="text/javascript">
var oZoomBox = document.getElementById("zoomBox"),
oMidArea = document.getElementById("midArea"),
oZoom = document.getElementById("zoom"),
oMidImg = oMidArea.children[0],
oBigArea = document.getElementById("bigArea"),
oBigImg = oBigArea.children[0];
oMidArea.onmouseover = function(){
oBigArea.style.display = "block";
oZoom.style.display = "block";
}
oMidArea.onmouseout = function(){
oBigArea.style.display = "none";
oZoom.style.display = "none";
}
oMidArea.onmousemove = function(e){
var evt = e || event;
//var x = evt.pageX - oZoomBox.offsetLeft;
//var y = evt.pageY - oZoomBox.offsetTop;
var x = evt.offsetX;
var y = evt.offsetY;
var _left = x - oZoom.offsetWidth/2;
var _top = y - oZoom.offsetHeight/2;
if(_left <= 0){
_left = 0;
}
if(_left >= oMidArea.offsetWidth - oZoom.offsetWidth){
_left = oMidArea.offsetWidth - oZoom.offsetWidth;
}
if(_top<=0){
_top = 0;
}
if(_top >= oMidArea.offsetHeight - oZoom.offsetHeight){
_top = oMidArea.offsetHeight - oZoom.offsetHeight;
}
oZoom.style.left = _left + "px";
oZoom.style.top = _top + "px";
oBigImg.style.left = -oZoom.offsetLeft/oMidArea.offsetWidth*oBigImg.offsetWidth + "px";
oBigImg.style.top = -oZoom.offsetTop/oMidArea.offsetHeight*oBigImg.offsetHeight + "px";
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
height: 1000px;
}
img{
display:block;
border: none;
}
#zoomBox{
position: relative;
width: 400px;
height: 400px;
border: 1px solid #CECECE;
cursor: move;
}
#midArea{
width: 400px;
height: 400px;
}
#midArea img{
width: 400px;
height: 400px;
}
#zoom{
display: none;
position: absolute;
width: 200px;
height: 200px;
background: yellow;
opacity: .5;
}
#bigArea{
display: none;
position: absolute;
left:400px;
top: -1px;
width: 400px;
height: 400px;
border: 1px solid #CECECE;
overflow: hidden;
}
#bigArea img{
position: absolute;
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<!--放大鏡模組-->
<div id="zoomBox">
<div id="midArea">
<img src="img/m01.jpg">
<div id="zoom"></div>
</div>
<div id="bigArea">
<img src="img/m01.jpg">
</div>
</div>
<script type="text/javascript">
var oZoomBox = document.getElementById("zoomBox"),
oMidArea = document.getElementById("midArea"),
oZoom = document.getElementById("zoom"),
oMidImg = oMidArea.children[0],
oBigArea = document.getElementById("bigArea"),
oBigImg = oBigArea.children[0];
oMidArea.onmouseover = function(){
oBigArea.style.display = "block";
oZoom.style.display = "block";
}
oMidArea.onmouseout = function(){
oBigArea.style.display = "none";
oZoom.style.display = "none";
}
oMidArea.onmousemove = function(e){
var evt = e || event;
//var x = evt.pageX - oZoomBox.offsetLeft;
//var y = evt.pageY - oZoomBox.offsetTop;
var x = evt.offsetX;
var y = evt.offsetY;
var _left = x - oZoom.offsetWidth/2;
var _top = y - oZoom.offsetHeight/2;
if(_left <= 0){
_left = 0;
}
if(_left >= oMidArea.offsetWidth - oZoom.offsetWidth){
_left = oMidArea.offsetWidth - oZoom.offsetWidth;
}
if(_top<=0){
_top = 0;
}
if(_top >= oMidArea.offsetHeight - oZoom.offsetHeight){
_top = oMidArea.offsetHeight - oZoom.offsetHeight;
}
oZoom.style.left = _left + "px";
oZoom.style.top = _top + "px";
oBigImg.style.left = -oZoom.offsetLeft/oMidArea.offsetWidth*oBigImg.offsetWidth + "px";
oBigImg.style.top = -oZoom.offsetTop/oMidArea.offsetHeight*oBigImg.offsetHeight + "px";
}
</script>
</body>
</html>