<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜效果实现</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
display: block;
}
li{
list-style: none;
}
#show{
width: 400px;
height: 400px;
border:1px solid #ccc;
margin-top: 120px;
margin-left: 200px;
position: relative;
}
#show #left{
width: 400px;
height: 400px;
position: relative;
}
#show #left>img{
width: 100%;
}
#show #left>#move{
width: 160px;
height: 160px;
background: #FEEEA7;
opacity: 0.5;
position: absolute;
left: 0;
top: 0;
cursor: move;
display: none;
}
#show #right{
width: 400px;
height: 400px;
border:1px solid #ccc;
position: absolute;
left: 410px;
top: 0px;
overflow: hidden;
display: none;
}
#show #right>img{
position: absolute;
left: 0;
top: 0;
}
#show #lists{
width: 400px;
margin-top: 5px;
}
#show #lists>ul{
width: 100%;
height: 100px;
}
#show #lists>ul>li{
float: left;
width: 25%;
}
#show #lists>ul>li>img{
width: 100%;
}
</style>
</head>
<body>
<div id="show">
<!--左侧原图区域-->
<div id="left">
<img id="smallPic" src="./images/2.jpg" alt="">
<!--move滑块元素-->
<div id="move"></div>
</div>
<!--右侧放大区域-->
<div id="right"><img id="bigPic" src="./images/2.jpg" alt=""></div>
<!--定义图片列表-->
<div id="lists">
<ul id="menu">
<li><img src="./images/2.jpg" alt=""></li>
<li><img src="./images/3.jpg" alt=""></li>
<li><img src="./images/4.jpg" alt=""></li>
<li><img src="./images/5.jpg" alt=""></li>
</ul>
</div>
</div>
</body>
<script>
//获取元素
var show = document.getElementById('show');
var move = document.getElementById('move');
var left = document.getElementById('left');
var smallPic = document.getElementById('smallPic');
var bigPic = document.getElementById('bigPic');
var menu = document.getElementById('menu');
var imgs = menu.getElementsByTagName('img');
//鼠标移入时间
left.onmouseover = function(){
move.style.display = 'block';
right.style.display = 'block';
}
left.onmouseout = function(){
move.style.display = 'none';
right.style.display = 'none';
}
//滑块移动
move.onmousemove = function(e){
var newLeft = e.pageX - show.offsetLeft - move.offsetWidth / 2;
var newTop = e.pageY - show.offsetTop - move.offsetHeight / 2;
//水平偏移临界值
if(newLeft <= 0){
newLeft = 0;
}
if(newLeft >= left.offsetWidth - move.offsetWidth){
newLeft = left.offsetWidth - move.offsetWidth;
}
//垂直偏移临界值
if(newTop <= 0){
newTop = 0;
}
if(newTop >= left.offsetHeight - move.offsetHeight){
newTop = left.offsetHeight - move.offsetHeight;
}
this.style.left = newLeft + 'px';
this.style.top = newTop + 'px';
//左边区域滑块移动，右边如何放大移动
//根据等比例原则，实现右侧放大效果
var bigPicLeft = newLeft * bigPic.offsetWidth / left.offsetWidth;
var bigPicTop = newTop * bigPic.offsetHeight / left.offsetHeight;
bigPic.style.left = -bigPicLeft + 'px';
bigPic.style.top = -bigPicTop + 'px';
}
for(var i = 0; i< imgs.length; i++){
imgs[i].onmouseover = function(){
smallPic.src = this.src;
bigPic.src = this.src;
}
}
</script>
</html>