vue仿京东放大镜加商品缩略图轮播组件

以下是最终的vue版本,光滑流畅,99%还原京东放大镜甚至更好,不会出现多次操作会变卡的问题

1.vue版本

6/23日更新，处理图片尺寸过小无法通过拖动实现放大移动效果的问题

7/18日更新,关于视频处理,不需要引入视频的小伙伴可以注释掉代码中关于视频插件的部分

//安装 视频插件
npm install vue-video-player//main.js全局注册
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
Vue.use(VideoPlayer)

<template><div id="magnifier" class="preview"><divclass="small-box"@mouseover="smallBoxOver"@mousemove="smallBoxMove($event)"@mouseleave="smallLeave"><VideoPlayer v-if="isShowVideo" class="videoPlayer" :video="videoObj"></VideoPlayer><img :src="theImg" v-else /><span class="hover"></span></div><div class="thumbnail-box"><a class="btn btn-prev" @click="prev"></a><a class="btn btn-next" @click="next"></a><div class="list"><ul class="wrapper"><liclass="item"v-for="(item, index) in pictureList":key="index"@mouseover="chooseImg(item,index)"@mouseleave="leaveImg(index)":class="activeIndex===index?'item-cur':''"><img :src="item" /></li></ul></div></div><div class="big-box"><img :src="theImg" /></div></div>
</template><script>
import $ from 'jquery'
import 'jquery'
import VideoPlayer from '@/components/video/video'
// import VideoPlayer from '@/components/video/simpleVideo'export default {data() {return {theImg: '', // 当前选中的图片activeIndex: 0,isShowVideo: false,goodVideo: '',videoObj: {type: 'video/mp4',src: require('../../assets/video/jabil.mp4')},pictureList: ['http://mp.ofweek.com/Upload/News/Img/member645/201711/17170046839337.jpg','http://image.buy.ccb.com/merchant/201703/904919627/1522929521661_4.jpg','http://image5.suning.cn/uimg/b2c/newcatentries/0070130691-000000000826244625_5_800x800.jpg','http://img12.360buyimg.com/n5/s450x450_jfs/t9952/98/2269407420/279171/6137fe2f/59f28b2bN6959e086.jpg','http://d.ifengimg.com/w600/p0.ifengimg.com/pmop/2017/1213/A4037864F6728F006B67AAEC51EC8A485F320FD2_size93_w1024_h734.jpeg','http://d.ifengimg.com/w600/p0.ifengimg.com/pmop/2017/1213/A4037864F6728F006B67AAEC51EC8A485F320FD2_size93_w1024_h734.jpeg'],$elem: '',$smallBox: '',$smallBox_pic: '',$smallBox_mask: '',$thumbnailBox: '',$thumbnailBox_prev: '',$thumbnailBox_next: '',$thumbnailBox_wrapper: '',$thumbnailBox_item: '',$thumbnailBox_pic: '',$bigBox: '',$bigBox_pic: ''}},components: {VideoPlayer},props: {imageArr: {type: [Array, Object],default: () => []}},created() {this.theImg = this.imageArr[0]},mounted() {this.initPreview()},methods: {playVideo() {this.isShowVideo = true},initPreview() {this.$elem = $('#magnifier')this.$smallBox = this.$elem.find('.small-box')this.$smallBox_pic = this.$smallBox.find('img')this.$smallBox_mask = this.$smallBox.find('.hover')this.$thumbnailBox = this.$elem.find('.thumbnail-box')this.$thumbnailBox_prev = this.$thumbnailBox.find('.btn-prev')this.$thumbnailBox_next = this.$thumbnailBox.find('.btn-next')this.$thumbnailBox_wrapper = this.$thumbnailBox.find('.wrapper')this.$thumbnailBox_item = this.$thumbnailBox.find('.item')this.$thumbnailBox_pic = this.$thumbnailBox.find('img')this.$bigBox = this.$elem.find('.big-box')this.$bigBox_pic = this.$bigBox.find('img')},moveBigPic() {// 改变大图let scaleX =this.$smallBox_mask.position().left /(this.$smallBox.width() - this.$smallBox_mask.width())let scaleY =this.$smallBox_mask.position().top /(this.$smallBox.height() - this.$smallBox_mask.height())let scroll_l = scaleX * (this.$bigBox_pic.width() - this.$bigBox.width())let scroll_t =scaleY * (this.$bigBox_pic.height() - this.$bigBox.height())this.$bigBox.stop(true)this.$bigBox.scrollLeft(scroll_l).scrollTop(scroll_t)},setMask() {// 设置 mask 宽高//   let mask_w =//     this.$smallBox.width() ///     (this.$bigBox_pic.width() / this.$bigBox.width()) ///     2.5//   let mask_h =//     this.$smallBox.height() ///     (this.$bigBox_pic.height() / this.$bigBox.height()) ///     2.5//   //   this.$smallBox_mask.stop(true)//   this.$smallBox_mask.css({ width: mask_w, height: mask_h })//   this.$smallBox_mask.css({ height: '121.5px', width: '121.5px' })},smallBoxOver() {this.$bigBox.show()this.$smallBox_mask.show()this.setMask()this.$smallBox.stop(true)},smallBoxMove(ev) {//   console.log('ev.clientX', ev.clientX)let oEvent = ev || window.eventlet offset_pos = {left:oEvent.clientX -this.$smallBox.offset().left -this.$smallBox_mask.width() / 2,top:oEvent.clientY -this.$smallBox.offset().top -this.$smallBox_mask.height() / 2 +$(window).scrollTop()}if (offset_pos.left < 0) {offset_pos.left = 0} else if (offset_pos.left >this.$smallBox.width() - this.$smallBox_mask.width()) {offset_pos.left = this.$smallBox.width() - this.$smallBox_mask.width()}if (offset_pos.top < 0) {offset_pos.top = 0} else if (offset_pos.top >this.$smallBox.height() - this.$smallBox_mask.height()) {offset_pos.top = this.$smallBox.height() - this.$smallBox_mask.height()}this.$smallBox_mask.css(offset_pos)//   this.$smallBox_mask.css({ height: '121.5px', width: '121.5px' })this.moveBigPic()},smallLeave() {this.$smallBox_mask.hide()this.$bigBox.hide()},prev() {this.$thumbnailBox_wrapper.animate({ marginLeft: 0 })},next() {let ov_pic = this.$thumbnailBox_item.length - 5let ov_dis = ov_pic * 78this.$thumbnailBox_wrapper.stop(true)if (ov_pic > 0) {this.$thumbnailBox_wrapper.animate({ marginLeft: -ov_dis })}},leaveImg(index) {},chooseImg(item, index) {this.theImg = itemthis.activeIndex = index}}
}
</script><style lang="less" scoped>
/deep/ .vjs_video_3-dimensions.vjs-fluid {padding-top: 100% !important;
}
.videoPlayer {height: 100%;width: 100%;
}.thumbnail-box {position: relative;width: 100%;height: 62px;.btn-prev {left: 0;background: url(../../assets/img/fjd/images/btn_prev.png) no-repeat;}.btn-next {right: 0;background: url(../../assets/img/fjd/images/btn_next.png) no-repeat;}.btn {position: absolute;top: 50%;width: 22px;height: 32px;margin-top: -16px;}.list {overflow: hidden;width: 390px;margin: 0 auto;height: 58px;}.wrapper {width: 100000px;}.list .item {float: left;margin: 0 11.9px;img {border: 2px solid #fff;height: 50px;width: 50px;}}.list .item-cur img {border: 2px solid #e53e41;}
}ul,
li {list-style: none;
}
#magnifier {position: relative;width: 450px;
}
.small-box {position: relative;width: 450px;height: 450px;margin-bottom: 20px;border: 1px solid #eee;img {display: block;object-fit: fill;width: 100%;height: 100%;}.hover {display: none;position: absolute;left: 0;top: 0;width: 125px;height: 125px;border: 1px solid #aaa;background: #0099ff;opacity: 0.5;cursor: move;}
}.big-box {display: none;overflow: hidden;position: absolute;left: 451px;top: 0;width: 540px;height: 540px;border: 1px solid #e4e4e4;z-index: 999;img {display: block;height: 128%;}
}.preview {.preview-btn {position: absolute;z-index: 5;bottom: 62px;left: 0;width: 100%;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;justify-content: center;text-align: center;li {display: inline-block;margin: 0 5px;vertical-align: text-top;}.video-icon {cursor: pointer;display: inline-block;z-index: 999;width: 50px;height: 50px;background: url(//static.360buyimg.com/item/unite/1.0.101/components/default/preview/i/main-circles.png)0 -55px no-repeat;}.video-icon:hover {background: url(//static.360buyimg.com/item/unite/1.0.101/components/default/preview/i/main-circles.png) -55px -55pxno-repeat;}}
}
</style>

2. JQ版本

<template><div id="magnifier"><!-- <div class="small-box" @mouseover="smallBoxOver" @mousemove="smallBoxMove"> --><div class="small-box"><img :src="theImg" /><span class="hover"></span></div><div class="thumbnail-box"><!-- <a href="javascript:;" class="btn btn-prev" @click="prev"></a><a href="javascript:;" class="btn btn-next" @click="next"></a>--><a href="javascript:;" class="btn btn-prev"></a><a href="javascript:;" class="btn btn-next"></a><div class="list"><ul class="wrapper"><liclass="item"v-for="(item, index) in pictureList":key="index"@mouseenter="chooseImg(item)"><img :src="item.url" /></li></ul></div></div><!-- 缩略图容器 --><div class="carousel" style="display:none;"><!-- 左箭头 --><div class="left_arrow arrow" @click="leftArrowClick"></div><!-- 缩略图展示盒子 --><div class="show_box"><ul class="picture_container" ref="middlePicture"><liclass="picture_item"@mouseover="tabPicture(item)"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"></div></div><div class="big-box"><img :src="theImg" /></div></div>
</template><script>
import $ from 'jquery'
import jQuery from 'jquery'
import 'jquery'
import '../ProductPreview/fjd/magnifier'export default {data() {return {theImg: '', // 当前选中的图片pictureList: [{url:'http://mp.ofweek.com/Upload/News/Img/member645/201711/17170046839337.jpg'},{url:'http://image.buy.ccb.com/merchant/201703/904919627/1522929521661_4.jpg'},{url:'http://image5.suning.cn/uimg/b2c/newcatentries/0070130691-000000000826244625_5_800x800.jpg'},{url:'http://img12.360buyimg.com/n5/s450x450_jfs/t9952/98/2269407420/279171/6137fe2f/59f28b2bN6959e086.jpg'},{url:'http://d.ifengimg.com/w600/p0.ifengimg.com/pmop/2017/1213/A4037864F6728F006B67AAEC51EC8A485F320FD2_size93_w1024_h734.jpeg'},{url:'http://d.ifengimg.com/w600/p0.ifengimg.com/pmop/2017/1213/A4037864F6728F006B67AAEC51EC8A485F320FD2_size93_w1024_h734.jpeg'}]// $elem: '',// $smallBox: '',// $smallBox_pic: '',// $smallBox_mask: '',// $thumbnailBox: '',// $thumbnailBox_prev: '',// $thumbnailBox_next: '',// $thumbnailBox_wrapper: '',// $thumbnailBox_item: '',// $thumbnailBox_pic: '',// $bigBox: '',// $bigBox_pic: ''}},created() {this.theImg = this.pictureList[0].url},mounted() {},methods: {chooseImg(item) {this.theImg = item.url},// 切换图片tabPicture(item) {this.middleImg = item.url},// 点击左边箭头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)}console.log(this.middleLeft)}}
}
</script><style lang="less" scoped>
.thumbnail-box .btn-prev {left: 0;background: url(../../assets/img/fjd/images/btn_prev.png) no-repeat;
}
.thumbnail-box .btn-next {right: 0;background: url(../../assets/img/fjd/images/btn_next.png) no-repeat;
}ul,
li {list-style: none;
}#magnifier {position: relative;width: 450px;
}
.small-box {position: relative;width: 450px;height: 450px;margin-bottom: 20px;border: 1px solid #eee;
}
.small-box img {display: block;object-fit: fill;width: 100%;height: 100%;
}
.small-box .hover {display: none;position: absolute;left: 0;top: 0;width: 200px;height: 200px;border: 1px solid #aaa;background: #0099ff;opacity: 0.5;cursor: move;
}
.thumbnail-box {position: relative;width: 100%;height: 62px;
}
.thumbnail-box .btn {position: absolute;top: 50%;width: 22px;height: 32px;margin-top: -16px;
}.thumbnail-box .list {overflow: hidden;width: 390px;margin: 0 auto;height: 58px;
}
.thumbnail-box .wrapper {width: 100000px;
}
.thumbnail-box .list .item {float: left;margin: 0 11.9px;
}
.thumbnail-box .list .item-cur {
}
.thumbnail-box .list .item img {border: 2px solid #fff;height: 50px;width: 50px;
}
.thumbnail-box .list .item-cur img {border: 2px solid #e53e41;
}
.big-box {display: none;overflow: hidden;position: absolute;left: 451px;top: 0;width: 540px;height: 540px;border: 1px solid #e4e4e4;z-index: 999;
}
.big-box img {display: block;
}
</style>

magnifier.js

import jQuery from 'jquery'
import $ from 'jquery'
$(function() {$('#magnifier').magnifier()
})
;(function($, window, document, undefined) {let Magnifier = function(elem) {const self = thisthis.$elem = elemthis.$smallBox = this.$elem.find('.small-box')this.$smallBox_pic = this.$smallBox.find('img')this.$smallBox_mask = this.$smallBox.find('.hover')this.$thumbnailBox = this.$elem.find('.thumbnail-box')this.$thumbnailBox_prev = this.$thumbnailBox.find('.btn-prev')this.$thumbnailBox_next = this.$thumbnailBox.find('.btn-next')this.$thumbnailBox_wrapper = this.$thumbnailBox.find('.wrapper')this.$thumbnailBox_item = this.$thumbnailBox.find('.item')this.$thumbnailBox_pic = this.$thumbnailBox.find('img')this.$bigBox = this.$elem.find('.big-box')this.$bigBox_pic = this.$bigBox.find('img')}Magnifier.prototype = {moveBigPic: function() {// 改变大图let scaleX =this.$smallBox_mask.position().left /(this.$smallBox.width() - this.$smallBox_mask.width())let scaleY =this.$smallBox_mask.position().top /(this.$smallBox.height() - this.$smallBox_mask.height())let scroll_l = scaleX * (this.$bigBox_pic.width() - this.$bigBox.width())let scroll_t =scaleY * (this.$bigBox_pic.height() - this.$bigBox.height())this.$bigBox.stop(true)this.$bigBox.scrollLeft(scroll_l).scrollTop(scroll_t)},// changeSrouce: function(index, cur_src) {//   // 改变大小图地址//   this.$smallBox_pic.attr('src', cur_src)//   this.$bigBox_pic.attr('src', 'images/big_' + (index + 1) + '.jpg')// },changeSrouce: function(index, cur_src) {// 改变大小图地址// this.$smallBox_pic.attr('src', cur_src)// this.$bigBox_pic.attr('src', cur_src)},setMask: function() {// 设置 mask 宽高let mask_w =this.$smallBox.width() /(this.$bigBox_pic.width() / this.$bigBox.width()) /2.5let mask_h =this.$smallBox.height() /(this.$bigBox_pic.height() / this.$bigBox.height()) /2.5this.$smallBox_mask.stop(true)this.$smallBox_mask.css({ width: mask_w, height: mask_h })},inital: function() {// 初始化const self = thisthis.$thumbnailBox_next.click(function() {let ov_pic = self.$thumbnailBox_item.length - 5let ov_dis = ov_pic * 78self.$thumbnailBox_wrapper.stop(true)if (ov_pic > 0) {self.$thumbnailBox_wrapper.animate({ marginLeft: -ov_dis })}})this.$thumbnailBox_prev.click(function() {// self.$thumbnailBox_wrapper.stop(true)self.$thumbnailBox_wrapper.animate({ marginLeft: 0 })})this.$thumbnailBox_item.mouseover(function() {let cur_src = $(this).attr('data-src')self.$thumbnailBox_item.removeClass('item-cur')$(this).addClass('item-cur')// self.changeSrouce($(this).index(), cur_src)})this.$smallBox.hover(function() {self.$bigBox.show()self.$smallBox_mask.show()self.setMask()$(this).stop(true)$(this).mousemove(function(ev) {let oEvent = ev || window.eventlet offset_pos = {left:oEvent.clientX -$(this).offset().left -self.$smallBox_mask.width() / 2,top:oEvent.clientY -$(this).offset().top -self.$smallBox_mask.height() / 2 +$(window).scrollTop(),}if (offset_pos.left < 0) {offset_pos.left = 0} else if (offset_pos.left >$(this).width() - self.$smallBox_mask.width()) {offset_pos.left = $(this).width() - self.$smallBox_mask.width()}if (offset_pos.top < 0) {offset_pos.top = 0} else if (offset_pos.top >$(this).height() - self.$smallBox_mask.height()) {offset_pos.top = $(this).height() - self.$smallBox_mask.height()}self.$smallBox_mask.css(offset_pos)self.moveBigPic()})},function() {self.$smallBox_mask.hide()self.$bigBox.hide()})},constructor: Magnifier,}$.fn.magnifier = function() {var magnifier = new Magnifier(this)return magnifier.inital()}
})(jQuery, window, document)

原html插件,纯jq,学习用

链接：https://pan.baidu.com/s/16hEc-VtP--p_nZOdsMwi8w
提取码：ex37

vue仿京东放大镜加商品缩略图轮播组件相关推荐

仿京东PC网页商品详情的放大镜效果（原理+代码）
实现效果黑色只不过是转gif出问题而已准备工作 1. 访问该网址,理解我们要弄的放大镜效果,鼠标经过商品图片,显示一个黄色的放大选区,右边显示该选区的大图. 2. 获取商品图片和商品大图 [摩托罗 ...
基于vue商品图片轮播和放大镜的方案
实现原理放大镜的原理用一句话概括,就是根据小图上的鼠标位置去定位大图. 原理图(以2倍放大为例) 相信原理图已经画的很明白了, 图中,左侧框是小图框,其蓝色区域为图片遮罩层(需放大区域),右侧框是整 ...
vue版本的仿京东放大镜代码还有原生js版本的。（组件封装）
vue版本的仿京东放大镜 <template><div class="maxBox"><divref="left"class=&q ...
29 仿京东放大镜案例
1.仿京东放大镜案例功能需求: 鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,鼠标一离开隐藏2个盒子功能 // 当页面全部加载完毕,因此需要load,执行里面的js代码 window.addEv ...
微信小程序仿京东淘宝商品排序
微信小程序仿京东淘宝商品排序效果图如下所示仿京东微信小程序视频请加QQ:1010753897 下载地址:https://download.csdn.net/download/qq_43764578 ...
vue带缩略图的轮播图插件_带有缩略图轮播的自适应图像库
vue带缩略图的轮播图插件 View demo 查看演示Download Source 下载源 Today we want to show you how to create a responsive ...
Android仿京东、天猫商品详情页
前言前面在介绍控件TabLayout控件和CoordinatorLayout使用的时候说了下实现京东.天猫详情页面的效果,今天要说的是优化版,是我们线上实现的效果,首先看一下效果: 项目结构分析首 ...
仿京东放大镜效果的实现
仿京东放大镜 (1) 整个案例可以分为三个功能模块 (2) 鼠标经过小图片盒子, 绿色的遮挡层和大图片盒子显示,离开隐藏2个盒子功能 (3)绿色的遮挡层跟随鼠标功能. (4)移动绿色遮挡层,大图片 ...
jquery带缩略图轮播_带有jQuery和PHP的新鲜滑动缩略图库
jquery带缩略图轮播 View demo 查看演示Download Source 下载源 In this tutorial we are going to create another full ...

vue仿京东放大镜加商品缩略图轮播组件

1.vue版本

2. JQ版本

magnifier.js

原html插件,纯jq,学习用

vue仿京东放大镜加商品缩略图轮播组件相关推荐

最新文章

热门文章