您好,登錄后才能下訂單哦!
這篇文章主要介紹如何封裝使用Vue圖片放大鏡組件,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
具體內(nèi)容如下
圖片放大鏡的實現(xiàn)過程是將一個小圖放置在一個盒子里,當(dāng)鼠標(biāo)在小圖盒子里移動時,出現(xiàn)一個移動塊(陰影區(qū)域/遮罩層),右側(cè)大圖片盒子出現(xiàn)一個等比例放大的在小圖盒子移動塊中的圖片內(nèi)容。效果圖如下:
實現(xiàn)圖片放大鏡效果的Vue組件代碼如下:
<template> <div> <div class="move" @mouseover="over()" @mouseout="out()" @mousemove="move($event)"> <div id="small"> //小圖片以及遮罩層容器 <div id="float"></div> //遮罩層 <img :src="item" id="smallimg"> //需要放大的圖片 </div> </div> <div id="big"> <img :src="item"> //放大以后的圖片 </div> </div> </template> <script> var float,smallimg,big,bigImg,small,float_maxJL_t,float_maxJL_l,bigImg_maxJL_t,bigImg_maxJL_l; export default{ props: { item: { type: String } }, data() { return{ } }, mounted(){ float = document.getElementById("float"); //左側(cè)遮罩層 smallimg = document.getElementById("smallimg"); //左邊的小圖 big = document.getElementById("big"); //右側(cè)可視區(qū)域 bigImg = big.getElementsByTagName("img")[0]; //右側(cè)大圖 small = document.getElementById("small");// 左側(cè)的容器 //得到右側(cè)可視區(qū)的寬高 var bigW = big.clientWidth; var bigH = big.clientHeight; //右側(cè)大圖的寬高 var bigImgW = bigImg.offsetWidth; var bigImgH = bigImg.offsetHeight; //左側(cè)的小圖的寬高 var smallImgW = smallimg.offsetWidth; var smallImgH = smallimg.offsetHeight; //左側(cè)遮罩層的寬高 float.style.width = bigW/bigImgW * smallImgW + "px"; //175 float.style.height = bigH/bigImgH * smallImgH/3*2 + "px"; //遮罩層運動的最大距離 float_maxJL_l = small.clientWidth -float.offsetWidth-10; float_maxJL_t = small.clientHeight - float.offsetHeight-5; //右側(cè)圖片運動的最大距離 bigImg_maxJL_l = bigImg.clientWidth - big.offsetWidth; bigImg_maxJL_t = bigImg.clientHeight - big.offsetHeight; big.style.display = "none"; float.style.visibility ="hidden"; //鼠標(biāo)未移入左側(cè)區(qū)域使遮罩層以及右側(cè)大圖均不可見 }, methods: { //鼠標(biāo)移入左側(cè)區(qū)域使遮罩層以及右側(cè)大圖可見 over: function () { float.style.visibility ="visible"; big.style.visibility ="visible"; big.style.display = "block"; }, //鼠標(biāo)移出左側(cè)區(qū)域使遮罩層以及右側(cè)大圖不可見 out: function () { float.style.visibility ="hidden"; big.style.display = "none"; }, //鼠標(biāo)移動時遮罩層隨鼠標(biāo)的移動而移動 move: function (ev) { var l = ev.clientX - small.offsetLeft - float.offsetWidth/2; var t = ev.clientY - small.offsetTop - float.offsetHeight/2; if( l < 0 ) l = 0; // 超出左邊界賦值為0 if( t < 0 ) t = 0; // 超出上邊界賦值為0 if( l > float_maxJL_l ) l = float_maxJL_l; //限制其運動范圍在容器之內(nèi) if( t > float_maxJL_t ) t = float_maxJL_t; //求出來一個比例 var scaleL = l/float_maxJL_l; var scaleT = t/float_maxJL_t; //遮罩層運動位置 float.style.left = l + "px"; float.style.top = t + "px"; //右側(cè)大圖運動位置 bigImg.style.left = -scaleL * bigImg_maxJL_l + "px"; bigImg.style.top = -scaleT * bigImg_maxJL_t + "px"; }, }, } </script> //css樣式 <style lang="scss" rel="stylesheet/scss" scoped> @import 'src/assets/scss/variable.scss'; #float { width: 120px; height: 120px; position: absolute; //必須 background: $primary; border: 1px solid #ccc; opacity: 0.5; cursor:move ; } #big { position: absolute; //必須 top: 260px; left: 37.6%; width: 350px; height: 500px; overflow: hidden; border: 1px solid #ccc; background: #ffffff; z-index: 1; visibility: hidden; } #small { position: relative; //必須 z-index: 1; img{ width:340px; height:320px; } } #big img { position: absolute; //必須 z-index: 5; width:700px; height:700px; } </style>
在css中需要注意設(shè)置各個圖片以及遮罩層的位置即position。
遮罩層分析:
左側(cè)遮罩層的寬(高) = 右側(cè)可視區(qū)域的寬(高)/右側(cè)大圖的寬(高)*左側(cè)小圖的寬(高)
(遮罩層可以理解為模擬右側(cè)大圖盒子,在右側(cè)大圖盒子中放置的是一張大的圖片,然后根據(jù)一定比例得到浮動區(qū)域,同時將盒子設(shè)置成溢出隱藏。右側(cè)大圖相對于右側(cè)容器的呈現(xiàn)比例和左側(cè)遮罩層相對于左側(cè)容器的比例相對應(yīng))
遮罩層運動的距離=左側(cè)容器的寬(高)-遮罩層的寬(高);(使其總是在左側(cè)容器中運動)
當(dāng)鼠標(biāo)移動到左側(cè)小圖盒子的時候我們需要實現(xiàn)鼠標(biāo)始終在遮罩層中,并且遮罩層會隨著鼠標(biāo)的移動而移動(言外之意:遮罩層的位置和鼠標(biāo)移動時的坐標(biāo)息息相關(guān),且不能使它溢出左邊容器,計算方法見代碼)。
注意:這里有一個潛藏的bug,即當(dāng)你的界面滾動的時候,遮罩層不會隨界面的滾動而移動,當(dāng)界面向下滾動的時候,鼠標(biāo)在左側(cè)容器內(nèi)但卻不再在遮罩層區(qū)域里,且無法再移動遮罩層。解決辦法如下:
move = function (ev){ var scroll = this.getClientHeight(); //得到當(dāng)前界面移動的位置 var l = ev.clientX - small.offsetLeft - float.offsetWidth/2; var t = ev.clientY - small.offsetTop - float.offsetHeight/2; t=t+scroll; //遮罩層移動的高度應(yīng)該相應(yīng)的加上界面滾動的高度 if( l < 0 ) l = 0; if( t < 0 ) t = 0; if( l > float_maxJL_l ) l = float_maxJL_l; if( t > float_maxJL_t ) t = float_maxJL_t; var scaleL = l/float_maxJL_l; var scaleT = t/float_maxJL_t; float.style.left = l + "px"; float.style.top = t + "px"; bigImg.style.left = -scaleL * bigImg_maxJL_l + "px"; bigImg.style.top = -scaleT * bigImg_maxJL_t + "px"; }, //獲取界面滾動的高度的方法 getClientHeight: function(){ var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop) { scrollTop=document.documentElement.scrollTop; } else if(document.body) { scrollTop=document.body.scrollTop; } return scrollTop; }
以上是“如何封裝使用Vue圖片放大鏡組件”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。