簡單介紹Vue實現滑鼠懸浮切換圖片src
導讀 | 這篇文章主要為大家詳細介紹了Vue實現滑鼠懸浮切換圖片src,文中示例程式碼介紹的非常詳細,具有一定的參考價值,感興趣的小夥伴們可以參考一下 |
本文例項為大家分享了Vue實現滑鼠懸浮切換圖片src的具體程式碼,供大家參考,具體內容如下
需求:
1. 滑鼠懸浮到圖示按鈕上面,圖片切換成灰色按鈕
2. 滑鼠離開圖示按鈕,圖片切換成回白色按鈕
Html部分:
< !-- 如果此處的兩個滑鼠事件不生效,可以在mouseenter後面新增.native字尾 --> < div class="left-btn" @click="saveTemplate()" @mouseenter="changeImageSrc(1, 'hover')" @mouseleave="changeImageSrc(1, '')"> < img :src="saveTemplateSrc" class="left-btn-img" alt=""> < span class="left-btn-text">儲存模板 < /div> < div class="left-btn" @click="deleteSelectStock()" @mouseenter="changeImageSrc(2, 'hover')" @mouseleave="changeImageSrc(2, '')"> < img :src="deleteSelectStockSrc" class="left-btn-img" alt=""> < span class="left-btn-text">刪除選中行 < /div> < div class="left-btn" @click="deleteTableData()" @mouseenter="changeImageSrc(3, 'hover')" @mouseleave="changeImageSrc(3, '')"> < img :src="deleteTableDataSrc" class="left-btn-img" alt=""> < span class="left-btn-text">清空當前表格 < /div>
Js部分:
// 在data中先定義圖片的初始src saveTemplateSrc: require("@/assets/dataBrowser/saveTemplate.png"), deleteSelectStockSrc: require("@/assets/dataBrowser/deleteSelectedRow.png"), deleteTableDataSrc: require("@/assets/dataBrowser/clearCurrentList.png") // 在methods中繫結滑鼠懸浮事件 changeImageSrc (key, way) { let tempStr = way === 'hover' ? 'Hover' : '' switch (key) { case 1: this.saveTemplateSrc = require(`@/assets/dataBrowser/saveTemplate${tempStr}.png`) break case 2: this.deleteSelectStockSrc = require(`@/assets/dataBrowser/deleteSelectedRow${tempStr}.png`) break case 3: this.deleteTableDataSrc = require(`@/assets/dataBrowser/clearCurrentList${tempStr}.png`) break } }
以上就是本文的全部內容,希望對大家的學習有所幫助。
原文來自:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69955379/viewspace-2885924/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 滑鼠懸浮實現圖片動畫上下切換效果動畫
- CSS滑鼠懸浮圖片模糊切換效果CSS
- css滑鼠懸浮切換圖片滑鼠離開又恢復預設CSS
- 滑鼠懸浮圖片實現翻轉效果
- 滑鼠懸浮圖片實現縮放效果
- javascript實現滑鼠懸浮圖片實現抖動效果JavaScript
- 滑鼠懸浮實現當前圖片高亮效果詳解
- 滑鼠懸浮中英文切換橫向導航選單
- CSS3實現的滑鼠懸浮廣告牌翻轉切換效果CSSS3
- CSS滑鼠懸浮圖片動畫放大效果CSS動畫
- 2020 用html jQuery實現廣告輪播圖自動切換 滾動頁面 滑鼠懸浮下標且左右切換圖片HTMLjQuery
- css滑鼠浮劃過切換按鈕背景圖片CSS
- CSS3滑鼠懸浮圖片縮小出現文CSSS3
- 滑鼠懸浮遮罩層動畫方式滑動切換效果遮罩動畫
- JQuery實現簡單美觀的圖片切換效果jQuery
- jQuery滑鼠懸浮當前圖片高亮其他圖片灰暗效果jQuery
- CSS3滑鼠懸浮圖片閃動效果CSSS3
- Andorid 任意介面懸浮窗,實現懸浮窗如此簡單
- javascript實現的圖片簡單切換程式碼例項JavaScript
- css實現滑鼠滑過切換背景圖片程式碼CSS
- jquery實現的圖片預載入簡單介紹jQuery
- 滑鼠懸浮圖片3D翻轉出現文字說明3D
- CSS3滑鼠懸浮圖片前後翻轉CSSS3
- 滑鼠懸浮div實現旋轉效果
- js table滑鼠懸浮當前行高亮和切換資料效果JS
- 滑鼠懸浮實現環形旋轉效果
- jQuery實現的滑鼠滑過切換圖片程式碼例項jQuery
- HTML CSS 實現滑鼠懸停時圖片拉近效果HTMLCSS
- css滑鼠懸浮下拉選單效果CSS
- CSS滑鼠移動圖片切換功能CSS
- jQuery 滑鼠懸浮連結彈出跟隨圖片詳解jQuery
- 滑鼠懸浮實現連結背景變色效果
- js滑鼠懸浮字串實現字串跳動效果JS字串
- 滑鼠懸浮實現翻牌效果程式碼例項
- javascript實現的滑鼠懸浮當前td單元格變色效果JavaScript
- 滑鼠懸浮導航選單底部出現動畫橫線動畫
- BLOCK、BFC、邊距合併,滑鼠懸浮選單出現BloC
- javascript圖片預載入簡單介紹JavaScript