放大器
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin:0;padding:0}
.box{
width:450px;
height:600px;
border:1px solid #333;
margin:100px;
position:relative;
}
.box>.show{
width:450px;
height:450px;
border-bottom:1px solid #333;
position:relative;
/* cursor:not-allowed; */
cursor:none; n
}
.box>.show>.mask{
width:200px;
height:200px;
background-color: rgba(120,120,120,0.5);
position:absolute;
left:10px;
top:10px;
display:none;
pointer-events:none;
}
.box>.show>.mask.active{
display:block;
}
.box>.magnifier{
width:500px;
height:500px;
border:1px solid blue;
position:absolute;
top:0;
left:110%;
display:none;
background: url('./imgs/big.jpg') no-repeat;
background-position: 0 0;
background-size:800px 800px;
}
.box>.magnifier.active{
display:block;
}
.box>.list{
/* width:100%; */
height:149px;
padding:48px 40px;
box-sizing:border-box;
}
.list>p{
width:54px;
height:54px;
float:left;
margin-right:20px;
border:none;
border:1px solid transparent;
cursor:copy;
}
.list>p.active{
border:1px solid rebeccapurple;
}
img{
width:100%;
height:100%;
display:block;
}
</style>
</head>
<body>
<div class="box">
<div class="show">
<img src="./imgs/show.jpg" alt="">
<div class="mask"></div>
</div>
<div class="magnifier"></div>
<div class="list">
<p class='active'><img src="./imgs/small.jpg" alt="" srcset="" data-show='./imgs/show.jpg' data-magnifier='./imgs/big.jpg'></p>
<p><img src="./imgs/small1.jpg" alt="" data-show='./imgs/show1.jpg' data-magnifier='./imgs/big1.jpg'></p>
</div>
</div>
<script src="./magnifier.js"></script>
<script>
var magnifier=document.querySelector('.magnifier')
console.log(magnifier.parentNode)
let b=new Magnifier('.box')
b.init()
// b.getProperty()
// b.overOut()
// b.tinkerScale()
// b.move()
// b.bindEvent()
console.log(b)
</script>
</body>
</html>
js
function Magnifier(elem){
this.elem=document.querySelector(elem)
this.show=this.elem.querySelector('.show')
this.magnifier=this.elem.querySelector('.magnifier')
this.list=this.elem.querySelector('.list')
this.mask=this.elem.querySelector('.show>.mask')
this.ps=this.list.querySelectorAll('p')
}
Magnifier.prototype.overOut=function(){
this.show.addEventListener('mouseover',()=>{
this.mask.classList.add('active')
this.magnifier.classList.add('active')
})
this.show.addEventListener('mouseout',()=>{
this.mask.classList.remove('active')
this.magnifier.classList.remove('active')
})
}
Magnifier.prototype.getProperty=function(){
this.maskWidth=parseInt(window.getComputedStyle(this.mask).width)
this.maskHeight=parseInt(window.getComputedStyle(this.mask).height)
this.showWidth=this.show.offsetWidth
this.showHeight=this.show.offsetHeight
const bg=window.getComputedStyle(this.magnifier).backgroundSize.split(/\b/)
this.bgWidth=parseInt(bg[0])
this.bgHeight=parseInt(bg[2])
}
Magnifier.prototype.tinkerScale=function(){
// const maskWidth=this.mask.offsetWidth
this.magnifierWidth=this.bgWidth*this.maskWidth/this.showWidth
this.magnifierHeight=this.bgHeight*this.maskHeight/this.showHeight
this.magnifier.style.width=this.magnifierWidth+'px'
this.magnifier.style.height=this.magnifierHeight+'px'
}
Magnifier.prototype.move=function(){
this.show.addEventListener('mousemove',(e)=>{
// this.mask.classList.add('active')
let x=e.offsetX-100
let y=e.offsetY-100
if(x<0) x=0
if(y<0) y=0
if(x>this.showWidth-this.maskWidth) x=this.showWidth-this.maskWidth
if(y>this.showHeight-this.maskHeight) y=this.showHeight-this.maskHeight
this.mask.style.left=x+'px'
this.mask.style.top=y+'px'
console.log(e.offsetX,e.offsetY)
const X=this.magnifierWidth/this.maskWidth*x
const Y=this.magnifierHeight/this.maskHeight*y
this.magnifier.style.backgroundPosition=`-${X}px -${Y}px`
})
}
Magnifier.prototype.bindEvent=function(){
this.list.addEventListener('click',e=>{
console.log(e.target,e.target.nodeName,e.target.nodeType,e.target.nodeValue )
if(e.target.nodeName === 'IMG'){
console.log(this.list.children)
for(let i=0;i<this.list.children.length;++i){
this.list.children[i].classList.remove('active')
}
e.target.parentElement.classList.add('active')
const showImg=e.target.dataset.show
const magnifierImg=e.target.dataset.magnifier
this.show.firstElementChild.src=showImg
this.magnifier.backgroundImage=`url(${ magnifierImg })`
// console.log(this.ps)
// for(let p of this.ps){
// p.classList.remove('active')
// }
// e.target.parentNode.classList.add('active')
// console.log(e.target.parentNode)
}
})
}
Magnifier.prototype.init=function(){
this.getProperty()
this.overOut()
this.tinkerScale()
this.move()
this.bindEvent()
}
images
