<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{margin:0px;padding:0px;}
#small{
400px;
height:400px;
position:absolute;
left:100px;
top:50px;
overflow:hidden;
cursor:move;
}
#big{
400px;
height:400px;
position:absolute;
left:550px;
top:50px;
overflow:hidden;
display:none;
}
#move{
160px;
height:160px;
background:url('./bg.png');
position:absolute;
left:0px;
top:0px;
display:none;
}
#bigimg{
position:absolute;
}
#uls{
400px;
height:80px;
position:absolute;
left:100px;
top:460px;
}
#uls li{
80px;
height:80px;
border:solid 1px green;
float:left;
margin-right:10px;
list-style:none;
cursor:pointer;
}
</style>
</head>
<body>
<div id='small'>
<img src="./1.jpg" alt="" width='100%' id='smallimg'>
<div id='move'></div>
</div>
<ul id='uls'>
<li><img src="./1.jpg" alt="" width='100%'></li>
<li><img src="./2.jpg" alt="" width='100%'></li>
<li><img src="./3.png" alt="" width='100%'></li>
<li><img src="./4.png" alt="" width='100%'></li>
</ul>
<div id='big'>
<img src="./1.jpg" alt="" id='bigimg'>
</div>
<script>
var small = document.getElementById('small');
var move = document.getElementById('move');
var big = document.getElementById('big');
var bigimg = document.getElementById('bigimg');
var smallimg = document.getElementById('smallimg');
small.onmousemove = function(e){
move.style.display = 'block';
big.style.display = 'block';
//获取x和y的坐标
//注意: clientX clientY
// 坐标是距离可视区域的左部的坐标 和 顶部的坐标
/*var x = e.clientX;
var y = e.clientY;*/
//注意: pageX pageY
// 坐标是距离整个文档的左侧和顶部的坐标
var x = e.pageX;
var y = e.pageY;
//获取small距离左侧的偏移量
var sl = small.offsetLeft;
var st = small.offsetTop;
//获取move一般的宽
var mw = move.offsetWidth/2;
var mh = move.offsetHeight/2;
//获取move新的left
var nml = x - sl -mw;
var nmt = y - st -mh;
//获取small的宽和高 获取的是move的宽和高
var sw = small.offsetWidth-move.offsetWidth;
var sh = small.offsetHeight-move.offsetHeight;
if(nml>= sw){
nml = sw;
}
if(nml <= 0){
nml = 0;
}
if(nmt >= sh){
nmt = sh;
}
if(nmt <= 0){
nmt = 0;
}
//获取大图篇的左偏移量
var bl = (nml/small.offsetWidth)*bigimg.offsetWidth;
var bt = (nmt/small.offsetHeight)*bigimg.offsetHeight;
//设置大图的左偏移量 注意:大图的定位
bigimg.style.left = -bl+'px';
bigimg.style.top = -bt+'px';
move.style.left = nml+'px';
move.style.top = nmt+'px';
}
small.onmouseout = function(){
big.style.display = 'none';
move.style.display = 'none';
}
//获取ul里面所有的img
var imgs = document.getElementById('uls').getElementsByTagName('img');
// console.log(imgs);
for (var i = 0; i < imgs.length; i++) {
imgs[i].onmouseover = function(){
var srcs = this.src;
smallimg.src = srcs;
bigimg.src = srcs;
}
}
</script>
</body>
</html>