放大镜功能
我们有时候需要实现这样一种效果:
当我的鼠标移动上去的时候,实现预览放大。鼠标移走之后,放大效果就消失了
我们今天就研究如何实现这样的功能
Vue.js
Vue是现在最流行的前端框架之一,如果看这篇博客的你还是仅仅只会JavaScript和jQuary的话,你可能要落伍了,因为你的武器不够先进。
Vue的简单程度,超乎你的想象,下面我就向大家演示如何使用Vue实现这个效果:
代码实现
首先我们先把代码给大家看一下,本代码是用Vue.js实现的。
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="/npm/vue@2.6.14/dist/vue.js"></script><style>.imgBox {position: relative;width: 300px;height: 300px;background: url(img/detail_07.png) no-repeat;background-position: 0px 0px;background-size: 100%;}.imgBox .grey {position: absolute;width: 100px;height: 100px;background-color: rgba(200, 200, 200, 0.5);}.bigbox{position: absolute;top: 50%;left: 50%;width: 500px;height: 500px;background: url(img/detail_07.png) no-repeat;background-size: 300%;transform: translate(-50%,-50%);}</style></head><body><div id="app"><div class="imgBox" @mouseenter="show()" @mouseleave="hide()" @mousemove="move($event)"><div class="grey" :style="'top:'+y+'px;'+'left:'+x+'px;'+'display:'+display"></div></div><div v-if="cansee" class="bigbox" :style="'background-position:'+'-'+tx+'px '+'-'+ty+'px'"></div></div><script>var app = new Vue({el: '#app',//初始化页面数据data() {return {x: 0,y: 0,tx:0,ty:0,cansee:false,display:'none'}},//触发函数methods: {move: function(e) {let {x,y} = ex = x - 50y = y - 50// 边界值判断if (x < 0) {x = 0}if (y < 0) {y = 0}if (x > 200) {x = 200}if (y > 200) {y = 200}this.x = xthis.y = ythis.tx=(3*x)*(500/300)this.ty=(3*y)*(500/300)},show: function() {this.display='block'this.cansee=true},hide: function() {this.display='none'this.cansee=false}}})</script></body></html>
Vue的特点不是操作DOM层,它是实现数据层和视图层的双向绑定,换句话说就是你的数据层变化了,你不用管视图层,Vue会自动帮你渲染
好了推销了很长时间Vue接下来我们就来讲解一下我们的实现思路
我们的思路就是利用background-position属性进行图片部分显示,利用background-size进行放大。
不过对于放大,这个可需要一定的数学基础。因为放大前和放大后的东西是成比例的,而且我们要保证位置的精准对应。
代码解读
1.放大比例的计算
注意哈,我们的放大比例不是随便写的,这个放大比例取决于灰色悬浮色块和imgbox的宽度之比。
如果你写的的放大比例不等于这个,而是你自己想随便写的话,那么最后放大的区域和放大镜放置的区域是对应不上的
注意看这里我写css的细节:
.imgBox {position: relative;width: 300px;height: 300px;background: url(img/detail_07.png) no-repeat;background-position: 0px 0px;background-size: 100%;}.imgBox .grey {position: absolute;width: 100px;height: 100px;background-color: rgba(200, 200, 200, 0.5);}
我灰色色块宽度是100px,而我们imgbox的大小是300px。那么我这么写的话,那我的放大倍数已经确定了,是多少呢,3倍!
请继续看我的css代码:
.bigbox{position: absolute;top: 50%;left: 50%;width: 500px;height: 500px;background: url(img/detail_07.png) no-repeat;background-size: 300%;transform: translate(-50%,-50%);}
注意这一行:
background-size:300%
这里我放大了3倍,必须放大3倍,因为我的放大镜的宽度是100px,小图片盒子大小是300px,这个比例是3,已经固定了。
如果这里对应不上的话,就会出现显示区域和放大区域对应不上的怪现象
请看图:
理解这里的话,你想想放大后的大正方形和显示区域的比例,必须和小的对应上才行,不然怎么可能完全对应呢?
2.图片显示位置参数
很多搞前端的小伙伴,我发现对background-position这个属性还不是很了解,其实这个属性很好用的。
这个属性是干什么用的呢?就是你设置背景图片的时候,默认呢图片是在容器的左上角,你不能改变显示背景图片的位置是吧。
那么background-position这个属性就很有用了,他主要是控制图片显示的位置的。放大镜的实现当然需要这个功能
这个属性取负值的话,就可以用margin取负数值理解
对应的代码片段:
<div v-if="cansee" class="bigbox" :style="'background-position:'+'-'+tx+'px '+'-'+ty+'px'"></div>
3.大图片位置截取
问一个问题,放大镜是什么?就是把原来图片的尺寸设置成300%(都可以),然后再截取对应位置区域的图就可以了。没错这就是放大镜
这个截取的位置涉及到数学计算,看看你数学学得怎么样吧
看图:
这里的x,和y,就是换算后的坐标
,也就是说是放大后的相对坐标
对应的代码
//换算坐标//由小图片的坐标,换算到大图坐标move: function(e) {let {x,y} = e//为什么要减去50,因为我想让灰色宽(放大区域部分)显示在鼠标光标之间,所以向左移动半个灰色块长度x = x - 50//所以向上移动半个灰色快长度y = y - 50// 边界值判断if (x < 0) {x = 0}if (y < 0) {y = 0}if (x > 200) {x = 200}if (y > 200) {y = 200}this.x = xthis.y = ythis.tx=(3*x)*(500/300)this.ty=(3*y)*(500/300)},
4.视图层渲染,数据双向绑定
大家可以看到,我的HTML代码里有很多变量
<div id="app"><div class="imgBox" @mouseenter="show()" @mouseleave="hide()" @mousemove="move($event)"><div class="grey" :style="'top:'+y+'px;'+'left:'+x+'px;'+'display:'+display"></div></div><div v-if="cansee" class="bigbox" :style="'background-position:'+'-'+tx+'px '+'-'+ty+'px'"></div>
比如说x、y、display这些,记住这些我们只要在Vue中给他们赋值,视图层马上就变化了,非常方便,所以我们只需要考虑逻辑计算,视图渲染和同步交给我们的Vue.js
数据计算
var app = new Vue({el: '#app',//初始化页面数据data() {return {x: 0,y: 0,tx:0,ty:0,cansee:false,display:'none'}},//触发函数methods: {move: function(e) {let {x,y} = ex = x - 50y = y - 50// 边界值判断if (x < 0) {x = 0}if (y < 0) {y = 0}if (x > 200) {x = 200}if (y > 200) {y = 200}//直接赋值,触发视图层更新,Vue自动更新视图层this.x = xthis.y = ythis.tx=(3*x)*(500/300)this.ty=(3*y)*(500/300)},show: function() {this.display='block'this.cansee=true},hide: function() {this.display='none'this.cansee=false}}})
代码全部讲解完毕了,如果你想学习Vue.js,我有我自己做的网盘,上面有我的Vue笔记
网盘资源(DIY)
放大镜效果