Demo 在线地址:
https://sx00xs.github.io/test/40/index.html
---------------------------------------------------------------
ide: vscode
文件格式:.vue
解析:(待补)
<template> <div> <div class="box"> <ul> <li v-for="(item,index) in lists" :key="item.src" :class="{active:item.isActive}" @mouseover="handleOver(item,index)" @mousemove="handleMove" @mouseout="handleOut" > <img :src="item.src"> </li> </ul> </div> <div class="big" v-show="show" ref="myBig"> <div v-show="bigShow"></div> </div> </div> </template> <script> export default { name:'Navs', data(){ return{ show:false, bigShow:false, lists:[ {src:require('../assets/lesson5/shirt_1.jpg'), isActive:false}, {src:require('../assets/lesson5/shirt_2.jpg'), isActive:false}, {src:require('../assets/lesson5/shirt_3.jpg'), isActive:false}, {src:require('../assets/lesson5/shirt_4.jpg'), isActive:false}, ], bigList:[ {src:require('../assets/lesson5/shirt_1_big.jpg')}, {src:require('../assets/lesson5/shirt_2_big.jpg')}, {src:require('../assets/lesson5/shirt_3_big.jpg')}, {src:require('../assets/lesson5/shirt_4_big.jpg')}, ] } }, methods:{ handleOver(item,index){ var oImg=document.createElement('img'); var img= new Image(); img.src=oImg.src=this.bigList[index].src; this.$refs.myBig.appendChild(oImg); this.lists[index].isActive=true; this.show=this.bigShow=true; img.complete ? this.bigShow=false : '' }, handleMove(){ var newWidth= document.documentElement.offsetWidth - event.clientX; this.$refs.myBig.style.top=event.clientY + 20 + 'px'; this.$refs.myBig.style.left = (newWidth < this.$refs.myBig.offsetWidth + 10 ? event.clientX - this.$refs.myBig.offsetWidth - 10 : event.clientX + 10) + 'px'; }, handleOut(){ this.show=false; this.$refs.myBig.removeChild(this.$refs.myBig.lastChild) } } } </script>