✨ feat: 新增测试图片放大镜功能

hookehuyr
Commit 6333b9a88a1a66e7378dbaa9ef9d036d9a9db76f 6333b9a8 1 parent efb6e9ea
Showing 4 changed files with 116 additions and 5 deletions
package.json
src/components/hagerCarousel.vue
src/views/product/detail.vue
yarn.lock
--- a/package.json
View file @6333b9a
+++ b/package.json
View file @6333b9a
@@ -25,6 +25,7 @@
     "element-ui": "^2.15.14",
     "jquery": "^3.7.1",
     "mui-player": "^1.8.1",
+    "object-fit-images": "^3.2.4",
     "sass": "1.55.0",
     "swiper": "5",
     "vue": "2.7.13",
--- a/src/components/hagerCarousel.vue
View file @6333b9a
+++ b/src/components/hagerCarousel.vue
View file @6333b9a
 <!--
  * @Date: 2024-09-27 19:49:03
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-28 15:47:54
+ * @LastEditTime: 2024-11-01 08:20:35
  * @FilePath: /hager/src/components/hagerCarousel.vue
  * @Description: 文件描述
 -->
@@ -34,8 +34,54 @@
         <el-col :span="20">
           <!-- 右边大图区域 -->
           <div class="main-image" :class="{ 'fade-out': isTransitioning, 'fade-in': !isTransitioning }" :style="{ backgroundImage: `url(${images[selectedImage]})`}">
-            <!-- <img :src="images[selectedImage]" alt="main image"> -->
           </div>
+          <!--<div class="ImageMagnifier">
+            <div @mouseover="handOver" @mousemove.stop="handMove" @mouseout="handOut">
+              <div ref="img" class="main-image" :class="{ 'fade-out': isTransitioning, 'fade-in': !isTransitioning }" :style="{ backgroundImage: `url(${images[selectedImage]})`}"></div>
+              <!~~ 放大效果 ~~>
+              <!~~ 遮罩层 ~~>
+              <div
+                v-show="showMask"
+                class="magnifier-box"
+                :style="{
+                  width: magnifierConfigs.width + 'px',
+                  height: magnifierConfigs.height + 'px',
+                  opacity:magnifierConfigs.opacity,
+                  top:magnifierConfigs.top+ 'px',
+                  left:magnifierConfigs.left+ 'px',
+                }"
+              />
+              <!~~ 放大图 ~~>
+              <div
+                v-show="showMask"
+                class="big-box"
+                :style="{
+                  width: bigConfigs.width + 'px',
+                  height: bigConfigs.height + 'px',
+                  top:bigConfigs.top+'px',
+                  left:bigConfigs.left+'px'
+                }"
+              >
+                <div
+                  class="image"
+                  :style="{
+                    width: bigConfigs.width + 'px',
+                    height: bigConfigs.height + 'px',
+                    transform: bigImageConfigs.transformImage
+                  }"
+                >
+                  <img
+                    :style="{
+                      width: bigImageConfigs.width + 'px',
+                      height:bigImageConfigs.height+'px'
+                    }"
+                    :src="images[selectedImage]"
+                    alt="图片不见了"
+                  >
+                </div>
+              </div>
+            </div>
+          </div>-->
         </el-col>
       </el-row>
@@ -61,6 +107,26 @@ export default {
       startIndex: 0,    // 当前显示的缩略图起始索引
       thumbnailsToShow: 3, // 每次显示4个缩略图
       isTransitioning: false, // 控制大图的切换动画
+      // 配置
+      magnifierConfigs: { // 遮罩层
+        width: 80,
+        height: 80,
+        opacity: 0.3,
+        top: 0,
+        left: 0
+      },
+      bigConfigs: { // 放大的盒子
+        width: 200,
+        height: 200,
+        top: 0,
+        left: 0
+      },
+      bigImageConfigs: { // 放大图片
+        width: 500,
+        height: 400,
+        transformImage: 'translate(0px, 0px)'
+      },
+      showMask: false
     };
   },
   mounted() {},
@@ -120,6 +186,26 @@ export default {
         this.startIndex -= 3;
         this.selectImage(this.startIndex);
       }
+    },
+    handOver() {
+      this.showMask = true
+    },
+    handMove(event) {
+      // this.showMask = true
+      const rect = this.$refs.img.getBoundingClientRect()
+      // 确定遮罩层坐标
+      const maskY = event.clientY - rect.top - this.magnifierConfigs.height / 2
+      this.magnifierConfigs.top = maskY
+      const maskX = event.clientX - rect.left - this.magnifierConfigs.width / 2
+      this.magnifierConfigs.left = maskX
+      // 确定放大图坐标
+      this.bigConfigs.top = event.clientY - rect.top - this.bigConfigs.height / 2
+      this.bigConfigs.left = event.clientX - rect.left + this.magnifierConfigs.width / 2
+      // 确定图像
+      this.bigImageConfigs.transformImage = `translate(-${maskX * 2}px,-${maskY * 2}px)`
+    },
+    handOut() {
+      this.showMask = false
     }
   },
 };
@@ -208,5 +294,24 @@ export default {
     display: flex;
     flex-direction: column;
   }
+
+
+  .ImageMagnifier{
+    position: relative;
+    .magnifier-box{
+      background-color: rgb(16, 101, 186);
+      position: absolute;
+      z-index: 999;
+      pointer-events: none; /* 让子元素在事件上透明 */
+    }
+    .big-box{
+      background-color: #fff;
+      // border: 1px solid black;
+      position: absolute;
+      overflow: hidden;
+      z-index: 999;
+      pointer-events: none; /* 让子元素在事件上透明 */
+    }
+  }
 }
 </style>
--- a/src/views/product/detail.vue
View file @6333b9a
+++ b/src/views/product/detail.vue
View file @6333b9a
 <!--
  * @Date: 2024-09-29 14:26:41
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-31 14:16:25
+ * @LastEditTime: 2024-11-01 08:15:53
  * @FilePath: /hager/src/views/product/detail.vue
  * @Description: 文件描述
 -->
@@ -19,10 +19,10 @@
     </hager-box>
     <hager-box v-if="is_enable" class="box-n">
       <el-row v-if="!is_xs" :gutter="10" style="margin-bottom: 3rem;">
-        <el-col :span="8">
+        <el-col :span="7">
           <hager-carousel :images="info_images"></hager-carousel>
         </el-col>
-        <el-col :span="16">
+        <el-col :span="17">
           <div class="product-detail-info">
             <div class="product-title" style="">{{ info.product_name }}</div>
             <div class="product-sub" style="margin: 1rem 0 2rem;" v-html="info.post_excerpt"></div>
--- a/yarn.lock
View file @6333b9a
+++ b/yarn.lock
View file @6333b9a
@@ -2007,6 +2007,11 @@ normalize-wheel@^1.0.1:
   resolved "https://mirrors.cloud.tencent.com/npm/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
   integrity sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==
+object-fit-images@^3.2.4:
+  version "3.2.4"
+  resolved "https://mirrors.cloud.tencent.com/npm/object-fit-images/-/object-fit-images-3.2.4.tgz#6c299d38fdf207746e5d2d46c2877f6f25d15b52"
+  integrity sha512-G+7LzpYfTfqUyrZlfrou/PLLLAPNC52FTy5y1CBywX+1/FkxIloOyQXBmZ3Zxa2AWO+lMF0JTuvqbr7G5e5CWg==
+
 object-inspect@^1.13.1:
   version "1.13.2"
   resolved "https://mirrors.cloud.tencent.com/npm/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"