使用面向对象-商品详情页的商品放大镜功能

最新推荐文章于 2022-10-09 18:22:57 发布

爱篮球的程序猿

最新推荐文章于 2022-10-09 18:22:57 发布

阅读量373

点赞数

文章标签： html5 css javascript es6

本文链接：https://blog.csdn.net/LPKJJSHSSB/article/details/105917169

版权

在做放大镜的效果时，我们应该有一定的想象力，其实并不是将图片放大，而是当鼠标移动到小图片的位置时，大图片移动的位置是小图片比上大图片然后再被小图片移动距离除，就能得出大图片的距离，从而达到放大效果
自己做的这个仅供大家参考，也有自己不太对的地方，还望大神指点，谢谢。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
  </head>
  <style>
      *{
          margin: 0;
          padding: 0;
      }
      .clear::after{
          content: "";
          clear: both;
          display: block;
      }
      .main{
          width: 600px;
          height: 600px;
          margin: 20px auto;
      }
      .box{
          width: 400px;
          height: 400px;
          position: relative;
          cursor: move;
          border: 1px solid #ccc;
      }
      .box h2{
          width: 100%;
          height: 100%;
          border: 1px solid red;
          display: none;
      }
      .box .mask{
          width: 200px;
          height: 200px;
          background-color: #fede4f;
          opacity: .5;
          display: none;
          position: absolute;
          left: 0;
          top: 0;
      }
      .box .bigbox{
          width: 400px;
          height: 400px;
          border: 1px solid #ccc;
          overflow: hidden;
          position: absolute;
          left: 420px;
          top: 0px;
          display: none;
      }
      .box .bigbox img{
        position: absolute;
        left: 0;
        top: 0;
      }
      .list{
          width: 400px;
          list-style: none;
          margin-top: 20px;
      }
      .list li{
          width: 50px;
          height: 50px;
          float: left;
          margin-right: 10px;
          cursor: pointer;
          border: 2px solid transparent;
      }
      .list .show{
        border: 2px solid #fc3604;
      }
      .box .active{
          display: block;
      }
  </style>
  <body>
      <div class="main">
        <div class="box">
            <h2 class="active"><img src="./images/1.jpg" alt=""></h2>
            <div class="mask"></div>
            <div class="bigbox">
                <img src="./images/big1.jpg" alt="" class="">
            </div>
        </div>
        <ul class="list clear">
            <li class="show"><img src="./images/small1.jpg"  alt=""></li>
            <li><img src="./images/small2.jpg"  alt=""></li>
            <li><img src="./images/small3.jpg"  alt=""></li>
            <li><img src="./images/small4.jpg"  alt=""></li>
            <li><img src="./images/small5.jpg"  alt=""></li>
        </ul>
    </div>
    <script>
        class Magnifier{
            constructor(ele,imgarr){
                this.ele = ele;
                this.imgarr = imgarr;
                this.box = this.ele.querySelector('.box');
                this.mask = this.ele.querySelector('.mask');
                this.bigbox = this.ele.querySelector('.bigbox');
                this.img = this.ele.querySelector('.bigbox img');
                this.ul = this.ele.querySelectorAll('.list li');
                this.h2 = this.ele.querySelector('.box h2 img');
            }
            init(){
                this.Clickbox();
                this.Move();
                this.MoveLi();
            }
            Clickbox(){
                this.box.onmouseenter = ()=>{
                    this.mask.style.display = 'block';
                    this.bigbox.style.display = 'block';
                }
                this.box.onmouseleave = ()=>{
                    this.mask.style.display = 'none';
                    this.bigbox.style.display = 'none';
                }
            }
            Move(){
                this.box.onmousemove = (e)=>{
                    let maskX = (e.pageX-this.box.offsetLeft-this.box.clientLeft-this.mask.clientWidth/2);
                    let maskY = (e.pageY-this.box.offsetTop-this.box.clientTop-this.mask.clientHeight/2);
                    if(maskX < 0){
                        maskX = 0;
                    }else if(maskX>(this.box.clientWidth-this.mask.clientWidth)){
                        maskX = this.box.clientWidth-this.mask.clientWidth;
                    }
                    if(maskY<0){
                        maskY = 0;
                    }else if(maskY>(this.box.clientHeight-this.mask.clientHeight)){
                        maskY = this.box.clientHeight-this.mask.clientHeight;
                    }
                    this.mask.style.left = maskX + 'px';
                    this.mask.style.top = maskY + 'px';
                    this.img.style.left = -(maskX*this.bigbox.offsetWidth/this.mask.offsetWidth) + 'px';
                    this.img.style.top = -(maskY*this.bigbox.offsetHeight/this.mask.offsetHeight) + 'px';
                }
            }
            MoveLi(){
                this.ul.forEach((v,k)=>{
                    v.addEventListener('mouseenter',()=>{
                        this.ul.forEach(function(val,key){
                            val.className = '';
                        })
                        v.className = 'show';
                        this.h2.src = this.imgarr[k].size;
                        this.img.src = this.imgarr[k].big;
                    })
                });
            }
        }
        
        const arr = [
            {big:'./images/big1.jpg',size:'./images/1.jpg',small:'./images/small1.jpg'},
            {big:'./images/big2.jpg',size:'./images/2.jpg',small:'./images/small2.jpg'},
            {big:'./images/big3.jpg',size:'./images/3.jpg',small:'./images/small3.jpg'},
            {big:'./images/big4.jpg',size:'./images/4.jpg',small:'./images/small4.jpg'},
            {big:'./images/big5.jpg',size:'./images/5.jpg',small:'./images/small5.jpg'}
        ]
        let main = document.querySelector('.main');
        const obj = new Magnifier(main,arr);
        obj.init();
    </script>
  </body>
</html>

爱篮球的程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用面向对象-商品详情页的商品放大镜功能

在做放大镜的效果时，我们应该有一定的想象力，其实并不是将图片放大，而是当鼠标移动到小图片的位置时，大图片移动的位置是小图片比上大图片然后再被小图片移动距离除，就能得出大图片的距离，从而达到放大效果自己做的这个仅供大家参考，也有自己不太对的地方，还望大神指点，谢谢。<!DOCTYPE html><html lang="en"> <head> &l...
复制链接

扫一扫