js实现侧边栏信息展示效果

目前的网页都右侧边栏，有的是在左侧，类似于导航栏，如一些购物商城，还有一些是在网页的右下角，一般是提示客服信息和微信/QQ等服务。

这里都涉及到一个动画效果的展示，即点击侧边栏时会在侧边栏的右侧或者左侧出现相应的信息。如下图慕课网右下角的侧边栏，把鼠标放在最后一个微信图标上，会弹出慕课网的二维码。

实现动画效果的方式有两种，一种是JavaScript setInterval函数，即设置定时器，实现简单，但是效果不佳。动画效果不够平滑，而且实现的效果有限，不能实现旋转和3D变换。用户体验有待提高。另一种是使用CSS3来实现动画效果。

css属性

描述动画的运行属性（运行时间、次数等）

transition （过渡）

animations（动画）

描述动画的执行属性（参与动画的属性，效果等）

transform （变形）——translate

代码实现：

sidebar.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>sideBar demo</title>

    <link rel="stylesheet" href="css/style.css">

    <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css">

    <link rel="stylesheet" href="bootstrap/dist/css/bootstrap-theme.css">

</head>

<body>

    <div id = "sidebar">

        <ul>

            <li id="prof" class="item">

                <span class="glyphicon glyphicon-user"></span>

                <div>我</div>

            </li>

            <li id="asset" class="item">

                <span class="glyphicon glyphicon-user"></span>

                <div>资产</div>

            </li>

            <li id="brand" class="item">

                <span class="glyphicon glyphicon-user"></span>

                <div>商品</div>

            </li>

            <li id="foot" class="item">

                <span class="glyphicon glyphicon-user"></span>

                <div>足迹</div>

            </li>

            <li id="calender" class="item">

                <span class="glyphicon glyphicon-user"></span>

                <div>日历</div>

            </li>

        </ul>

        <div id="closeBar">

            <span class="glyphicon glyphicon-remove"></span>

        </div>

    </div>

    <div class="nav-content" id="prof-content">

        <div class="nav-con-close">

            <span class="glyphicon glyphicon-chevron-left"></span>

        </div>

        <div>我</div>

    </div>

    <div class="nav-content" id="asset-content">

        <div class="nav-con-close">

            <span class="glyphicon glyphicon-chevron-left"></span>

        </div>

        <div>资产</div>

    </div>

    <div class="nav-content" id="brand-content">

        <div class="nav-con-close">

            <span class="glyphicon glyphicon-chevron-left"></span>

        </div>

        <div>商标</div>

    </div>

    <div class="nav-content" id="foot-content">

        <div class="nav-con-close">

            <span class="glyphicon glyphicon-chevron-left"></span>

        </div>

        <div>足迹</div>

    </div>

    <div class="nav-content" id="calender-content">

        <div class="nav-con-close">

            <span class="glyphicon glyphicon-chevron-left"></span>

        </div>

        <div>日历</div>

    </div>

    <script src="sideBar.js"></script>

</body>

</html>

注：

<!--页面加载顺序是单线程的，加载页面时是从上到下加载，如果在上面遇到script标签或者css时，页面的
渲染就会停止，服务器就回去下载.js和.css文件代码，下载后运行，我们会看到页面停顿，这是种非常不好的体验
所以目前的做法都是把<script>标签放在</body>上面-->
<!--完好体验的页面顺序安排
1、先下载css样式
2、渲染HTML文档结构
3、再下载JavaScript代码-->

style.css

ul{

    list-style: none;

    padding-left:;

}

#sidebar{

    width: 35px;

    background-color: #e1e1e1;

    padding-top: 200px;

    /*设置高度100%都是相对父元素的100%，fixed使该元素脱离流，相对屏幕的100%，即全屏*/

    position: fixed;

    min-height:100%;

    z-index:;

}

.item{

    font-size: 12px;

    font-family: 'Microsoft New Tai Lue';

    text-align: center;

    margin-top: 5px;

}

#closeBar{

    position: absolute;

    bottom: 30px;

    width: 35px;

    text-align: center;

    /*提示别人是个按钮 手的样式*/

    cursor: pointer;

}

.nav-content{

    width: 200px;

    position: fixed;

    min-height: 100%;

    background-color: #e1e1e1;

    /*调试代码时经常使用border，帮我们定位到div的一个区域*/

    border: 1px solid black;

    z-index:;

    /*使用透明度为0来隐藏元素*/

    opacity:;

}

