面向对象放大镜

最新推荐文章于 2022-06-05 18:01:23 发布

F2E_YoverL

最新推荐文章于 2022-06-05 18:01:23 发布

阅读量213

点赞数

分类专栏： JS的学习

本文链接：https://blog.csdn.net/long_yy_/article/details/115739217

版权

JS的学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

html代码：

<style>
    .enlarge{
        width: 400px;
        height: 502px;
        border: 1px solid #000;
        position: relative;
    }
    .middle{
        width: 400px;
        height: 400px;
        border-bottom: 1px solid #000;
        position: relative;
    }
    .middle>img{
        width: 100%;
        height: 100%;
    }
    .middle .mark{
        width: 100px;
        height: 100px;
        background-color: rgba(255, 255, 0, .7);
        position: absolute;
        left: 0;
        top: 0;
        display: none;
    }
    .middle .mark:hover{
        cursor: move;
    }
    .big{
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        position: absolute;
        top: 0;
        left: 101%;
        overflow: hidden;
        display: none;
    }
    .big>img{
        width: 400%;
        height: 400%;
        position: absolute;
    }
    .small{
        width: 400px;
        height: 100px;
        padding: 20px 10px;
    }
    .small>img{
        width: 50px;
        height: 50px;
        margin-left: 10px;
        border: 3px solid royalblue;
    }
    .small>img.active{
        border: 3px solid red;
    }
</style>
<body>
<div class="enlarge">
    <div class="middle">
        <div class="mark"></div>
        <img src="images/5.jpg" alt="">
    </div>
    <div class="big">
        <img src="images/5.jpg" alt="">
    </div>
    <div class="small">
        <img class="active" src="images/5.jpg" alt="">
        <img src="images/6.jpg" alt="">
        <img src="images/7.jpg" alt="">
        <img src="images/8.jpg" alt="">
    </div>
</div>
</body>

JS代码：有注释，助于理解

<script>
//放大镜中有两大比例
/*
中盒子的宽高/遮罩层的宽高 = 大图的宽高/大盒子的宽高
    //大图的移动距离比例计算：
遮罩层移动过的距离/中盒子的宽高 = 大图移动过的距离/大图的宽高
注意：大图的移动距离是负值
*/
function Enlarge(classname){
    //获取大盒子
    this.box = document.querySelector('.'+classname)
    //根据大盒子获取所有要操作的元素
    this.middlebox = document.querySelector('.middle')
    this.mark = this.middlebox.querySelector('.mark')
    this.middleimg = this.middlebox.querySelector('.middle img')
    this.bigbox = this.box.querySelector('.big')
    this.bigimg = this.box.querySelector('.big img')
    this.smallbox = this.box.querySelector('.small')
    this.smallimgs = this.box.querySelectorAll('.small img')
}
Enlarge.prototype.init = function(){
    //从简单效果的做起，在一点点的往上写
    //smallimgs绑定事件 - tab切换
    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'
            //获取smallimgs的图片路径，设置给middleimg图片及bigimg图片
            this.middleimg.src = this.bigimg.src = this.smallimgs[i].src
        }
    }
    //中盒子鼠标移入事件，遮罩层跟随鼠标移动，mark及bigbox显示
    this.middlebox.onmouseover = ()=>{
        //mark及bigbox显示
        this.mark.style.display = this.bigbox.style.display = 'block'
        //实现则罩层的移动
        this.middlebox.onmousemove = e=>{
            var e = e || window.event
            //获取鼠标在浏览器上的位置
            var ox = e.pageX
            var oy = e.pageY
            //计算遮罩层的left top
            //left = 鼠标在浏览器位置的值 - 中盒子在浏览器的left值 - 中盒子及遮罩层的边框 - 遮罩层宽度的一半，top同理
            var left = ox-this.middlebox.offsetLeft-1-this.mark.offsetWidth/2
            var top = oy-this.middlebox.offsetTop-1-this.mark.offsetHeight/2
            //判断遮罩层的left，top界限值
            if(left<=0){
                left = 0
            }
            //left的最大限制 = 中盒子的宽度 - 遮罩层的宽度，top同理
            if(left>=this.middlebox.clientWidth - this.mark.offsetWidth){
                left = this.middlebox.clientWidth - this.mark.offsetWidth
            }
            if(top>=this.middlebox.clientHeight - this.mark.offsetHeight){
                top = this.middlebox.clientHeight - this.mark.offsetHeight
            }
            if(top<=0){
                top = 0
            }  
            //left，top值设置给则罩层
            this.mark.style.left = left +'px'
            this.mark.style.top = top +'px'
            //根据遮罩层的移动让大图也移动
            //计算大图需要移动的距离 - left top 按比例计算
            /*比例
            遮罩层移动过的距离/中盒子的宽高 = 大图移动的距离/大图的宽高
            */
            var bgleft = left/this.middlebox.offsetWidth*this.bigimg.offsetWidth
            var bgtop = top/this.middlebox.offsetHeight*this.bigimg.offsetHeight
            //设置给大图
            this.bigimg.style.left = -bgleft +'px'
            this.bigimg.style.top = -bgtop +'px'
        }
    }
    this.middlebox.onmouseout = ()=>{
        this.bigbox.style.display = this.mark.style.display = 'none'
    }
}
var enp = new Enlarge('enlarge');
enp.init()
</script>