首页 / VUE / 使用vue仿淘宝放大镜
使用vue仿淘宝放大镜
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了使用vue仿淘宝放大镜,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3024字,纯文字阅读大概需要5分钟。
内容图文
![使用vue仿淘宝放大镜](/upload/InfoBanner/zyjiaocheng/984/75d02ae35e09454aa5eb6843f6d353ac.jpg)
使用vue做仿作淘宝商品展示放大镜
效果图![使用vue仿淘宝放大镜 - 文章图片](/upload/getfiles/0001/2021/5/13/20210513032557962.jpg)
文件地址
提取码:s2yj
css代码:
<style>
#myApp {
text-align: center;
}
#main {
width: 300px;
height: 300px;
position: relative;
}
#main img {
width: 100%;
height: 100%;
}
#cover {
width: 200px;
height: 200px;
background-color: rgba(255, 247, 4, 0.4);
position: absolute;
left: 0;
top: 0;
/* 让遮罩层偏移自身一般, 以中心点为坐标0, 0的位置 */
transform: translate(-100px, -100px);
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
float: left;
margin: 5px;
}
ul li img {
width: 50px;
height: 50px;
}
.active {
border: 1px solid red;
}
main {
position: relative;
}
#big {
width: 400px;
height: 400px;
position: absolute;
border: 1px solid red;
left: 300px;
top: 0;
overflow: hidden;
}
#big img {
width: 700px;
height: 700px;
position: absolute;
}
</style>
body 代码
<!-- vue模板 -->
<div id='myApp'>
<div>
<show :imgs="imgs"></show>
<thumbnail :imgs="imgs"></thumbnail>
</div>
</div>
<!-- 底部缩略图 组件-->
<template id='thumbnail'>
<ul>
<li v-for="item,i in imgs" :key="item">
<img :class="current == item ? 'active': ''" :src="item" @mouseover="over(item)" @myevent="current">
</li>
</ul>
</template>
<!-- 大图放大镜 组件 -->
<template id='show'>
<div>
<div id="main" ref="main" @mousemove="move" @mouseenter="()=>{bigShow=true}"
@mouseleave='()=>{bigShow=false}'>
<img :src="current" alt="">
<div id="cover" ref="cover" :style="{left: X+'px', top: Y+'px'}" v-show="bigShow"></div>
</div>
<!-- 蒙版 -->
<div id="big" v-show="bigShow">
<img :src="current" alt="" :style="bigStyle">
</div>
</div>
</template>
js代码
<script>
var bus = new Vue()
// 组件缩略图
Vue.component('thumbnail', {
template: '#thumbnail',
props: ["imgs"],
data() {
return {
current: "",
}
},
methods: {
over(name) {
this.current = name
}
},
watch: {
current(newvalue) {
bus.$emit("myevent", newvalue)
console.log(newvalue, "发送");
}
}
})
//展示图,放大镜
Vue.component('show', {
template: '#show',
props: ["imgs"],
data() {
return {
// 记录遮罩层的横纵坐标
X: 0,
Y: 0,
// 大图和遮罩层是否显示
bigShow: false,
current: "imgs/1.gif", //展示图片默认值
}
},
created() {
bus.$on("myevent", (data) => {
this.current = data
})
},
methods: {
move(e) {
// getBoundingClientRect().left 获取标签在网页上的横坐标
var X = e.pageX - this.$refs.main.getBoundingClientRect().left;
var Y = e.pageY - this.$refs.main.getBoundingClientRect().top
console.log("位置坐标", X, Y);
// 在vue提供了一个ref属性,用于在组件对象中快速查找DOM元素
// 在原生标签或组件标签上设置ref属性后, 可以在vue对象中通过this.$refs调用
// 注意:
// 1, 通过refs对象只能查找当前组件模板中的元素
// 2, 通过refs对象不仅可以找到原生dom标签,还可以用于查找子组件标签
var mainWith = this.$refs.main.offsetWidth;
var coverWidth = this.$refs.cover.offsetWidth;
var min = coverWidth / 2;
var max = mainWith - coverWidth / 2;
// console.log(this.$refs.cover);
if (X < min) X = min;
if (X > max) X = max;
if (Y < min) Y = min;
if (Y > max) Y = max;
this.X = X;
this.Y = Y
}
},
computed: {
bigStyle() {
return {
left: -3 * this.X + 300 + "px",
top: -3 * this.Y + 300 + 'px'
}
}
}
})
// 根组件
var vm = new Vue({
el: '#myApp',
data: {
imgs: ['imgs/1.gif', 'imgs/2.gif', 'imgs/3.gif', 'imgs/4.gif', 'imgs/5.gif'],
}
})
</script>
内容总结
以上是互联网集市为您收集整理的使用vue仿淘宝放大镜全部内容,希望文章能够帮你解决使用vue仿淘宝放大镜所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。