网站服务器计算机安全的措施,建网站的手续,山东济南做网站公司,广西建设执业资格注册中心官网本文参考#xff1a;https://blog.csdn.net/liushi21/article/details/127497487
效果如下#xff1a; 功能实现分解如下#xff1a;
#xff08;1#xff09;商品图区域#xff1a;主要是浏览图片#xff0c;根据图片的url显示图片。当鼠标离开此区域时放大镜区…本文参考https://blog.csdn.net/liushi21/article/details/127497487
效果如下 功能实现分解如下
1商品图区域主要是浏览图片根据图片的url显示图片。当鼠标离开此区域时放大镜区域不需要显示。
2鼠标放大区块。主要处理两个事情
1mouseenter鼠标进入时放大镜区域根据url显示图片
2mousemove鼠标移动时鼠标的遮罩块区域跟着移动同时放大镜区域的图片跟着切换显示遮罩块的放大效果
3商品图总览鼠标over时切换商品图区域的url图片。 放大效果的实现方式
主要是通过CSS的translate方法实现的。
放大镜区域其实放着一个大图当鼠标在商品图区域移动时放大镜区域的大图相向移动。
代码
1、css代码
#page{position: relative;height: 700px;width: 1246px;left: 19.3%;top: 111px;background-color: aqua;
}/* 商品图 */
#goodsPics{width: 452px;height: 626px;background-color: blue;position: relative;top: 10px;
}/*当前所查看的图片也即所需要局部放大查看的图片*/
.imgNow{position: relative;top: 15px;left: 37px;
}.imgNow li{display: block;float: left;height: 54px;width: 54px;margin-left: 15px;border: 2px solid transparent;
}.imgNow li:hover, #sign{border: 2px solid red;
}/* 图片放大后的div区块 */
#seeDetail{position: absolute;background-color: aliceblue;width: 600px;height: 600px;top: 0%;left: 101%;overflow: hidden;border: 2px solid #f90;background-position: 0 0;background-repeat: no-repeat;
}/* 图片放大后的div区块下的img区块 */
#seeDetail img{position: absolute;top: 0;left: 0;background-repeat: no-repeat;width: 1800px;height: 1800px;
}/* 鼠标查看区域 */
.move{position: absolute;left: 0;top: 0;width: 150px;height: 150px;cursor: move;background: rgba(142, 223, 255, 0.407);
}/* 覆盖在放大图的原图表面上的一个遮罩层 */
.topMask{width: 452px;height: 452px;position: absolute;top: 0;left: 0;z-index: 5;
}
2、home.vue代码
scriptexport default{data(){return{url: require(/assets/images/01.jpg),Bigurl: require(/assets/images/01.jpg),urlIndex: -1, //urlIndex用于图片列表中isShow: 0,cursorMask: {transform: },imgMove: {transform: },goodsImgs: [{id:0,src: require(/assets/images/01.jpg)},{id:1,src: require(/assets/images/02.jpg)},{id:2,src: require(/assets/images/03.jpg)}]}},methods: {seeThis(index){this.url this.goodsImgs[index].src;this.urlIndex index;},move(e){var x e.offsetX - 75;var y e.offsetY - 75;// 防止鼠标预览区域移动到原图区域左边以外if(x 0){x 0;}else if(x 300){// 防止预览区域移动到右边以外x 300;}if(y 0){y 0;}else if(y 300){y 300;}this.cursorMask.transform translate(${x}px, ${y}px);this.imgMove.transform translate(-${4*x}px, -${4*y}px);},seeBegin(){this.Bigurl this.url;this.isShow 1;},seeEnd(){this.Bigurl ;this.left 0;this.top 0;this.isShow 0;}}}
/scripttemplatediv idgoodsPics!-- 当前查看商品图区域 --div idimgPre styleposition: relative; mouseleaveseeEnddiv refimgPreimg :srcurl altpicNow/divdiv classtopMask mouseenterseeBegin($event) mousemovemove($event)!-- 鼠标放大镜模块 --div refmove v-showisShow classmove :stylecursorMask/div/div!-- 商品图总览就是一排的小图 --ul classimgNowli v-for(item, index) in goodsImgs :keyitem.id mouseoverseeThis(index) :idurlIndex index ? sign : img stylewidth: 54px; height: 54px; :srcitem.src altpics/li/ul!-- 放大镜区域查看商品图放大后的效果 --div v-ifisShow idseeDetail refbigImgimg :srcBigurl alt :styleimgMove/div/div/div
/templatestyle scoped/style
