右侧导航的动效
可以直接在下面代码里面加上么？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕淘网</title>
<style type="text/css">
/*右导航样式*/
*{
margin: 0;
padding: 0;
list-style: none;
}
.rightNav{
position: fixed;
top: 50%;
right: 0;
margin-top: -82px;
}
.rightNavBox{
width: 40px;
height: 40px;
background: #b7bbbf;
text-align: center;
line-height: 40px;
margin-bottom: 1px;
position: relative;
opacity:
}
.rightNavBox img{
width: 20px;
height: 20px;
}
.rightNavWrap{
position: absolute;
width: 61px;
height: 40px;
background: #71777d;
left: -61px;
font-family: "微软雅黑";
font-size: 12px;
text-align: center;
line-height: 40px;
color: #fff;
display: none;
}
.poOne{
top: 0;
}
.poTwo{
top: 41px;
}
.poThree{
top: 82px;
}
.poFour{
top: 123px;
}
.poFive{
bottom: 1px;
}
</style>
</head>
<body>
<!-- 右导航 -->
<ul class="rightNav">
<li class="rightNavBox"><a href="#"><img src="images/icon/13.png"></a></li>
<li class="rightNavBox"><a href="#"><img src="images/icon/14.png"></a></li>
<li class="rightNavBox"><a href="#"><img src="images/icon/15.png"></a></li>
<li class="rightNavBox"><a href="#"><img src="images/icon/16.png"></a></li>
<li class="rightNavBox"><a href="#"><img src="images/icon/17.png"></a></li>
<li class="rightNavWrap poOne">会员</li>
<li class="rightNavWrap poTwo">购物车</li>
<li class="rightNavWrap poThree">我的关注</li>
<li class="rightNavWrap poFour">我的消息</li>
<li class="rightNavWrap poFive">顶部</li>
</ul>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// 右导航动效
// 给右导航绑定事件，当鼠标滑过时，显示对应内容
for(var m=0;m<$('.rightNavBox').length;m++){
$('.rightNavBox').eq(m).attr('data-index',m);
$('.rightNavBox').mouseover(function(){
index=$(this).attr('data-index');
$('.rightNavWrap').eq(index).show();
$('.rightNavBox').eq(index).css('background','#71777d');
})
}
// 给右导航绑定事件，当鼠标离开时，隐藏对应内容
$('.rightNavBox').mouseout(function(){
$('.rightNavWrap').hide();
$('.rightNavBox').css('background','#b7bbbf');
})
// 给右导航子元素绑定事件，当鼠标滑过子元素时，显示对应内容
$('.rightNavWrap').mouseover(function(){
$('.rightNavWrap').eq(index).show();
$('.rightNavBox').eq(index).css('background','#71777d');
})
// 给右导航子元素绑定事件，当鼠标离开子元素时，隐藏对应内容
$('.rightNavWrap').mouseout(function(){
$('.rightNavWrap').hide();
$('.rightNavBox').css('background','#b7bbbf');
})
})
</script>
</body>
</html>
正在回答
你好，测试了你上传的代码，显示与隐藏效果是可以的。
在提供的效果视频中右侧导航子菜单是缓慢显示出来的，可以使用animate方法完善下这个效果。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星