图片放大镜

最新推荐文章于 2024-06-06 09:55:15 发布
最新推荐文章于 2024-06-06 09:55:15 发布
阅读量126 收藏
点赞数
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/myjava_6/article/details/132484160
版权

图片放大镜

此案例代码用到的技术栈有vue2、jquery等
下载安装jQuery的命令如下

npm install jquery

代码如下

<template>
  <div>
    <!-- <h3>放大镜案例</h3> -->

    <!-- 放大镜 -->
    <div class="loupe-box">
      <div class="img-box">
        <img :src="imgUrlValue" alt="图片" />
        <div class="slide"></div>
        <div class="mark"></div>
        <div class="view"></div>
      </div>
      <!-- 图片盒子 -->
      <div class="seamless-warp3">
        <span class="left-arrow" @click="clickLeftArrow"></span>
        <span class="right-arrow" @click="clickRightArrow"></span>

        <div class="slideshow-outer-box">
          <div class="slideshow-box">
            <div
              v-for="(item, index) in slideList"
              class="img-item-box"
              :key="item"
              @mouseover="
                (event, imgUrl) => mouseoverSlideHandler(event, item, index)
              "
            >
              <img style="width: 100%; height: 100%" :src="item" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  data() {
    return {
      slideList: [
        "https://img2.baidu.com/it/u=3147571584,2473606295&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        "https://img13.360buyimg.com/n1/s150x150_jfs/t1/146619/4/38072/146082/64996004F27ab3fcf/438de053a6d14f47.jpg",
        "https://img14.360buyimg.com/n1/s150x150_jfs/t1/45273/11/23686/153723/649960c8Fd950f334/0f2a9a08729c92ea.jpg",
        "https://img13.360buyimg.com/n1/s150x150_jfs/t1/54800/18/24153/237713/64acc183F668e310c/c8e702715b166e70.jpg",
        "https://img13.360buyimg.com/n1/s150x150_jfs/t1/147852/2/34285/219955/648184f7Fee9bd8c3/958a54714beffa0e.jpg",
        "https://img12.360buyimg.com/n1/s150x150_jfs/t1/218622/3/35340/219866/64ccad2bFa48c85d8/e3d667e5c5e84100.jpg",
        "https://img13.360buyimg.com/n1/jfs/t1/107637/3/37127/306072/6419a5b0F8b2c5ca2/89b71bb9fdf05cd1.jpg",
      ],
      // 需要放大的图
      imgUrlValue: "",
      clickLeftNum: 1,
      clickRightNum: 1,
    };
  },
  mounted() {
    this.imgUrlValue = this.slideList[0];
    // 初始化图片容器长度
    $(".slideshow-box").css("width", this.slideList.length * 62 + "px");
    this.loupeInit();
  },
  methods: {
    // 左边箭头
    clickLeftArrow() {
      // 图片视口和图片容器左边到浏览器距离小于等于则禁止点击
      // 进行点击
      if (
        $(".slideshow-outer-box").offset().left <=
        $(".slideshow-box").offset().left
      ) {
        // $('.slideshow-box').css("transform",`translate(${this.clickLeftNum * 62}px, 0px)`)
        // $('.slideshow-box').css("transition",`all 400ms linear 0s`)
        // 进行点击右边箭头样式
        $(".left-arrow").hover(
          function () {
            $(this).css("background-color", "#b9b9b9");
          },
          function () {
            $(this).css("background-color", "#00a0e9");
          }
        );

        return;
      }
      // 进行点击
      else {
        $(".slideshow-box").css(
          "transform",
          `translate(${this.clickLeftNum * 62}px, 0px)`
        );
        $(".slideshow-box").css("transition", `all 400ms linear 0s`);
        $(".right-arrow:hover").css("background-color", "#0F39FA");
        // 禁止点击右边箭头样式  鼠标移入  鼠标移出
        $(".right-arrow").hover(
          function () {
            $(this).css("background-color", "#0f39fa");
          },
          function () {
            $(this).css("background-color", "#00a0e9");
          }
        );
      }

      this.clickLeftNum += 1;
      this.clickRightNum -= 1;
    },
    // 右边箭头
    clickRightArrow() {
      // 总移动的距离小于可视区盒子则可进行点击否则禁止点击
      // if( ($('.slideshow-box').get(0).offsetWidth - this.clickRightNum * 62) >= $('.slideshow-outer-box').get(0).offsetWidth ) {
      // 图片视口和图片容器右边到浏览器距离小于则进行点击
      if (
        $(".slideshow-outer-box").offset().left +
          $(".slideshow-outer-box").outerWidth() <
        $(".slideshow-box").offset().left + $(".slideshow-box").outerWidth()
      ) {
        $(".slideshow-box").css(
          "transform",
          `translate(${this.clickRightNum * -62}px, 0px)`
        );
        $(".slideshow-box").css("transition", `all 400ms linear 0s`);

        // 可进行点击左边样式
        $(".left-arrow").hover(
          function () {
            $(this).css("background-color", "#0f39fa");
          },
          function () {
            $(this).css("background-color", "#00a0e9");
          }
        );
      }
      // 禁止点击
      else {
        // 禁止点击箭头样式  鼠标移入  鼠标移出
        $(".right-arrow").hover(
          function () {
            $(this).css("background-color", "#b9b9b9");
          },
          function () {
            $(this).css("background-color", "#00a0e9");
          }
        );
        return;
      }
      this.clickRightNum += 1;
      this.clickLeftNum -= 1;
    },
    // 鼠标移上图片
    mouseoverSlideHandler(event, imgUrl, index) {
      this.imgUrlValue = imgUrl;
      // 循环排他
      $(".img-item-box").each(function (index1, element) {
        $(element).css("border", "none");
        if (index == index1) {
          $(element).css("border", "1px solid red");
        }
      });
      // 鼠标移上去切换放大镜图片
      $(".big-img").get(
        0
      ).style.background = `url(${this.imgUrlValue}) no-repeat 0 0/cover`;
    },
    // 放大镜操作
    loupeInit() {
      // 容器和容器的宽高
      var box = $(".img-box").get(0);
      var boxW = box.offsetWidth;
      var boxH = box.offsetHeight;

      // 滑块和滑块的宽高
      var slide = $(".slide").get(0);
      var slideW = slide.offsetWidth;
      var slideH = slide.offsetHeight;

      // 初始隐藏滑块和放大镜
      $(".slide").css("display", "none");

      // 设置鼠标移上去显示滑块 移除隐藏滑块
      $(".img-box").hover(
        function () {
          $(".slide").css("display", "block");
          $(".view").css("display", "block");
        },
        function () {
          $(".slide").css("display", "none");
          $(".view").css("display", "none");
        }
      );

      // 获取大的滑块
      var view = $(".view").get(0);
      var viewW = view.offsetWidth; //500
      var viewH = view.offsetHeight; //500

      // 计算比例:  大滑块/小滑块 = 大图片/小图片
      var calc = viewW / slideW;
      // console.log(calc);

      // 根据比例创建大图片
      var bigImg = $("<div>").get(0);
      bigImg.style.width = boxW * calc + "px";
      bigImg.style.height = boxH * calc + "px";
      bigImg.style.background = `url(${this.imgUrlValue}) no-repeat 0 0/cover`;
      bigImg.style.position = "absolute";
      bigImg.className = "big-img";
      view.appendChild(bigImg);
      // 隐藏放大镜
      $(".view").css("display", "none");

      box.onmousemove = function (e) {
        // 鼠标的坐标
        // console.log(e.target, "=>", e.offsetX, e.offsetY);  // 鼠标在大盒子, 鼠标在小盒子

        // 把滑块的中心, 挪动到鼠标的坐标
        var left = e.offsetX - slideW / 2;
        var top = e.offsetY - slideH / 2;

        // 边界控制 left和top能到达的最大值
        var MAX_LEFT = boxW - slideW;
        var MAX_TOP = boxH - slideH;

        // 边界控制
        left = left < 0 ? 0 : left > MAX_LEFT ? MAX_LEFT : left;
        top = top < 0 ? 0 : top > MAX_TOP ? MAX_TOP : top;

        // 黄色滑块移动
        slide.style.left = left + "px";
        slide.style.top = top + "px";

        // view显示的大图片的移动
        bigImg.style.left = -left * calc + "px";
        bigImg.style.top = -top * calc + "px";
      };
    },
  },
};
</script>

