表头触摸滑动效果
<template>
<div class="biaotou">
<ul>
<li class="li" v-for="i in list" :key="i.idx" @mouseover="dianji_xuanze(i)" >
{{i.name}}
</li>
<li class="zi"></li>
</ul>
</div>
</template>
<script>
export default {
name: "biaotou",
data() {
return {
list:[
{
name:'111',
idx:'1'
},
{
name:'222',
idx:'2'
},
{
name:'333',
idx:'3'
},
{
name:'444',
idx:'4'
},
],
};
},
created() {},
methods: {
dianji_xuanze(i){
console.log(i)
$('.li').siblings('.zi').stop(true, false).animate({ marginLeft: (Number(i.idx)-1 )* (100) }, 300);//实现下划线滑动
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul{
display: flex;
align-items: center;
position: relative;
}
li{
width:100px;
height:40px;
line-height: 40px;
text-align: center;
cursor: pointer;
}
.li{
z-index: 99999;
}
.zi{
position: absolute;
width:100px;
height:40px;
background-color: red;
}
</style>
搬码试下呗 嘿嘿