放大镜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 900px;
height: 500px;
display: flex;
justify-content: space-between;
margin: 100px auto;
}
.left {
width: 300px;
height: 300px;
background: red;
position: relative;
}
.left img {
width: 100%;
height: 100%;
}
.right {
width: 500px;
height: 500px;
overflow: hidden;
background: pink;
position: relative;
}
.right img {
width: 1500px;
height: 1500px;
position: absolute;
}
.left .shadow {
width: 100px;
height: 100px;
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
.container ul {
display: flex;
justify-content: space-between;
overflow: hidden;
}
.container ul li {
margin-top: 20px;
width: 60px;
height: 60px;
list-style: none;
}
.container ul li img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<img src="../images/1.jpg" alt="">
<div class="shadow">
</div>
<ul>
<li>
<img src="../images/1.jpg" alt="" rightimgsrc="../images/1.jpg" leftimgsrc="../images/1.jpg">
</li>
<li>
<img src="../images/2.jpg" alt="" rightimgsrc="../images/2.jpg" leftimgsrc="../images/2.jpg">
</li>
<li>
<img src="../images/3.jpg" alt="" rightimgsrc="../images/3.jpg" leftimgsrc="../images/3.jpg">
</li>
<li>
<img src="../images/4.jpg" alt="" rightimgsrc="../images/4.jpg" leftimgsrc="../images/4.jpg">
</li>
</ul>
</div>
<div class="right">
<img src="../images/1.jpg" alt="" class="rightimg">
</div>
</div>
<script>
var ocotainer = document.querySelector('.container')
var oleft = document.querySelector('.left')
var oright = document.querySelector('.right')
var oshadow = document.querySelector('.shadow')
var oleftimg = oleft.querySelector('img')
var orightimg = document.querySelector('.rightimg')
var oul = document.querySelector('ul')
var r = oshadow.offsetWidth / 2
var maxX = oleft.clientWidth - oshadow.offsetWidth
console.log(maxX)
var maxY = oleft.clientHeight - oshadow.offsetHeight
var scalc = (orightimg.offsetWidth - oright.offsetWidth) / (maxX)
console.log(r)
oleft.onmouseover = function () {
oshadow.style.visibility = 'visible'
this.onmousemove = function (e) {
var e = e || event
var x = e.x - r - ocotainer.offsetLeft
var y = e.y - r - ocotainer.offsetTop
if (x < 0) x = 0
if (y < 0) y = 0
if (y > maxY) y = maxY
if (x > maxX) x = maxX
console.log(x, y)
oshadow.style.cssText += `left:${x}px;top:${y}px`
orightimg.style.cssText = `left:${-x * scalc}px;top:${-y * scalc}px`
}
oul.onmouseover = function (e) {
var e = e || event
var target = e.target || e.srcElement
if (target.tagName === 'IMG') {
// oleftimg.src = target.src
// orightimg.src = target.src
oleftimg.src = target.getAttribute('leftimgsrc')
orightimg.src = target.getAttribute('rightimgsrc')
}
}
}
oleft.onmouseout = function () {
oshadow.style.visibility = 'hidden'
}
</script>
</body>
</html>
