用js实现放大镜效果

最新推荐文章于 2023-08-30 23:12:02 发布

justbe_myself

最新推荐文章于 2023-08-30 23:12:02 发布

阅读量1.1k

点赞数 1

文章标签： javascript css html es6 html5

本文链接：https://blog.csdn.net/justbe_myself/article/details/104888066

版权

放大镜效果在电商网站中经常被使用到，下面我们就用js来实现它吧

1.首先我们得先实现放大镜效果所需要的布局和css样式，当然，这里我们用大中小一套图来实现放大镜的效果，平时的话一张大图也能实现且实现起来更加的简易，下面是css的代码：

<style>
        *{
            margin: 0;padding: 0;
        }
    .box{
        width: 400px;
        height: 500px;
        margin: 50px 100px;
    }
    .middle{
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        position: relative;<!-- 这里我们给中等盒子设置定位 -->
    }
    .middle img{
        width: 400px;
        height: 400px;
    }
    ol{
        width: 400px;
        height: 100px;
        display: flex;<!-- 让它形成弹性盒布局简单点 -->
        justify-content: flex-start;
        align-items: center;
        list-style: none;
    }
    ol li {
        border: 1px solid blue;
        width: 50px;
        height: 50px;
        margin: 0 5px;
    }
    ol li image{
        width: 50px;
        height: 50px;
    }
    .small{
        width: 100px;
        height: 100px;
        background: rgba(255, 255, 0, 0.5);
        position: absolute;
        left: 0;
        top: 0;
        display: none;<!-- 先让小盒子隐藏 -->
        cursor: move;
    }
    .big{
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        position: absolute;
        left: 105%;
        top: 0;
        background-image: url(images/big1.jpg);
        background-size: 1600px 1600px;
        display: none;<!--大盒子也隐藏  -->
    }   
    .active{
        border: 1px solid red;
    }
    </style>

注意：让中等盒子定位作为参考，让大盒子和小盒子进行绝对定位，设置好图片的大小，特别我们这里大盒子用的是背景图，如果一张图片直接用img就可以了

2.下面是结构的布局

<body>
    <div class="box">
        <div class="middle"><img src="images/middle1.jpg" alt="">
        <div class="small"></div>
        <div class="big"></div>
        </div>
        
        <ol>
        <li class="active"><a href="javascript:;"><img src="images/small1.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="images/small2.jpg" alt=""></a></li> 
        </ol>   
    </div>
</body>

注意：大盒子和小盒子都放入中等盒子内部进行定位

3.下面是js代码:这里我们用的是面对对象的思想，因为可以更好的进行封装

<script>
function Fd(className){
    this.box=document.querySelector("."+className)//获取相应的元素
    this.middle=document.querySelector(".middle");
    this.olis=document.querySelectorAll("ol li");
    this.big=document.querySelector(".big");
    this.small=document.querySelector(".small");
    this.middle.img=document.querySelector(".middle img")
    this.middle.onmouseover=()=>this.over();//鼠标移入事件
    this.middle.onmouseout=()=>this.out();//鼠标移出
    var _this=this;
    for(var i=0;i<this.olis.length;i++){
        this.olis[i].onclick=function(){
        _this.click(this)//鼠标点击小图片切换相应的中图和大图
        }
    }
}
Fd.prototype.over=function(){
    this.small.style.display="block";//移入时小盒子大盒子显示
    this.big.style.display="block"
    var _this=this;//用_this将this接受起来
    this.middle.onmousemove=function(e){//传入e
        var e=e||window.event;//获取事件对象
        var x=e.pageX;//获取光标到html左侧的距离
        var y=e.pageY;//获取光标到html顶侧的距离
        var l=x-_this.box.offsetLeft-_this.small.clientWidth/2;//获取光标x轴移动的距离
        var h=y-_this.box.offsetTop-_this.small.clientHeight/2;//获取光标移到y轴的距离
        if(l<=0){
            l=0
        }else if(l>=this.clientWidth-_this.small.clientWidth){
            l=this.clientWidth-_this.small.clientWidth;
        }
        if(h<=0){
            h=0
        }else if(h>=this.clientHeight-_this.small.clientHeight){
            h=this.clientHeight-_this.small.clientHeight
        }//限制光标移动不超过大盒子范围
        _this.small.style.left=l+"px";
        _this.small.style.top=h+"px";
        _this.da(l,h)//设置大盒子在小盒子移动时相应的比例变化
    }
}
Fd.prototype.da=function(l,h){//这边要传入参数l,h
var prew=l/this.middle.clientWidth;//x轴的比例
var style=window.getComputedStyle(this.big).backgroundSize;//获取大盒子背景图的大小，但是带单位
var bigw=parseInt(style.split(" ")[0]);//得出width并转为number型
var bigl=prew*bigw;//算出大盒子相应比例

var preh=h/this.middle.clientHeight;//y轴的比列
var bigh=parseInt(style.split(" ")[1]);//
var bigt=preh*bigh;
this.big.style.backgroundPosition=`-${bigl}px -${bigt}px`;//设置大盒子背景图的位置
}
Fd.prototype.out=function(){
    this.small.style.display="none";//移出时让它们消失
    this.big.style.display="none"
}
Fd.prototype.click=function(ele){//传入参数
    for(var i=0;i<this.olis.length;i++){
        this.olis[i].className="";
    }
    ele.className="active";//点击小盒子相应的边框的变化
    var smallimg=ele.firstChild.firstChild;//获取到小图片
    var smallimgsrc=smallimg.getAttribute("src");//获取到小图片的src
    var index=smallimgsrc.lastIndexOf(".");//获取到.后面的
    var slice=smallimgsrc.slice(index-1);//获取到包括.后面的
    var middlesrc="images/middle"+slice;//给中等盒子设置src
    this.middle.img.setAttribute("src",middlesrc);//添加src
    var bigsrc="images/big"+slice;
    this.big.style.backgroundImage="url("+bigsrc+")";//注意是背景图
}
var fd=new Fd("box");//传入box
</script>

这样我们就实现放大镜效果啦

特别注意：
1.光标移动的距离是光标到html x轴的距离减去大盒子到html x轴的距离减去自身宽度的1/2；
2.小盒子的移动的范围左侧顶侧最小为0；右下角则为middle盒子自身的宽高减去小盒子自身的宽高；
3.当然用一套图就是要截取小图对应路径（.）后面的数字包括点赋予相应的中大图，如果用一张图做的话就直接this.middleImg.src = this.bigImg.src = ele.src就行了
4.小盒子在中等盒子移动的距离/中等盒子的相应的高度和宽度对应上背景图在大盒子上的位置关系则能实现相应的放大效果