.nav-con-close{

    position: absolute;

    top: 5px;

    right: 5px;

    cursor: pointer;

}

.sidebar-move-left{

    -webkit-animation:sml;

    -o-animation:sml;

    animation:sml;

    /*持续时间*/

    -webkit-animation-duration: 1s;

    -moz-animation-duration: 1s;

    -o-animation-duration: 1s;

    animation-duration: 1s;

    -webkit-animation-iteration-count:;

    -moz-animation-iteration-count:;

    -o-animation-iteration-count:;

    animation-iteration-count:;

    /*执行方向，动画执行结束时保持在它结束时的状态*/

    animation-fill-mode: forwards;

    -moz-animation-fill-mode: forwards;

    -o-animation-fill-mode: forwards;

    -webkit-animation-fill-mode: forwards;

}

@keyframes sml {

    from{

    }

    to{

        transform: translateX(-120px);

    }

}

.closebar-move-right{

    -webkit-animation:cmr;

    -o-animation:cmr;

    animation:cmr;

    /*持续时间*/

    -webkit-animation-duration: 1s;

    -moz-animation-duration: 1s;

    -o-animation-duration: 1s;

    animation-duration: 1s;

    -webkit-animation-iteration-count:;

    -moz-animation-iteration-count:;

    -o-animation-iteration-count:;

    animation-iteration-count:;

    /*执行方向，动画执行结束时保持在它结束时的状态*/

    animation-fill-mode: forwards;

    -moz-animation-fill-mode: forwards;

    -o-animation-fill-mode: forwards;

    -webkit-animation-fill-mode: forwards;

}

@keyframes cmr {

    from{

    }

    to{

        transform: translateX(160px) rotate(405deg) scale(1.5);

    }

}

.sidebar-move-right{

    -webkit-animation:smr;

    -o-animation:smr;

    animation:smr;

    /*持续时间*/

    -webkit-animation-duration: 1s;

    -moz-animation-duration: 1s;

    -o-animation-duration: 1s;

    animation-duration: 1s;

    -webkit-animation-iteration-count:;

    -moz-animation-iteration-count:;

    -o-animation-iteration-count:;

    animation-iteration-count:;

    /*执行方向，动画执行结束时保持在它结束时的状态*/

    animation-fill-mode: forwards;

    -moz-animation-fill-mode: forwards;

    -o-animation-fill-mode: forwards;

    -webkit-animation-fill-mode: forwards;

}

@keyframes smr {

    from{

    }

    to{

        transform: translateX(120px);

    }

}

.closebar-move-left{

    -webkit-animation:cml;

    -moz-animation-name: cml;

    -o-animation:cml;

    animation:cml;

    /*持续时间*/

    -webkit-animation-duration: 1s;

    -moz-animation-duration: 1s;

    -o-animation-duration: 1s;

    animation-duration: 1s;

    -webkit-animation-iteration-count:;

    -moz-animation-iteration-count:;

    -o-animation-iteration-count:;

    animation-iteration-count:;

    /*执行方向，动画执行结束时保持在它结束时的状态*/

    animation-fill-mode: forwards;

    -moz-animation-fill-mode: forwards;

    -o-animation-fill-mode: forwards;

    -webkit-animation-fill-mode: forwards;

}

@keyframes cml {

    from{

        transform: scale(1.5);

    }

    to{

        transform:translateX(-160px) rotate(-405deg) scale(1);

    }

}

.menuContent-move-right{

    -webkit-animation:mmr;

    -moz-animation-name: mmr;

    -o-animation:mmr;

    animation:mmr;

    /*持续时间*/

    -webkit-animation-duration: .5s;

    -moz-animation-duration: .5s;

    -o-animation-duration: .5s;

    animation-duration: .5s;

    -webkit-animation-iteration-count:;

    -moz-animation-iteration-count:;

    -o-animation-iteration-count:;

    animation-iteration-count:;

    /*执行方向，动画执行结束时保持在它结束时的状态*/

    animation-fill-mode: forwards;

    -moz-animation-fill-mode: forwards;

    -o-animation-fill-mode: forwards;

    -webkit-animation-fill-mode: forwards;

}

@keyframes mmr {

    from{

        opacity:;

    }

    to{

        opacity:;

        transform:translateX(120px);

    }

}