<style lang="less" scoped>
.loupe-box {
    // margin: 0 auto;
    margin-left: 100px;
  margin-right: 50px;
  width: 390px;

  .img-box {
    // width: 330px;
    // margin-right: 20px;
    width: 390px;
    height: 390px;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      // z-index: 100;
    }

    // 滑块
    .slide {
      width: 237px;
      height: 237px;
      background-color: #f5cd23;
      opacity: 0.4;

      position: absolute;
      left: 0;
      top: 0;
    }

    // 遮罩层
    .mark {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: transparent;
    }

    // 放大视口
    .view {
      z-index: 100;
      width: 500px;
      height: 500px;
      // float: left;
      position: absolute;
      left: 249px;
      top: 0px;
      outline: 1px solid #ccc;
      margin-left: 150px;
      // position: relative;
      overflow: hidden;
    }
  }

  .seamless-warp3 {
    // overflow: hidden;
    height: 54px;
    width: 100%;
    // width: 62px * 5;
    margin: 0 auto;
    margin-top: 24px;
    position: relative;

    .slideshow-outer-box {
      overflow: hidden;
      height: 54px;
      width: 62px * 5;
      margin: 0 auto;
    }

    .left-arrow,
    .right-arrow {
      // position: relative;
      position: absolute;
      z-index: 1000;
      display: inline-block;
      // width: 40px;
      // height: 40px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #00a0e9;
      cursor: pointer;

      &:hover {
        background-color: #0f39fa;
      }

      &::before {
        position: absolute;
        content: "";
        /* width: 16px;
                        height: 16px;
                        top: 12px;
                        left: 15px; */

        width: 10px;
        height: 10px;
        top: 10px;
        left: 12px;
        border: 2px solid #fff;
      }
    }

    .left-arrow {
      top: calc(50% - 15px);
      left: -4px;
    }

    .right-arrow {
      top: calc(50% - 15px);
      right: 0px;
    }

    .left-arrow::before {
      border-right: 0;
      border-bottom: 0;
      transform: rotate(-45deg);
    }

    .right-arrow::before {
      position: absolute;
      border-left: 0;
      border-top: 0;
      left: 9px;
      transform: rotate(-45deg);
    }

    .slideshow-box {
      width: 62px * 10;
      height: 54px;
      .img-item-box {
        float: left;
        width: 54px;
        height: 54px;
        line-height: 54px;
        background-color: #999;
        color: #fff;
        text-align: center;
        font-size: 14px;
        margin-right: 8px;
      }
      .img-item-box:hover {
        border: 1px solid red;
      }
    }
  }
}
</style>

