一、多种图片放大镜
1.png
<!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>
.box11{
width: 1200px;
display: flex;
}
.enlarge{
margin-left: 20px;
}
.middle{
width: 352px;
height: 352px;
margin-top: 20px;
border: 1px solid #cccccc;
position: relative;
}
.middle>img{
width: 350px;
height: 350px;
}
.middle .mask{
width: 100px;
height: 100px;
background-color: rgba(255, 255, 0, .6);
position: absolute;
top: 0;
left: 0;
display: none;
}
.middle .mask:hover{
cursor: move;
}
.middle .big{
width: 350px;
height: 350px;
border: 1px solid #cccccc;
position: absolute;
left:105%;
top: 0;
overflow: hidden;
display: none;
}
.middle .big img{
width: 1600px;
height: 1600px;
position: absolute;
top: 0;
left: 0;
}
.small img{
width: 52px;
height: 52px;
margin: 10px 5px;
vertical-align: top;
border: 2px solid transparent;
}
.small img.active{
border-color: red;
}
.small img:hover{
border: 2px solid red;
}
</style>
</head>
<body>
<div class="enlarge">
<div class="middle">
<img src="./image/16.png" alt="">
<div class="mask"></div>
<div class="big">
<img src="./image/16.png" alt="">
</div>
</div>
<div class="small">
<img class="active" src="./image/16.png" alt="">
<img src="./image/17.png" alt="">
<img src="./image/18.png" alt="">
<img src="./image/19.png" alt="">
<img src="./image/20.png" alt="">
</div>
</div>
<script>
//等待网页加载完成，在运行js文件
window.onload = function() {
!function fang(){
function Enlarge(leiming) {
//3.获取标签 - 作为对象属性
this.container = document.querySelector('.'+leiming);
//在指定的大盒子中获取标签元素
this.middleBox = this.container.querySelector('.middle');
this.mask = this.container.querySelector('.mask');
this.bigBox = this.container.querySelector('.big');
this.middleImg = this.container.querySelector('.middle>img');
this.bigImg = this.container.querySelector('.middle .big>img');
this.smallImgs = this.container.querySelectorAll('.small img');
this.init()
}
//4.将事件放在一个方法中
Enlarge.prototype.init = function() {
//点击小图切换中图和大图
for(let i=0;i<this.smallImgs.length;i++) {
this.smallImgs[i].onmouseover = () => {
//换小图样式
for(let j=0;j<this.smallImgs.length;j++) {
this.smallImgs[j].className = ''
}
this.smallImgs[i].className = 'active'
//切换中图和大图
this.bigImg.src = this.middleImg.src = this.smallImgs[i].src
}
}
//鼠标移入显示
this.middleBox.onmouseover = () => {
this.mask.style.display = this.bigBox.style.display = 'block'
//鼠标在中盒子中移动,让遮罩也跟着鼠标移动
this.middleBox.onmousemove = () => {
// console.log(111,this);
var x = window.event.pageX
var y = window.event.pageY
// console.log(x,y);
//计算遮罩的left和top的值
var l = x - this.middleBox.offsetLeft - this.mask.offsetWidth/2 - parseInt(getComputedStyle(this.middleBox)['border-left-width'])
var t = y - this.middleBox.offsetTop - this.mask.offsetHeight/2 - parseInt(getComputedStyle(this.middleBox)['border-top-width'])
//限制最小值和最大值
if(l < 0) {
l = 0
}
if(t < 0) {
t = 0
}
if(l > this.middleBox.clientWidth - this.mask.offsetWidth) {
l = this.middleBox.clientWidth - this.mask.offsetWidth
}
if(t > this.middleBox.clientHeight - this.mask.offsetHeight) {
t = this.middleBox.clientHeight - this.mask.offsetHeight
}
//设置遮罩的let和top的值
this.mask.style.left = l + 'px'
this.mask.style.top = t + 'px'
//调用图片移动的方法
this.bigImgMove(l,t)
}
}
//鼠标移出隐藏
this.middleBox.onmouseout = () => {
this.mask.style.display = this.bigBox.style.display = 'none'
}
}
//大盒子图片移动的方法
Enlarge.prototype.bigImgMove = function(l,t) {
//计算遮罩在中盒子中左边距离占据中盒子的宽度的比例
var percentX = l / this.middleBox.clientWidth
var percentY = t / this.middleBox.clientHeight
//获取大图的宽高
var bigImgWidth = this.bigImg.clientWidth
var bigImgHeight = this.bigImg.clientHeight
//根据比例计算大图应该移动的left和top的距离
var bigLeft = percentX * bigImgWidth
var bigTop = percentY * bigImgHeight
//设置大图的位置
this.bigImg.style.left = -bigLeft + 'px'
this.bigImg.style.top = -bigTop + 'px'
}
//2.new调用
var e = new Enlarge('enlarge')//将放大镜的大盒子范围当做实参传入
}();
}
</script>
</body>
</html>
二、单张图片放大镜
2.png
<!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>
.smallbox{
position: relative;
width: 400px;
height: 600px;
border: 1px solid #ccc;
}
.smallbox .small{
width: 400px;
height: 600px;
}
.mask{
position: absolute;
top: 0;
left: 0;
display: none;
width: 100px;
height: 100px;
background-color: #000 ;
opacity: .5;
}
.smallbox .big{
position: absolute;
left: 410px;
top: 0;
display: none;
width: 500px;
height: 500px;
border: 1px solid #ccc;
overflow: hidden;
}
.big .bigImg{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="smallbox">
<img src="1.jpg" alt="" class="small">
<div class="mask"></div>
<div class="big">
<img src="1.jpg" alt="" class="bigImg">
</div>
</div>
<script>
// 获取元素
var smallbox=document.querySelector('.smallbox');
var mask=document.querySelector('.mask');
var big=document.querySelector('.big');
var maskX=
// 鼠标经过smallbox，遮挡层和big显示
smallbox.addEventListener('mouseover',function(e){
mask.style.display='block';
big.style.display='block';
})
// 鼠标离开smallbox，遮挡层和big隐藏
smallbox.addEventListener('mouseout',function(){
mask.style.display='none';
big.style.display='none';
})
smallbox.addEventListener('mousemove',function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// mask移动的距离
maskX=x - mask.offsetWidth / 2;
maskY=y - mask.offsetHeight / 2;
// 边界判断
maskMaxW = smallbox.offsetWidth - mask.offsetWidth;
maskMaxH = smallbox.offsetHeight - mask.offsetHeight;
if(maskX <= 0){
maskX = 0;
}else if(maskX >= maskMaxW){
maskX = maskMaxW;
}
if(maskY <= 0){
maskY = 0;
}else if(maskY >= maskMaxH){
maskY = maskMaxH;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// 大图片的移动距离 = 遮挡层移动距离 *大图片最大移动距离 / 遮挡层最大移动距离
var bigImg = document.querySelector('.bigImg');
var small = document.querySelector('.small');
// 大图片的最大移动距离
var bigMaxW = bigImg.offsetWidth - big.offsetWidth;
var bigMaxH = bigImg.offsetHeight - big.offsetHeight;
// 大图片的移动距离
var bigW = maskX * bigMaxW / maskMaxW;
var bigH = maskY * bigMaxH / maskMaxH;
// 大图移动
bigImg.style.left = -bigW + 'px';
bigImg.style.top = -bigH + 'px';
// 鼠标移出small隐藏mask和big
if(e.pageX < this.offsetLeft || e.pageX > this.offsetLeft+this.offsetWidth || e.pageY < this.offsetTop || e.pageY > this.offsetTop+this.offsetHeight){
mask.style.display='none';
big.style.display='none';
}
})
</script>
</body>
</html>
