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安装包信息 - ...

随机推荐

【Python】python函数每日一讲 - dir()
最近确实是有些忙,刚过了年,积攒了很多事情需要处理,所以每日一函数只能是每两天更新一篇,在这里和大家致歉. 今天我们来看一个非常重要的函数:dir() 中文说明:不带参数时,返回当前范围内的变量.方法 ...
软工实践Beta冲刺(5/7)
队名:起床一起肝活队组长博客:博客链接作业博客:班级博客本次作业的链接组员情况组员1(队长):白晨曦过去两天完成了哪些任务描述: 1.界面的修改与完善展示GitHub当日代码/文档签入记 ...
qemu的drive参数解释
drive参数很简单,可以理解成是定义了一个实际的硬盘(或者是cd)与drive对应的是device-drive option[,option[,option[,...]]] Define a new ...
【题解】POI2014FAR-FarmCraft
这题首先手玩一下一下数据,写出每个节点修建软件所需要的时间和到达它的时间戳(第一次到达它的时间),不难发现实际上就是要最小化这两者之和.然后就想到:一棵子树内,时间戳必然是连续的一段区间,而如果将访问 ...
周记【距gdoi：126天】
这周比上周好了那么一点点……但还是有点呵呵搞了仙人掌图(当然不是动态的……),以及一个远古算法2-sat(神奇的对称性运用,需要巨大脑洞的建边). 然后关于高考不加分竞赛被“打压”……大神们都发表了 ...
MySQL自增属性auto_increment_increment和auto_increment_offset
MySQL的系统变量或会话变量auto_increment_increment(自增步长)和auto_increment_offset(自增偏移量)控制着数据表的自增列ID. mysql> sh ...
安徽师大附中%你赛day7 T2 乘积解题报告
乘积题目背景 \(\mathrm{Smart}\) 最近在潜心研究数学, 他发现了一类很有趣的数字, 叫做无平方因子数. 也就是这一类数字不能够被任意一个质数的平方整除, 比如\(6\).\(7\) ...
[bzoj1033] [ZJOI2008]杀蚂蚁 Big MoNI
这个模拟就不用说了吧...... 注意事项(救命的):1.不能回原位 2.在可以打到target的塔打target的时候,其他打不到的继续打自己的(这是显然的事情只是当时已惘然) 3.如果游戏在某一秒 ...
[SDOI2011]消防/[NOIP2007] 树网的核
消防题目描述某个国家有n个城市,这n个城市中任意两个都连通且有唯一一条路径,每条连通两个城市的道路的长度为zi(zi<=1000). 这个国家的人对火焰有超越宇宙的热情,所以这个国家最兴旺的 ...
hive 动态分区(Dynamic Partition)异常处理
Changing Hive Dynamic Partition Limits Symptoms: Hive enforces limits on the number of dynamic parti ...

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

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

随机推荐

热门专题