JS防唯品会放大镜效果

最新推荐文章于 2024-05-17 13:52:13 发布

蛋黄派i

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量52

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2201_75702085/article/details/133974519

版权

前言

先说一个选择器封装函数:

function $1(selector, parent) {
  if (selector.charAt(0) == "#") {
    return document.getElementById(selector.substring(1));
  } else if (selector.charAt(0) == ".") {
    return document.getElementsByClassName(selector.substring(1));
  } else {
    parent = parent || document;
    return parent.getElementsByTagName(selector);
  }
}

使用方法:

const item = $1(".item")[0];
const screen = $1("#screen");

整体思想

鼠标移到外部大盒子上让装大图的盒子显示出来，小盒子的样式改变
鼠标在装大图盒子上移动时实现放大效果
- 获取鼠标在屏幕上的位置（pageX和pageY）
- 获取放大镜在屏幕上的位置（让鼠标在发大镜的中间位置所以要减去放大镜宽度的一半）
- 让发大镜在固定的位置内移动（装大图盒子的内部）
- 将放大镜的移动距离赋值给发大镜的top和left值
- 确定放大镜的移动距离和放大图片的移动距离的关系实现放大效果
  - screen的移动距离/screen的最大移动距离 = 背景图的移动距离/背景图的最大移动距离
在点击tab栏时让每一个背景都可以放大，将当前tab的index值当做参数传给magnifier函数，要让刚开始打开页面时的盒子有放大效果，要给magnifier函数传入参数0，在外部调用
鼠标离开外部大盒子时让装大图的盒子隐藏

HTML:

<div class="view">
        <div class="big">
            <div class="big-item" style="display: block;">
                <div class="bigLess">
                    <img src=" " alt="">
                </div>
                <div class="bigMore">
                    <img src=" " alt="" class="bigMoreImg">
                    <div class="screen"></div>
                </div>
            </div>
            <div class="big-item">
                <div class="bigLess">
                    <img src=" " alt="">
                </div>
                <div class="bigMore">
                    <img src=" " alt="" class="bigMoreImg">
                    <div class="screen"></div>
                </div>
            </div>
            <div class="big-item">
                <div class="bigLess">
                    <img src=" " alt="">
                </div>
                <div class="bigMore">
                    <img src=" " alt="" class="bigMoreImg">
                    <div class="screen"></div>
                </div>
            </div>
            <div class="big-item">
                <div class="bigLess">
                    <img src=" " alt="">
                </div>
                <div class="bigMore">
                    <img src=" " alt="" class="bigMoreImg">
                    <div class="screen"></div>
                </div>
            </div>
            <div class="big-item">
                <div class="bigLess">
                    <img src=" " alt="">
                </div>
                <div class="bigMore">
                    <img src=" " alt="" class="bigMoreImg">
                    <div class="screen"></div>
                </div>
            </div>
        </div>

        <div class="small">
            <div class="hid">
                <div class="small-item"><img src=" " alt=""></div>
                <div class="small-item"><img src=" " alt=""></div>
                <div class="small-item"><img src=" " alt=""></div>
                <div class="small-item"><img src=" " alt=""></div>
                <div class="small-item"><img src=" " alt=""></div>
            </div>
        </div>
    </div>

CSS:

* {
  padding: 0;
  margin: 0;
}

.view {
  width: 420px;
}

.view .big {
  width: 420px;
  height: 420px;
  margin-bottom: 10px;
  position: relative;
}

.view .big-item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  cursor: crosshair;
}

.view .big-item .bigLess {
  width: 420px;
  height: 420px;
}

.view .big-item .bigLess img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

.view .big-item .screen {
  width: 100px;
  height: 100px;
  position: absolute;
  border-radius: 12px;
  top: 0;
  left: 0;
}

.view .big-item .bigMore {
  width: 420px;
  height: 420px;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  overflow: hidden;
  border-radius: 12px;
}

.view .big-item .bigMore .bigMoreImg {
  position: absolute;
  width: 200%;
  height: 200%;
}

.small {
  width: 420px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.small .small-item {
  width: 62px;
  height: 62px;
  margin-right: 7px;
  border: 1px solid #eee;
  border-radius: 6px;
}

.small .small-item img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
}

.small .small-item:hover {
  border: 1px solid #f8305b;
}

.hid {
  width: 353px;
  overflow: hidden;
  display: flex;
}

JS:

var bigBox = $1(".big")[0];
var smallItem = $1(".small-item");
var bigItem = $1(".big-item");
var bigMore = $1(".bigMore");
var screen = $1(".screen");
var pic = $1(".bigMoreImg");
// 底部tab栏切换
for (var i = 0; i < smallItem.length; i++) {
  smallItem[i].index = i;
  smallItem[i].onmouseover = function () {
    this.style.borderColor = "#f10180";
  };
  smallItem[i].onmouseout = function () {
    this.style.borderColor = "#eee";
  };
  smallItem[i].onclick = function () {
    var index = this.index;
    for (var i = 0; i < smallItem.length; i++) {
      bigItem[i].style.display = "none";
      smallItem[i].style.borderColor = "#eee";
    }
    bigItem[this.index].style.display = "block";
    smallItem[this.index].style.borderColor = "#f10180";
    magnifier(index);
  };
}
// 放大镜效果
magnifier(0);
function magnifier(index) {
  bigBox.onmouseover = function () {
    bigMore[index].style.display = "block";
    smallItem[index].style.borderColor = "#eee";
  };
  bigMore[index].onmousemove = function (e) {
    var e = event || window.event;
    // 获取鼠标的位置
    var X = e.pageX || e.clientX + document.documentElement.scrollLeft;
    var Y = e.pageY || e.clientY + document.documentElement.scrollTop;
    // 获取screen的位置
    var screenX = X - bigBox.offsetLeft - screen[index].offsetWidth / 2;
    var screenY = Y - bigBox.offsetTop - screen[index].offsetHeight / 2;
    // 确定screen的移动范围
    screenX = screenX < 0 ? 0 : screenX;
    screenY = screenY < 0 ? 0 : screenY;
    var screenXMax = bigBox.offsetWidth - screen[index].offsetWidth;
    var screenYMax = bigBox.offsetHeight - screen[index].offsetHeight;
    screenX = screenX > screenXMax ? screenXMax : screenX;
    screenY = screenY > screenYMax ? screenYMax : screenY;
    //确定移动距离
    screen[index].style.left = screenX + "px";
    screen[index].style.top = screenY + "px";
    //确定背景图片的移动距离
    // screen的移动距离/screen的最大移动距离 = 背景图的移动距离/背景图的最大移动距离
    var picXMax = pic[index].offsetWidth - bigBox.offsetWidth;
    var picYMax = pic[index].offsetHeight - bigBox.offsetHeight;
    pic[index].style.top = (-screenY / screenYMax) * picYMax + "px";
    pic[index].style.left = (-screenX / screenXMax) * picXMax + "px";
  };
  bigBox.onmouseout = function () {
    bigMore[index].style.display = "none";
  };
}

//获取ID名和tagName
function $1(selector, parent) {
  if (selector.charAt(0) == "#") {
    return document.getElementById(selector.substring(1));
  } else if (selector.charAt(0) == ".") {
    return document.getElementsByClassName(selector.substring(1));
  } else {
    parent = parent || document;
    return parent.getElementsByTagName(selector);
  }
}