仿京东右侧固定栏便捷按钮

京东官网上面,有很多用户体验好的小交互,这些交互特效其实写起来不难,但是这些特效让用户在使用的过程中感觉很舒服,而且感觉好玩。所以这篇文章主要分享其中的一个交互效果,后期将会分享更多其他效果。

这次的交互效果是官网上面,右侧的小按钮,这些小按钮可以让用户快速跳转,所以是便捷按钮。不需要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;
        }

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 23,635评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,112评论 1 91
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    WhaleFall_丶阅读 1,973评论 0 7
  • 在实际开发中,将增删改查的代码操作执行在客户端上是不好的,这样会使代码重复度变高,不利于维护.为了降低耦合性,提出...
    冒险小A阅读 259评论 0 3
  • 文∣M, 現在,中午12:46坐在遇見,自己一個人。想著這樣的狀態很久了,大概有半個月之前,就想著要有這樣的狀態來...
    Anni爱夏阅读 84评论 0 0