Vue.js鼠標(biāo)懸浮更換圖片功能
Vue.js鼠標(biāo)懸浮更換圖片功能?
慕桂英3389331
2018-09-04 14:10:38
1 回答
慕田峪7331174
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊
最近自己做的項(xiàng)目中設(shè)計(jì)師要求分類欄中鼠標(biāo)懸停更換圖片，大致實(shí)現(xiàn)出來的效果就是這樣：
這個(gè)在jQuery中是個(gè)很簡單的事，但是在vue中我還是第一次實(shí)現(xiàn)。
首先將所有的選中后圖片都覆蓋到?jīng)]選中圖片上
html代碼如下
<ul> <li> <a href=""> <img src="../../../img/goods/study.png" alt="學(xué)習(xí)"> <img class="hide_tab" src="../../../img/goods/study_1.png" alt="學(xué)習(xí)"> </a> </li> <li> <a href=""> <img src="../../../img/goods/life.png" alt="生活"> <img class="hide_tab" src="../../../img/goods/life_1.png" alt="生活"> </a> </li> <li> <a href="" > <img src="../../../img/goods/sport.png" alt="運(yùn)動(dòng)"> <img class="hide_tab" src="../../../img/goods/sport_1.png" alt="運(yùn)動(dòng)"> </a> </li> <li> <a href=""> <img src="../../../img/goods/clothes.png" alt="服飾"> <img class="hide_tab" src="../../../img/goods/clothes_1.png" alt="服飾"> </a> </li> <li> <a href="" > <img src="../../../img/goods/hat.png" alt="鞋帽"> <imgclass="hide_tab" src="../../../img/goods/hat_1.png" alt="鞋帽"> </a> </li> <li> <a href="" > <img src="../../../img/goods/food.png" alt="食品"> <img class="hide_tab" src="../../../img/goods/food_1.png" alt="食品"> </a> </li> <li> <a href=""> <img src="../../../img/goods/other.png" alt="其他"> <img class="hide_tab" src="../../../img/goods/other_1.png" alt="其他"> </a> </li> </ul>
css代碼如下
.right { float: left; ul { margin-left: 1px; li { display: inline-block; margin-left: 12px; width: 100px; height: 100px; a{ position: relative; display: inline-block; width: 100px; height: 100px; .hide_tab{ position: absolute; bottom: 0; } } } } }
其實(shí)就是很簡單的通過position:absolute進(jìn)行了布局，現(xiàn)在選中樣式的圖片已經(jīng)全部覆蓋到了沒有選中樣式圖片之上了。
接下來就需要一個(gè)變量控制他們的顯隱。這個(gè)變量應(yīng)該是一個(gè)和每個(gè)分類一一對應(yīng)的，那這個(gè)變量就不應(yīng)該是一個(gè)簡單的布爾值，而是一個(gè)數(shù)字，和每個(gè)分類圖片對應(yīng)。
我定義這個(gè)變量叫做active，在data中聲明
data(){ return{ active: 0 } }
再定義一個(gè)方法控制active變量的變化
showActive(index) { this.active = index; }
方法中的index參數(shù)就是鼠標(biāo)懸浮時(shí)傳入的值
修改html代碼如下
<ul> <li> <a href="" @mouseenter="showActive(1)" @mouseleave="showActive(0)"> <img src="../../../img/goods/study.png" alt="學(xué)習(xí)"> <img v-show="active === 1" class="hide_tab" src="../../../img/goods/study_1.png" alt="學(xué)習(xí)"> </a> </li> <li> <a href="" @mouseenter="showActive(2)" @mouseleave="showActive(0)"> <img src="../../../img/goods/life.png" alt="生活"> <img v-show="active === 2" class="hide_tab" src="../../../img/goods/life_1.png" alt="生活"> </a> </li> <li> <a href="" @mouseenter="showActive(3)" @mouseleave="showActive(0)"> <img src="../../../img/goods/sport.png" alt="運(yùn)動(dòng)"> <img v-show="active === 3" class="hide_tab" src="../../../img/goods/sport_1.png" alt="運(yùn)動(dòng)"> </a> </li> <li> <a href="" @mouseenter="showActive(4)" @mouseleave="showActive(0)"> <img src="../../../img/goods/clothes.png" alt="服飾"> <img v-show="active === 4" class="hide_tab" src="../../../img/goods/clothes_1.png" alt="服飾"> </a> </li> <li> <a href="" @mouseenter="showActive(5)" @mouseleave="showActive(0)"> <img src="../../../img/goods/hat.png" alt="鞋帽"> <img v-show="active === 5" class="hide_tab" src="../../../img/goods/hat_1.png" alt="鞋帽"> </a> </li> <li> <a href="" @mouseenter="showActive(6)" @mouseleave="showActive(0)"> <img src="../../../img/goods/food.png" alt="食品"> <img v-show="active === 6" class="hide_tab" src="../../../img/goods/food_1.png" alt="食品"> </a> </li> <li> <a href="" @mouseenter="showActive(7)" @mouseleave="showActive(0)"> <img src="../../../img/goods/other.png" alt="其他"> <img v-show="active === 7" class="hide_tab" src="../../../img/goods/other_1.png" alt="其他"> </a> </li> </ul>
只有在當(dāng)前index和active相等時(shí)，才會顯示已選中分類的圖片。
而鼠標(biāo)離開時(shí)，傳入一個(gè)沒有與之對應(yīng)的0，這樣就沒有顯示了。
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程，請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
添加回答
舉報(bào)
0/150
提交
取消