右侧楼层鼠标悬浮会有文字信息像动画一样从左侧弹出来是用什么代码实现的

首页课程实战体系课手记专栏慕课教程

来源：5-2 作业题

qq_陌_45

2018-01-25 14:44:03

就是屏幕右侧那个固定屏幕中间的导航，是用animate({},1000)来实现吗，能否详细说说

写回答

6回答

是谁在欺负我胖虎

2018-02-27

/*最外右侧*/
.out-right{
   position:fixed;
   right:0;
   top: 350px;
   width: 40px;
   z-index: 5;
}
.out-right-main a{
   display:block;
   position: relative;
   width: 40px;
   height: 40px;
   margin-bottom:1px;
   background: #CDD0D4;
   text-align:center;
}
.out-right-main a:hover{
   background: #808080;
}
/*鼠标移入过渡*/
.out-right-main a:hover .out-box{
   right:40px;
}
.out-right-main a i{
   display:block;
   margin: 4px;
   position: relative;
   z-index: 4;
   padding: 5px 0;
}
.out-right-main a img{
   width: 32px;
   height: 32px;
}
/*添加css3过渡以及层级关系*/
.out-box{
   position: absolute;
   right: -50px;
   top: 0;
   padding-right: 10px;
   width: 80px;
   height: 40px;
   line-height: 40px;
   background: #808080;
   display:block;
   transition:right .5s ease;
   color: #fff;
   text-align: center;
   z-index: -1;
}

是谁在欺负我胖虎

2018-02-27

不知道你实现没有通过css3来实现

一路电光带火花

2018-01-26

我这边测试是好好的

一路电光带火花

2018-01-25

<!DOCTYPE html>

<html>

<head>

<title>计算哪一年第几天出生</title>

<style>

/*右侧固定导航*/

.right-fixed {

height: 179px;

width: auto;

position: fixed;

right: 0;

top: 50%;

margin-top: -83px;

}

.right-fixed div {

background: #b7bbbf;

height: 35px;

width: 35px;

line-height: 35px;

text-align: center;

margin-top: 1px;

position: relative;

}

.right-fixed div:hover span {

left: -60px;

-o-transition: all 0.5s;

-ms-transition: all 0.5s;

-moz-transition: all 0.5s;

-webkit-transition: all 0.5s;

transition: all 0.5s;

}

.right-fixed div img {

width: 28px;

height: 28px;

}

.right-fixed div span {

height: 35px;

width: 100px;

/*padding: 0 10px;*/

background: #71777d;

position: absolute;

top: 0;

left: 0;

z-index: 1;

}

</style>

</head>

</script>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

</html>

修改了你的代码，你看下吧，这块不用脚本就能实现，使用CSS3比较简单

hq_陌_45

h 没效果呀。。。

h018-01-26

共1条回复

qq_陌_45

提问者

2018-01-25

<div class="right-fixed">
  <div>
    <img src="icon/13.png">
    <span>我的信息</span>
  </div>
  <div>
    <img src="icon/14.png">
    <span>购物车</span>
  </div>
  <div>
    <img src="icon/15.png">
    <span>喜欢</span>
  </div>
  <div>
    <img src="icon/16.png">
    <span>消息</span>
  </div>
  <div>
    <img src="icon/17.png">
    <span>返回顶部</span>
  </div>
</div>

/*右侧固定导航*/
.right-fixed{
    height: 179px;
    width: auto;
    position: fixed;
    right: 0;
    top: 50%;
    margin-top: -83px;
}

.right-fixed div{
    background: #b7bbbf;
    height: 35px;
    width: 35px;
    line-height: 35px;
    text-align: center;
    margin-top: 1px;
    position: relative;
}

.right-fixed div:hover{
    cursor: pointer;
    border:1px solid gray;
}

.right-fixed div img{
    width: 28px;
    height: 28px;
}

.right-fixed div span{
    height: 35px;
    width: 0;
    padding: 0 10px;
    background: #71777d;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: none;
    transition:width 2s;
}

var fix=0;
     $('.right-fixed div').mouseover(function(){
     	fix=$(this).index();
     	rightFixed(fix);
     });
     function rightFixed(fix){
     	for(var i=0;i<5;i++){
     		$('.right-fixed div span').eq(i).css('display','none');
     	};
     	$('.right-fixed div span').eq(fix).css({
     		'display':'block',
     		'left':'-200px',
     		'width':'200px'
     	});
     };
     rightFixed();
     $('.right-fixed div').mouseleave(function(){
     	$('.right-fixed div span').css('display','none');
     });