.menuContent-move-left{

    -webkit-animation:mml;

    -moz-animation-name: mml;

    -o-animation:mml;

    animation:mml;

    /*持续时间*/

    -webkit-animation-duration: 1s;

    -moz-animation-duration: 1s;

    -o-animation-duration: 1s;

    animation-duration: 1s;

    -webkit-animation-iteration-count:;

    -moz-animation-iteration-count:;

    -o-animation-iteration-count:;

    animation-iteration-count:;

    /*执行方向，动画执行结束时保持在它结束时的状态*/

    animation-fill-mode: forwards;

    -moz-animation-fill-mode: forwards;

    -o-animation-fill-mode: forwards;

    -webkit-animation-fill-mode: forwards;

}

@keyframes mml {

    from{

        opacity:;

    }

    to{

        opacity:;

        transform:translateX(-120px);

    }

}

.menuContent-move-up{

    -webkit-animation:mmu;

    -moz-animation-name: mmu;

    -o-animation:mmu;

    animation:mmu;

    /*持续时间*/

    -webkit-animation-duration: 1s;

    -moz-animation-duration: 1s;

    -o-animation-duration: 1s;

    animation-duration: 1s;

    -webkit-animation-iteration-count:;

    -moz-animation-iteration-count:;

    -o-animation-iteration-count:;

    animation-iteration-count:;

    /*执行方向，动画执行结束时保持在它结束时的状态*/

    animation-fill-mode: forwards;

    -moz-animation-fill-mode: forwards;

    -o-animation-fill-mode: forwards;

    -webkit-animation-fill-mode: forwards;

}

@keyframes mmu {

    from{

        opacity:;

    }

    to{

        opacity:;

        transform:translateY(-250px);

    }

}

sidebar.js

/*

var sideBar = {} 会造成全局污染，sideBar赋给Windows，作为windows的一个属性*/

/*目前常用模块模式的方法，避免全局污染*/

/*立即执行函数*/

(function () {

    var MenuBar = function () {

        this.el = document.querySelector('#sidebar ul');

        this.state = 'allClosed';

        /*禁止向上传播，不然点击sidebar中的ul也会触发和点击关闭按钮一样的事件*/

        this.el.addEventListener('click',function (e) {

            e.stopPropagation();

        });

        var self = this;

        this.menulist = document.querySelectorAll('#sidebar ul > li');

        this.currentOpenMenuContent = null;

        for(var i = 0;i<this.menulist.length;i++){

            this.menulist[i].addEventListener('click',function (e) {

                var menuContentEl = document.getElementById(e.currentTarget.id +'-content');

                if(self.state === 'allClosed'){

                    console.log('open'+menuContentEl.id);

                    menuContentEl.style.top = '0';

                    menuContentEl.style.left = '-85px';

                    menuContentEl.className = 'nav-content';

                    menuContentEl.classList.add('menuContent-move-right');

                    self.state='hasOpened';

                    self.currentOpenMenuContent = menuContentEl;

                }else{

                    console.log('closed'+self.currentOpenMenuContent.id);

                    console.log('open'+menuContentEl.id);

                    self.currentOpenMenuContent.className = 'nav-content';

                    self.currentOpenMenuContent.style.top = '0';

                    self.currentOpenMenuContent.style.left = '35px';

                    self.currentOpenMenuContent.classList.add('menuContent-move-left');

                    menuContentEl.className='nav-content';

                    menuContentEl.style.top = '250px';

                    menuContentEl.style.left = '35px';

                    menuContentEl.classList.add('menuContent-move-up');

                    self.state='hasOpened';

                    self.currentOpenMenuContent = menuContentEl;

                }

            });

        }

        this.menuContentList = document.querySelectorAll('.nav-content > div.nav-con-close');

        for(var i=0;i<this.menuContentList.length;i++){

            this.menuContentList[i].addEventListener('click',function (e) {

                var menuContent = e.currentTarget.parentNode;

                menuContent.className = 'nav-content';

                menuContent.style.top = '0';

                menuContent.style.left ='35px';

                menuContent.classList.add('menuContent-move-left');

                this.state='allClosed';

            });

        }

    };

    /*Sidebar第一个字母大写，构造函数的基本规范 */

    var Sidebar = function (eId,closeBarId) {

        this.state = 'opened';

        this.el = document.getElementById(eId || 'sidebar');

        this.closeBarEl = document.getElementById(closeBarId || 'closeBar');

        /*默认向上冒泡,第三个参数可以不写*/

        var self = this;

        this.menubar = new MenuBar();

        this.el.addEventListener('click',function (event) {

            if(event.target !== self.el){

                //console.log(this);

                self.triggerSwich();

            }

        });

    }

    Sidebar.prototype.close = function () {

        console.log('关闭sidebar');

        this.el.className = 'sidebar-move-left';

        this.closeBarEl.className = 'closebar-move-right';

        this.state = 'closed';

    };

    Sidebar.prototype.open = function () {

        console.log('打开sidebar');

        this.el.style.left = '-120px';

        this.el.className = 'sidebar-move-right';

        this.closeBarEl.style.left = '160px';

        this.closeBarEl.className = 'closebar-move-left';

        this.state = 'opened';

    };

    Sidebar.prototype.triggerSwich = function () {

        if(this.state === 'opened'){

            this.close();

        }else{

            this.open();

        }

    };

    var sidebar = new Sidebar();

})();

