導(dǎo)航下拉劃塊滑動(dòng)效果, 隨著鼠標(biāo)放到不同的導(dǎo)航, 下劃塊會(huì)跟著左右滑動(dòng)
HTML代碼如下:
<div id="nav"> <ul> <li> <a href="">財(cái)經(jīng)</a> </li> <li> <a href="">娛樂(lè)</a> </li> <li> <a href="">NBA</a> </li> <li> <a href="">綜藝</a> </li> <span class="slider"></span> </ul> </div>
jquery代碼如下:
$(function(){
$("#nav>ul>li").hover(
function(){
let pos = $(this).position();
$(".slider").css({
'left' : pos.left + "px",
}).addClass("transform_slider");
},
function(event){
$(".slider").removeClass("transform_slider");
}
);
})CSS樣式如下:
*{
padding: 0; margin:0;
}
ul,ol,li{
list-style: none;
}
a{
text-decoration: none;
}
body{
font-size: 14px;
font-family: '微軟雅黑';
}
#nav{
height: 44px;
background-color: #0A0E11;
}
#nav>ul{
width:500px;
margin:0 auto;
position: relative;
height: 44px;
}
#nav>ul>li{
width: 52px;
height: 44px; line-height: 44px;
float: left;
}
#nav>ul>li>a{
color: #fff;
display: block;
height: 44px;
text-align: center;
}
.slider{
position: absolute;
top:44px;
left:0;
width: 52px;
height: 5px;
background-color: #5FB878;
transition:all .2s;
-webkit-transition:all .2s;
transform:scale(0,1);
-ms-transform:scale(0,1);
-webkit-transform:scale(0,1);
}
.transform_slider{
transform:scale(1,1);
-ms-transform:scale(1,1);
-webkit-transform:scale(1,1);
}