#商城放大镜------------进阶篇
效果基本如下:
首先需要有几种大小分别为小,中,大的图片,基本思路还是跟上一篇差不多,主要多了一个黄色的查看框。
css:
<style>
#left {
width: 300px;
height: 400px;
margin: 150px;
border: 1px solid #ccc;
position: relative;
}
#img {
height: 300px;
}
#list {
display: flex;
justify-content: space-evenly;
align-items: center;
height: 100px;
}
#list img {
border: 1px solid transparent
}
#list img.active {
border: 1px solid #ccc;
}
#right {
width: 500px;
height: 500px;
border: 1px solid #ccc;
background: green;
position: absolute;
top: 0;
display: none;
left: 300px;
}
.shadow {
position: absolute;
left: 0;
top: 0;
display: none;
width: 150px;
height: 150px;
background: rgba(255, 217, 0, 0.24);
cursor: move;
}
</style>
body:
<div id="left">
<div id="img" style="background: url(./img/1.jpg) 0 / 100% 100%;">
<div class="shadow"></div>
</div>
<div id="list">
</div>
</div>
<div id="right" style="background: url(./img/2.jpg) center;"></div>
顺带回顾一下ajax请求,所以有json文件。
json:
[
{
"id": 1,
"imgs": [
"0.jpg",
"1.jpg",
"2.jpg"
]
},
{
"id": 2,
"imgs": [
"3.jpg",
"7.jpg",
"9.jpg"
]
},
{
"id": 3,
"imgs": [
"8.jpg",
"6.jpg",
"5.jpg"
]
}
]
script:
<script>
function $(str) {
return document.querySelector(str)
}
window.onload = function () {
let ajax = new XMLHttpRequest()
ajax.open('GET', './data.json', true)
ajax.send()
ajax.onreadystatechange = () => {
if (ajax.readyState === 4) {
if (ajax.status === 200) {
let arr = JSON.parse(ajax.response)
arr.forEach((r, i) => {
let img = document.createElement('img')
img.src = './img/' + r.imgs[0]
if (i === 0) img.classList.add('active')
img.onmouseenter = function () {
let imgs = $('#list').children
for (let i = 0; i < imgs.length; i++) {
imgs[i].classList.remove('active')
}
this.classList.add('active')
$('#img').style['background-image'] = `url(./img/${arr[i].imgs[1]})`
$('#right').style['background-image'] = `url(./img/${arr[i].imgs[2]})`
}
$('#list').appendChild(img)
})
let l = $("#left").offsetLeft + $('#left').offsetWidth
let t = $("#left").offsetTop
$("#right").style.left = l + 'px'
$("#right").style.top = t + 'px'
$("#img").onmouseenter = () => {
$('.shadow').style.display = 'block'
$('#right').style.display = 'block'
}
$("#img").onmouseleave = () => {
$('#right').style.display = 'none'
$('.shadow').style.display = 'none'
}
$("#img").onmousemove = (e) => {
let x = e.pageX - $('#left').offsetLeft
let y = e.pageY - $("#left").offsetTop
x = x / $('#left').offsetWidth
y = y / $('#left').offsetHeight
x = (x * 100).toFixed(4) + "%"
y = (y * 100).toFixed(4) + "%"
$("#right").style['background-position-x'] = x
$("#right").style['background-position-y'] = y
let xx = e.pageX - $('#left').offsetLeft - ($('.shadow').offsetWidth / 2)
let yy = e.pageY - $('#left').offsetTop - ($('.shadow').offsetHeight / 2)
if (xx < 0) xx = 0
if (yy < 0) yy = 0
let maxLeft = $('#left').offsetWidth - $('.shadow').offsetWidth
let maxTop = $('#img').offsetHeight - $('.shadow').offsetHeight
if (xx > maxLeft) xx = maxLeft
if (yy > maxTop) yy = maxTop
$('.shadow').style.left = xx + "px"
$('.shadow').style.top = yy + "px"
}
}
}
}
}
</script>
xx + “px”
$(’.shadow’).style.top = yy + “px”
}
}
}
}
}
</script>
这样一个比较完善的放大镜功能就实现啦!!!!