其他分享
首页 > 其他分享> > js实现放大镜多种写法

js实现放大镜多种写法

作者:互联网

<!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>
</head>
<style>
    .enlarge{
        width: 400px;
        height: 400px;
        margin: 50px auto;
    }
    .middle{
        width: 400px;
        height: 400px;
        /* border: 3px solid skyblue; */
        position: relative;
    }
    .middle>img{
        width: 100%;
        height: 100%;
    }
    .middle .mask{
        width: 100px;
        height: 100px;
        background-color: rgba(255, 255, 0 , 0.5);
        position: absolute;
        left: 0px;
        top: 0px;
        display: none;
    }
    .middle .mask:hover{
        cursor: move;
    }
    .middle .big{
        width: 400px;
        height: 400px;
        /* border: 3px solid skyblue; */
        position: absolute;
        left: 105%;
        top: 0px;
        overflow: hidden;
        display: none;
    }
    .middle .big img{
        width: 1600px;
        height: 1600px;
        position: absolute;
        left: 0px;
        top: 0px;
    } 
    .small img{
        width: 100px;
        height: 100px;
        margin: 10px 5px;
        border: 3px solid skyblue;
    }
    .small img.active{
        border-color: red;
    }
</style>
<body>
    <div class="enlarge">
        <div class="middle">
            <img src="../4/images/3.JPG" alt="">
            <div class="mask"></div>

            <div class="big">
                <img src="../4/images/3.JPG" alt="">
            </div>
        </div>
        <div class="small">
            <img class="active" src="../4/images/3.JPG" alt="">
            <img src="../4/images/2.jpg" alt="">
        </div>
    </div>
    
</body>
<script>
//获取操作对象
var middleBox = document.querySelector('.middle');
var middleImg = document.querySelector('.middle>img')
var mask= document.querySelector('.mask');
var bigBox = document.querySelector('.middle .big');
var bigImg = document.querySelector('.middle .big>img');
var smallImgs = document.querySelectorAll('.small img');

//给middle盒子绑定事件
middleBox.onmouseover = function() {
    // console.log('鼠标移入成功');
    mask.style.display = 'block';
    bigBox.style.display = 'block';
}
//给middle盒子解绑事件
middleBox.onmouseout = function() {
    // console.log('鼠标已移出');
    mask.style.display = 'none'
    bigBox.style.display = 'none'
}

//获取鼠标移动的位置
middleBox.onmousemove = function() {
    //兼容写法
    var e = e || window.event
    //计算蒙板层的位置
    var l = e.pageX - middleBox.offsetLeft - parseInt(mask.offsetWidth/2)
    var t = e.pageY - middleBox.offsetTop - parseInt(mask.offsetHeight/2)
    //设置边界
    var x = middleBox.offsetWidth - mask.offsetWidth
    var y = middleBox.offsetHeight - mask.offsetHeight
    //图片移动距离
    var imgX,imgY

    if(l <= 0) {
        imgX = 0
        mask.style.left = '0px'
    } else if(l >= x) {
        imgX = x
        mask.style.left = x + 'px'
    } else {
        imgX = l
        mask.style.left = l + 'px'
    }

    if(t <= 0) {
        imgY = 0
        mask.style.top = '0px'
    } else if(t >= x) {
        imgY = x
      mask.style.top = y + 'px' 
    } else {
        imgY = t
        mask.style.top = t + 'px'
    }

    bigImg.style.left = -4*imgX + 'px'
    bigImg.style.top = -4*imgY + 'px'


    //小图切换
    for(let i=0;i<smallImgs.length;i++) {
        //给所有小图片添加点击事件
        smallImgs[i].onclick = function() {
        //切换小图样式
            for(let j=0;j<smallImgs.length;j++) {
                smallImgs[j].className = ''
            }
            
            smallImgs[i].className = 'active'
          
            middleImg.src = bigImg.src = smallImgs[i].src

        }
    }
}

</script>
</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>
</head>
<style>
    .enlarge{
        width: 406px;
        margin: 50px auto;
    }
    .middle{
        width: 400px;
        height: 400px;
        border: 3px solid skyblue;
        position: relative;
    }
    .middle>img{
        width: 400px;
        height: 400px;
    }
    .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: 400px;
        height: 400px;
        border: 1px solid #000;
        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: 100px;
        height: 100px;
        margin: 10px 5px;
        border: 3px solid #000;
    }
    .small img.active{
        border-color: red;
    }
</style>
<body>
<div class="enlarge">
    <div class="middle">
        <img src="../image/3.webp" alt="">
        <div class="mask"></div>
        <div class="big">
            <img src="../image/3.webp" alt="">
        </div>
    </div>
    <div class="small">
        <img class="active" src="../image/3.webp" alt="">
        <img src="../image/1.webp" alt="">
        <img src="../image/9.webp" alt="">
    </div>
</div>
</body>
<script>
//1.创建一个空的构造函数
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].onclick = () => {
            //换小图样式
            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>
</html>

效果:

 

标签:style,width,放大镜,mask,js,middle,var,写法,middleBox
来源: https://www.cnblogs.com/bg618/p/16196318.html