仿淘宝放大镜功能(js+vue两种方法)

最新推荐文章于 2023-04-12 10:09:54 发布

WeiflR10

最新推荐文章于 2023-04-12 10:09:54 发布

阅读量823

点赞数

本文链接：https://blog.csdn.net/WeiflR10/article/details/105431964

版权

原生js写法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .whole{
            margin: 0 auto;
            position: relative;
            width: 400px;
            height: 469px;
        }
        .middle{
            position: relative;
            width: 400px;
            height: 400px;
        }
        .middle>img{
            width: 100%;
            height: 100%;
            vertical-align: middle;
        }
        .small-whole{
            margin-top: 15px;
            width: 400px;
            height: 54px;
        }
        .small{
            float: left;
            margin-left: 20px;
            width: 50px;
            height: 50px;
            border: 2px solid transparent;
        }
        .small>img{
            width: 50px;
            height: 50px;
            vertical-align: middle;
        }
        .ceng{
            display: none;
            position: absolute;
            z-index: 1;
            width: 200px;
            height: 200px;
            background-color:  rgba(154, 205, 50, 0.48);
        }
        .big{
            position: absolute;
            left: 415px;
            width: 400px;
            height: 400px;
            border: 1px solid grey;
            /* display: none; */
            background-repeat: no-repeat;
            background-size: 800px 800px;
        }
    </style>
</head>
<body>
<div class="whole">
    <div class="big"></div>
    <div class="middle" data-src="./img/Bigdatuzizhitu.jpg">
        <div class="ceng"></div>
        <img class="middleimg" src="./img/O1CN011J00fPB28fUbNTj_!!2887860965.jpg">
    </div>
    <div class="small-whole">
        <div class="small" data-big="./img/Bigdatuzizhitu.jpg"
             data-src="./img/O1CN011J00fPB28fUbNTj_!!2887860965.jpg">
            <img src="./img/s1O1CN011J00fPB28fUbNTj_!!2887860965.jpg">
        </div>
        <div class="small" data-big="./img/b2O1CN011J00fRqLiwpoWzZ_!!2887860965.jpg"
             data-src="./img/z2CN011J00fRqLiwpoWzZ_!!2887860965.jpg">
            <img src="./img/s2O1CN011J00fRqLiwpoWzZ_!!2887860965.jpg">
        </div>
        <div class="small" data-big="./img/b3O1CN011J00fPYAGpRyBAX_!!2887860965.jpg"
             data-src="./img/z3O1CN011J00fPYAGpRyBAX_!!2887860965.jpg">
            <img src="./img/s3O1CN011J00fPYAGpRyBAX_!!2887860965.jpg">
        </div>
        <div class="small" data-big="./img/b4O1CN011J00fPyXrm2KLwF_!!2887860965.jpg"
             data-src="./img/z4O1CN011J00fPyXrm2KLwF_!!2887860965.jpg">
            <img src="./img/s4O1CN011J00fPyXrm2KLwF_!!2887860965.jpg">
        </div>
        <div class="small" data-big="./img/b5O1CN011J00fQ4QXDYBJkd_!!2887860965.jpg"
             data-src="./img/z5O1CN011J00fQ4QXDYBJkd_!!2887860965.jpg">
            <img src="./img/s5O1CN011J00fQ4QXDYBJkd_!!2887860965.jpg">
        </div>
    </div>
