京东官网上面，有很多用户体验好的小交互，这些交互特效其实写起来不难，但是这些特效让用户在使用的过程中感觉很舒服，而且感觉好玩。所以这篇文章主要分享其中的一个交互效果，后期将会分享更多其他效果。
这次的交互效果是官网上面，右侧的小按钮，这些小按钮可以让用户快速跳转，所以是便捷按钮。不需要js，只需通过css就可以达到效果，所以简单易用而且效果好。
先看一下效果：
仿京东右侧固定栏便捷按钮
通过效果可以观察到，其实里面的交互效果，主要就是通过过渡属性来实现，所以开发起来非常简单。
现在看一下它的结构，主要分成上下两部分，其中每个按钮可以通过li标签来管理，每个li内部又分成两部分：一部分是默认状态下显示的图标按钮，另外一部分是鼠标悬停上去显示的文字。
结构代码如下：
<div id="right-nav">
<div class="w">
<ul id="right-nav-list1">
<li><a><img src="https://demo.demohuo.top/jquery/20/2035/demo/img/public/5_24.png"></a><div>京东会员</div></li>
<li><a><img src="https://demo.demohuo.top/jquery/20/2035/demo/img/public/5_03.png"></a><div>购物车</div></li>
<li><a><img src="https://demo.demohuo.top/jquery/20/2035/demo/img/public/5_06.png"></a><div>我的关注</div></li>
<li><a><img src="https://demo.demohuo.top/jquery/20/2035/demo/img/public/5_20.png"></a><div>我的足迹</div></li>
<li><a><img src="https://demo.demohuo.top/jquery/20/2035/demo/img/public/5_11.png"></a><div>我的消息</div></li>
<li><a><img src="https://demo.demohuo.top/jquery/20/2035/demo/img/public/5_17.png"></a><div>咨询JIMI</div></li>
</ul>
<ul id="right-nav-list2">
<li><a><img src="https://demo.demohuo.top/jquery/20/2035/demo/img/public/5_28.png"></a><div>顶部</div></li>
<li><a><img src="https://demo.demohuo.top/jquery/20/2035/demo/img/public/5_30.png"></a><div>反馈</div></li>
</ul>
</div>
</div>
css代码也是比较简单，基本的布局代码，通过定位来实现。
代码如下：
*{
margin: 0;
padding:0;
}
ul{
list-style: none;
}
#right-nav{
width:40px;
height: 100%;
position: fixed;
top:0;
right:0;
z-index: 20;
border-right: 5px solid #7A6E6E;
}
#right-nav .w{
position: fixed;
bottom:22px;
right:0;
width:40px;
height: 76%;
}
#right-nav-list1{
position: relative;
right: 0;
top: 0;
z-index: 20;
}
#right-nav-list2{
position: fixed;
right: 0;
bottom: 0;
z-index: 20;
}
#right-nav li{
position: relative;
left: 0;
top: 0;
height: 34px;
width: 40px;
margin-bottom: 1px;
cursor: pointer;
}
#right-nav li a{
width: 100%;
height: 100%;
display: block;
background: #7a6e6e;
padding: 7px;
box-sizing: border-box;
border-radius: 3px;
}
#right-nav li div{
position: absolute;
left: 50px;
top: 0;
z-index: -1;
font-size: 12px;
background: #c81623;
color: #fff;
height: 34px;
width: 60px;
line-height: 31px;
text-align: center;
border-radius: 3px;
transition: all linear 300ms;
}
#right-nav li:hover,#right-nav li:hover a{
background-color: #c81623;
}
#right-nav li:hover div{
left:-58px;
}