js实现侧边栏信息展示效果的更多相关文章

Android项目实战（八）：列表右侧边栏拼音展示效果
之前忙着做项目,好久之前的技术都没有时间总结,而发现自己的博客好多写的技术都比自己掌握的时候晚了很多.不管怎么样,写技术博客一定是一个想成为优秀程序猿或者已经是优秀程序猿必须做的.好吧,下面进行学习阶 ...
js整频滚动展示效果（函数节流鼠标滚轮事件）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
JS实现有点炫的图片展示效果-图片解体和组合
经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...
[JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构
写在前面前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病 ...
JS/CSS 各种操作信息提示效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
JS魔法堂：通过marquee标签实现信息滚动效果
一.前言有限的空间展现无限的内容,这是滚动最常用到的地方.根据信息滚动效果我们可以有很多的实现方式,但HTML自带的 marquee标签是其中一个较简单的实现方式.下面记录一下,供日后查阅. ...
JavaScript实现联想校招员工信息展示
原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 起因今天和豪哥聊天,才知道他是我老乡,而且特别近..真的感觉他是我的贵人,这是他从联想校招扣出来的,我们就用Java ...
微信小程序信息展示列表
微信小程序信息展示列表效果展示: 代码展示: wxml <view class="head"> <view class="head_item" ...
基于 jq 实现拖拽上传 APK 文件，js解析 APK 信息
技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档参考:前端解析ipa.apk安装包信息 - ...

随机推荐

$this是什么意思-成员变量和局部变量的调用
关键字$this代表其所在的当前对象使用当前对象的属性和方法 $this->取值方法内的局部变量不能用$this 关键字取值 /* 和java,c++相比方法体内想访问调用者的属性,必须 ...
hdu 3231 Box Relations (拓扑排序)
Box Relations Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tot ...
xinetd不太详的详解
xinetd不太详的详解 http://blog.sina.com.cn/s/blog_88cdde9f01019fg5.html ################################## ...
bootstrap-table 增加序号列（支持分页）
columns: [ { checkbox: true }, { title: '序号', align: 'center', halign: 'center', formatter: function ...
修改innodb_flush_log_at_trx_commit参数提升insert性能
最近,在一个系统的慢查询日志里发现有个insert操作很慢,达到秒级,并且是比较简单的SQL语句,把语句拿出来到mysql中直接执行,速度却很快. 这种问题一般不是SQL语句本身的问题,而是在具体的应 ...
HDU 5671 矩阵
Matrix Time Limit: 3000/1500 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total Su ...
hdu 1520Anniversary party 树形dp入门
There is going to be a party to celebrate the 80-th Anniversary of the Ural State University. The Un ...
马上给Meltdown和Spectre漏洞打补丁
元旦之后的第一个工作日可谓是惊喜不断,4号就传来了 Google Project Zero 等团队和个人报告的 Meltdown 和 Spectre 内核漏洞的消息,首先简单介绍一下这两个内核漏洞. ...
获取html元素内容
html: <!DOCTYPE ><html> <head> <meta http-equiv="Content-Type" conten ...
HDU1025---（LIS 最长上升子序列的应用）
分析: n行每行包含两个整数p r;意思是p从到r 不能有交叉的路 p刚好从1->n, 可看做下标,到的地方看做值就转化为了最长上升子序列的问题此题难点,怎么将其转化为LIS问题 #inc ...

js实现侧边栏信息展示效果

js实现侧边栏信息展示效果的更多相关文章

随机推荐

热门专题