</div>
<script>
	//    第一种
	//    var smallImg=document.getElementsByClassName("small");
	//    for (var i=0; i<smallImg.length; i++)
	//    {
	//        smallImg[i].onmouseenter=function() {
	//
	//            for(var k=0;k<smallImg.length;k++)
	//            {
	//               smallImg[k].style.borderColor="transparent";
	//            }
	//            this.style.borderColor="red";
	//        }
	//data-url="./image/5b7cf1eeN9a440daf.jpg!cc_350x449.jpg
	//    }
    var Whole=document.getElementsByClassName("whole")[0];
    var Big=document.getElementsByClassName("big")[0];
    var Middle=document.getElementsByClassName("middle")[0];
    var Middleimg=document.getElementsByClassName("middleimg")[0];
    var cengD=document.getElementsByClassName("ceng")[0];
	//    第二种
    var borderred=document.getElementsByClassName("small");       //让第一个边框色默认为红色
    borderred[0].style.borderColor="#d40000";
    var borderredObject=borderred[0];         //声明一个全局变量，用它来存储上一次变化的量
    for(var i=0;i<borderred.length;i++){
        borderred[i].onmouseenter=function(){
            borderredObject.style.borderColor="transparent";    //在鼠标进入第二个小图时，第一个小图回到透明色
            this.style.borderColor="#d40000";       //在鼠标进入时使边框色为红色
            borderredObject=this;
            Middleimg.src=this.getAttribute("data-src");        //鼠标进入小图时，出现所对应的中图
            Middle.setAttribute("data-src",this.getAttribute("data-big"));      //鼠标进入中图时，出现所对应的大图
        }
    }
    Middle.onmouseenter=function(){
        cengD.style.display="block";
        Big.style.display="block";
        var bigImg=Middle.getAttribute("data-src");     //让最大的图切换并移动
        Big.style.backgroundImage="url("+bigImg+")";
    };
    Middle.onmousemove=function(e){
        this.style.cursor="move";        //鼠标进入时变方块
        var x= e.pageX || e.clientX;     //    获取鼠标坐标
        var y= e.pageY || e.clientY;
        var left=(x-Whole.offsetLeft-100)<=0?0:(x-Whole.offsetLeft-100)>=200?200:(x-Whole.offsetLeft-100);//使ceng在边上的时候卡住不动
        var top=(y-Whole.offsetTop-100)<=0?0:(y-Whole.offsetTop-100)>=200?200:(y-Whole.offsetTop-100);//offsetLeft偏移量
        cengD.style.left=left+"px";
        cengD.style.top=top+"px";
        Big.style.backgroundPosition=-left*2  + "px " + (-top*2)  + "px";             //大图随鼠标移动
    };
    Middle.onmouseleave=function(){
        cengD.style.display="none";
        Big.style.display="none";
    };
</script>
</body>
</html>

在vue中如何实现?(使用插件PicZoom)

安装：

npm install vue-piczoom --save

使用

<template>
    
  <div>
      <div class="box">
          <pic-zoom :url="imgurl" :scale="3"></pic-zoom>
      </div>
      <div class="list">
          <ul>
            <li v-for="(item,index) in imagesList" 
                :key="index" 
                @mouseenter="changeImage(index)"
            >
                 <img :src="item" />
            </li>
          </ul>
      </div>
      </div>
</template>
<script>
  import PicZoom from "vue-piczoom"
    export default {
        name: "FooterShow",
        data(){
            return{
              // imgurl:'',
              imgurl:require("./../../assets/purchase/img/19C5793250D535A09EA0C96CDD7EF79BC149F982D7FF15AD.jpg"),
               imagesList:[
                 require("./../../assets/purchase/img/19C5793250D535A09EA0C96CDD7EF79BC149F982D7FF15AD.jpg"),
                 require("./../../assets/purchase/img/653C52A85D749B321AF1EAAEBBA5F9B215FC73BE5EE58C9B.jpg"),
                 require("./../../assets/purchase/img/R2-AD-300-250-qTmfM._V425384509_.jpg")
               ]
            }
         },
        components:{
          PicZoom
        },
      methods:{
        changeImage(index) {
          this.imgurl=this.imagesList[index];
        }
      }

    }
</script>
<style scoped>

.box{
  width: 400px;
  height: 320px;
}
.list{
  width: 400px;
  height: 130px;
}
  .list ul{
    width: 400px;
    display: flex;
    justify-content: space-around;
  }
  .list ul li{
    width:120px;
    height: 90px;
    background-color: white;
    margin-top: 15px;
  }
  .list ul li img{
    width: 120px;
    height: 90px;}
</style>