案例效果如图下

在这里插入图片描述

myjava_6
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
图片放大镜效果代码
10-30
图片放大镜效果代码 图片放大镜效果代码是一种基于JavaScript技术实现的图片展示效果，主要用于在网页中展示图片时，提供一个放大镜的功能，让用户可以更方便地查看图片的细节。 从技术角度来说，图片放大镜效果...
react仿淘宝图片放大镜效果
04-23
使用react写一个仿图片放大镜效果使用react写一个仿图片放大镜效果
html实现商品图片放大镜，html图片放大镜预览
weixin_43992507的博客
08-10 1168
html实现商品图片放大镜，html图片放大镜预览
php 放大镜,图片放大镜效果实战总结
weixin_31642733的博客
04-08 225
摘要：本次实战主要完成了图片放大镜的效果，通过定义原始图片，放大镜，放大后的图片，然后设置放大后的图片为原始图片的3倍，通过鼠标移上显示放大后的图片，并通过位移计算当前放大镜的位置，设置放大后图片的偏移量，来显示放大后的图片效果。代码如下：html>本次实战主要完成了图片放大镜的效果，通过定义原始图片，放大镜，放大后的图片，然后设置放大后的图片为原始图片的3倍，通过鼠标移上显示放大后的图片，...
js实现图片放大镜效果——简单方法
yehaocheng520的博客
07-31 7355
之前写过一篇关于电商项目商品详情页面的图片放大镜效果：电商项目商品详情页的图片放大效果实现：https://blog.csdn.net/yehaocheng520/article/details/119003274?spm=1001.2014.3001.5501 当时是在vue项目中使用的，其实跟在js中原理也是一样的。 实现图片放大镜效果的重点就是下面的这张图了： 上面的方法中，右侧图片，为了实现放大，使用的是background背景图片的设置原理，给background-size设置大于1的参数，就
使用jQuery实现图片放大镜效果
热门推荐
hanhf的专栏
07-26 1万+
使用jQuery实现图片放大镜效果 　　在淘宝上购物时，经常可以看到图片放大镜效果，如下图所示： 　　下面给出上述效果的jQuery实现代码，一切尽在代码注释中： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt
html图片放大镜案例,放大镜案例.html
weixin_34348050的博客
06-05 228
Document* {margin: 0;padding: 0;}.box {width: 350px;height: 350px;margin: 100px;border: 1px solid #ccc;position: relative;}.big {width: 400px;height: 400px;position: absolute;top: 0;left: 360px;border...
Web前端实现一个图片放大镜
jimojianghu的专栏
12-06 2978
基本完成了一个可以非固定尺寸、动态加载图片的放大镜功能。动态加载图片，可以不用考虑图片的像素宽高，任意尺寸的图片都可以完整放大，缩略小图和预览大图也可以是同一张图片。
jQuery图片放大镜效果
qq_42400124的博客
06-24 1138
jQuery图片放大镜效果 演示效果： HTML代码： 在这里插入代码片
vue项目——商品详情页面图片放大镜效果实现(完成)
yehaocheng520的博客
07-22 5618
昨天在做商品详情页面时，遇到一个需求，就是图片放大镜效果。在图片上鼠标划过时，右侧出现一个大图，用于展示鼠标移过的区域，也就是图片放大镜效果。 效果图基本类似如下： 我之前有篇文章js实现图片放大镜效果：https://blog.csdn.net/yehaocheng520/article/details/115278622?spm=1001.2014.3001.5501 当时是用js实现的效果，因此现在要把代码嫁接到vue创建的项目中。 html部分代码： <div class="big-img
vue中图片放大镜功能
QLF19的博客
07-11 876
selector.bgLeft = halfWidth - (halfWidth + x) * scale // 选择器图片的坐标位置。1、在vue项目中不可避免的会做一个图片放大镜的弄能（例如、商城、店铺等），今天同事问了这个功能恰好以前写过，因此记录一下。let x = pageX - absoluteLeft // 选择器的x坐标 相对于图片。let y = pageY - absoluteTop // 选择器的y坐标。this.imgLoaded() //防止img位置变化。// 位置不变不更新。
简单实用jQuery图片放大镜效果
06-15
简单实用jQuery图片放大镜效果
C# winform窗体图片放大镜
06-05
使用c#编写winform窗体图片放大镜功能，该实例中图片可以随意放大倍数
JS图片放大镜
03-14
原生javascript图片放大镜，苏宁商城图片放大镜效果，放大
vue3 vue-draggable-next 实现拖拽穿梭框效果
游九尘的博客
06-01 398
【代码】vue3 vue-draggable-next 实现拖拽穿梭框效果。
vue 弹出框组件重复打开时，资源重新加载
最新发布
洋葱的博客
06-06 93
2、v-if和:visible.sync同时使用。新增或者编辑内容使用同一个弹出框，如何使数据可以重新加载？1、绑定时间戳，有副作用，屏幕会闪烁一下。
vue-标签选择
zw899004的专栏
06-01 721
vue-标签选择
对于vsc中的vue命令 vue.json
F2297468264的博客
05-31 491
打开vsc 然后在左下角有一个设置。将此代码粘贴 （我的不一定都适合）3.输入 vue.json回车。2.点击用户代码片段。
vue图片放大镜
05-31
Vue图片放大镜可以通过以下步骤实现： 1. 在Vue组件中引入所需的CSS和JS文件，例如：jquery、magnify等； 2. 在Vue组件中定义需要放大的图片，例如： ```html ``` 3. 在Vue组件的mounted()钩子函数中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值