mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 02:06:38 +08:00
483 lines
13 KiB
Vue
483 lines
13 KiB
Vue
<template>
|
|
<div class="magnify">
|
|
<div class="left_contaner">
|
|
<div class="middle_img" @mouseover="boxMouseOver" @mouseleave="boxMouseLeave">
|
|
<img :src="middleImg" alt="" style="width:100%">
|
|
<div class="shade" @mouseover="shadeMouseOver" @mousemove="shadeMouseMove" ref="shade" v-show="isShade"></div>
|
|
</div>
|
|
<div class="carousel">
|
|
<div class="left_arrow arrow" @click="leftArrowClick">
|
|
|
|
<img src="../assets/image/userleft.jpg" alt="">
|
|
</div>
|
|
|
|
<div class="show_box">
|
|
<ul class="picture_container" ref="middlePicture">
|
|
<li class="picture_item" @click="tabPicture(item,index)" v-for="(item, index) in pictureList" :key="index">
|
|
<img :src="item.url" class="small_img" alt="">
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="right_arrow arrow" @click="rightArrowClick">
|
|
|
|
<img src="../assets/image/userright.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right_contanier" v-show="isBig">
|
|
<img :src="middleImg" ref="bigImg" class="big_img" alt="">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import $ from 'jquery'
|
|
export default {
|
|
props:['parentmsg'],
|
|
props: {
|
|
|
|
tableLabelTest:Array,
|
|
middleImgWidth: {
|
|
default: 350,
|
|
type: Number
|
|
}, // 产品图片宽
|
|
middleImgHeight: {
|
|
default: 282,
|
|
type: Number
|
|
}, // 产品图片高
|
|
thumbnailHeight: {
|
|
default: 100,
|
|
type: Number
|
|
}, // 缩略图容器高度
|
|
imgList: Array, // 图片数据
|
|
zoom: {
|
|
default: 2, // 缩略比例,放大比例
|
|
type: Number
|
|
},
|
|
|
|
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
tableLabelTest1:this.tableLabelTest,
|
|
pictureList: [
|
|
{url: require("../assets/four.png")},
|
|
{url: require("../assets/cat.png")},
|
|
{url: require("../assets/one.png")},
|
|
{url: require("../assets/six.png")},
|
|
{url: require("../assets/six.png")},
|
|
{url: require("../assets/six.png")},
|
|
],
|
|
menu:[],
|
|
middleImg: '', // 中图图片地址
|
|
bigImg: '', // 大图图片地址
|
|
isShade: false, // 控制阴影显示与否
|
|
isBig: false, // 控制放大图显示与否
|
|
initX: 0, // 初始clientX值
|
|
initY: 0, // 初始clientY值
|
|
leftX: 0, // 初始定位left
|
|
topY: 0, // 初始定位top
|
|
middleLeft: 0, // 当前放置小图盒子的定位left值,
|
|
itemWidth: 80, // 缩略图每张的宽度
|
|
}
|
|
},
|
|
watch:{
|
|
data:'ifadroind',// 值可以为methods的方法名
|
|
|
|
inputName: function(newValue) {
|
|
this.pictureList=newValue;
|
|
this.menu=newValue;
|
|
console.log(this.newValue);
|
|
}
|
|
},
|
|
created() {
|
|
|
|
if (this.imgList && this.imgList.length) {
|
|
this.pictureList = this.imgList
|
|
}
|
|
this.middleImg = this.pictureList[0].url
|
|
// 计算缩略图的宽度,默认是显示4张图片,两边箭头的宽度和为50
|
|
// this.itemWidth = (this.middleImgWidth-30) / 2
|
|
},
|
|
|
|
mounted() {
|
|
console.log(this.parentmsg)
|
|
|
|
this.ifadroind();
|
|
this.$nextTick(() => {
|
|
console.log(this.menu);
|
|
// 容器的高
|
|
const imgWidth = this.middleImgHeight + this.thumbnailHeight + 20
|
|
// 设置容器宽高
|
|
// $('.magnify').css({
|
|
// width: this.middleImgWidth,
|
|
// height: imgWidth
|
|
// })
|
|
|
|
// 设置移动阴影图宽高
|
|
$('.middle_img .shade').css({
|
|
width: this.middleImgWidth/this.zoom,
|
|
height: this.middleImgHeight/this.zoom
|
|
})
|
|
// 设置缩略图容器高
|
|
$('.carousel').css({
|
|
height: this.thumbnailHeight
|
|
})
|
|
// 设置每个缩略图宽
|
|
// $('.picture_item').css({
|
|
// width: this.itemWidth
|
|
// })
|
|
// 设置放大后图片容器的宽高,left
|
|
$('.right_contanier').css({
|
|
left: this.middleImgWidth,
|
|
width: imgWidth,
|
|
height: imgWidth
|
|
})
|
|
// 设置放大图片的宽高(图片的放大倍数)
|
|
$('.right_contanier .big_img').css({
|
|
width: imgWidth * this.zoom,
|
|
height: imgWidth * this.zoom
|
|
})
|
|
})
|
|
},
|
|
|
|
methods: {
|
|
//判断是手机打开还是电脑打开
|
|
ifadroind(){
|
|
var sUserAgent = navigator.userAgent.toLowerCase();
|
|
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
|
|
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
|
|
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
|
|
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
|
|
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
|
|
var bIsAndroid = sUserAgent.match(/android/i) == "android";
|
|
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
|
|
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
|
|
|
|
if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
|
|
// 设置产品图宽高
|
|
$('.middle_img').css({
|
|
width: this.middleImgWidth,
|
|
height: this.middleImgHeight
|
|
})
|
|
|
|
}else{
|
|
|
|
}
|
|
},
|
|
// 产品图片鼠标移入事件,显示阴影,显示大图
|
|
boxMouseOver (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
this.isShade = true
|
|
this.isBig = true
|
|
// 计算阴影的位置
|
|
let x = e.offsetX - $('.shade').width()/2
|
|
let y = e.offsetY - $('.shade').height()/2
|
|
let maxLeft = $('.middle_img').width() - $('.shade').width()
|
|
let maxTop = $('.middle_img').height() - $('.shade').height()
|
|
x = x <= 0 ? 0 : x
|
|
x = x >= maxLeft ? maxLeft : x
|
|
y = y <= 0 ? 0 : y
|
|
y = y >= maxTop ? maxTop : y
|
|
$('.shade').css({
|
|
left: x,
|
|
top: y
|
|
})
|
|
},
|
|
// 鼠标在阴影移动
|
|
shadeMouseMove (e) {
|
|
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
//用页面x - 父盒子的offsetLeft - 父盒子的左边框宽度
|
|
var x = this.getEventPage(e).pageX - $('.middle_img')[0].offsetParent.offsetLeft - $('.middle_img')[0].offsetParent.clientLeft;
|
|
//用页面y - 父盒子的offsetTop - 父盒子的上边框宽度
|
|
var y = this.getEventPage(e).pageY - $('.middle_img')[0].offsetParent.offsetTop - $('.middle_img')[0].offsetParent.clientTop;
|
|
|
|
//让阴影的坐标居中
|
|
x -= $('.shade').width() / 2;
|
|
y -= $('.shade').height() / 2;
|
|
|
|
// 移动边界限制
|
|
let maxLeft = $('.middle_img').width() - $('.shade').width()
|
|
let maxTop = $('.middle_img').height() - $('.shade').height()
|
|
x = x <= 0 ? 0 : x
|
|
x = x >= maxLeft ? maxLeft : x
|
|
y = y <= 0 ? 0 : y
|
|
y = y >= maxTop ? maxTop : y
|
|
// 重新赋值当前的定位值
|
|
$('.shade').css({
|
|
left: x,
|
|
top: y
|
|
})
|
|
// 计算出实时的大图的定位,首先计算出比例
|
|
// 比例为x:大图宽度/小图宽度 y: 大图高度/小图高度,将小图的定位乘以比例就是大图的定位
|
|
const xRate = $('.big_img').width() / $('.middle_img').width()
|
|
const yRate = $('.big_img').height() / $('.middle_img').height()
|
|
$('.big_img').css({
|
|
left: -x*xRate,
|
|
top: -y*yRate
|
|
})
|
|
// console.log(e, x, y, xRate, yRate, 66677)
|
|
},
|
|
// 鼠标移入阴影,去除自定义事件
|
|
shadeMouseOver (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
// console.log(88888, e)
|
|
},
|
|
// 图片移出隐藏阴影和大图
|
|
boxMouseLeave () {
|
|
this.isShade = false
|
|
this.isBig = false
|
|
},
|
|
// 切换图片
|
|
tabPicture (item,index) {
|
|
this.middleImg = item.url
|
|
this.$emit('changeName',item)
|
|
console.log(item,index)
|
|
},
|
|
// 点击左边箭头
|
|
leftArrowClick () {
|
|
if (this.middleLeft < 0) {
|
|
// 每次向右平移一个图片盒子的宽度
|
|
this.middleLeft += this.itemWidth
|
|
$('.picture_container').animate({
|
|
left: this.middleLeft
|
|
}, 500)
|
|
}
|
|
},
|
|
// 点击右边箭头
|
|
rightArrowClick () {
|
|
// 每次向左平移一个盒子的宽度,最多移动的宽度为(图片数组长度-4)*每张缩略图的宽度
|
|
if (this.middleLeft > -this.itemWidth*(this.pictureList.length-4)) {
|
|
this.middleLeft -= this.itemWidth
|
|
$('.picture_container').animate({
|
|
left: this.middleLeft
|
|
}, 500)
|
|
}
|
|
},
|
|
/**
|
|
* 获取网页滚出去的距离（包括上面滚出去的部分和左边滚出去的部分）
|
|
* @returns {{scrollTop: (Number|number), scrollLeft: (Number|number)}}
|
|
*/
|
|
getPageScroll() {
|
|
return {
|
|
scrollTop: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
|
|
scrollLeft: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 获取事件对象点击的点，相对于文档左上角的坐标
|
|
* @param e
|
|
* @returns {{pageX: *, pageY: *}}
|
|
*/
|
|
getEventPage(e) {
|
|
return {
|
|
pageX: e.clientX + this.getPageScroll().scrollLeft,
|
|
pageY: e.clientY + this.getPageScroll().scrollTop
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@media screen and(min-width: 320px) and(max-width:768px) {
|
|
.magnify {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
.left_contaner {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.left_contaner .middle_img {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
.left_contaner .shade {
|
|
background-color: rgba( 135,206,235, .5);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
cursor: move;
|
|
display: none;
|
|
}
|
|
.left_contaner .middle_img img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.left_contaner .carousel {
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
display: -webkit-flex;
|
|
|
|
}
|
|
|
|
.left_contaner .carousel .show_box {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.left_contaner .carousel .arrow {
|
|
flex-basis: 25px;
|
|
cursor: pointer;
|
|
}
|
|
.left_contaner .carousel .left_arrow {
|
|
display: flex;
|
|
align-items: center;
|
|
img{
|
|
width: 0.16rem;
|
|
height: 0.24rem;
|
|
}
|
|
|
|
// background: url('../assets/image/userleft.jpg') no-repeat;
|
|
// background-position: center center;
|
|
}
|
|
.left_contaner .carousel .right_arrow {
|
|
// background: url('../assets/image/userright.png') no-repeat;
|
|
// background-position: center right;
|
|
// width: 8px;
|
|
// height: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
img{
|
|
width: 0.16rem;
|
|
height: 0.24rem;
|
|
display: block;
|
|
margin-left: 0.06rem;
|
|
}
|
|
}
|
|
.left_contaner .carousel .picture_container {
|
|
width: 200%;
|
|
height: 100%;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.left_contaner .picture_container .picture_item {
|
|
height: 100%;
|
|
float: left;
|
|
width: 60px;
|
|
height: 60px;
|
|
border: 1px solid #d8d8d8 ;
|
|
margin-left: 5px;
|
|
box-sizing: border-box;
|
|
}
|
|
.left_contaner .picture_container .picture_item:hover {
|
|
border: 2px solid #E2001A;
|
|
}
|
|
.left_contaner .picture_container .picture_item img {
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.right_contanier {
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 0;
|
|
border: 1px solid #ccc;
|
|
display: none;
|
|
}
|
|
.right_contanier .big_img {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
display: none;
|
|
}
|
|
|
|
|
|
}
|
|
// // /* 最小768px最大1920 *pc端/
|
|
@media screen and (min-width: 768px) and (max-width: 1920px) {
|
|
.magnify {
|
|
position: relative;
|
|
}
|
|
.left_contaner {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.left_contaner .middle_img {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
.left_contaner .shade {
|
|
background-color: rgba( 135,206,235, .5);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
cursor: move;
|
|
}
|
|
.left_contaner .middle_img img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.left_contaner .carousel {
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
display: -webkit-flex;
|
|
}
|
|
.left_contaner .carousel .show_box {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.left_contaner .carousel .arrow {
|
|
flex-basis: 25px;
|
|
cursor: pointer;
|
|
}
|
|
.left_contaner .carousel .left_arrow {
|
|
background: url('../assets/image/rc-left.png') no-repeat;
|
|
background-position: center center;
|
|
}
|
|
.left_contaner .carousel .right_arrow {
|
|
background: url('../assets/image/rc-left.png') no-repeat;
|
|
background-position: center right;
|
|
}
|
|
.left_contaner .carousel .picture_container {
|
|
width: 200%;
|
|
height: 100%;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.left_contaner .picture_container .picture_item {
|
|
height: 100%;
|
|
float: left;
|
|
padding: 5px;
|
|
box-sizing: border-box;
|
|
}
|
|
.left_contaner .picture_container .picture_item:hover {
|
|
border: 2px solid #E2001A;
|
|
}
|
|
.left_contaner .picture_container .picture_item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.right_contanier {
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 0;
|
|
border: 1px solid #ccc;
|
|
}
|
|
.right_contanier .big_img {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
</style>
|