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

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

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

css属性

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

transition （过渡）

animations（ 动画）

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

transform （变形）——translate

代码实现：

sidebar.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>sideBar demo</title>
  6.     <link rel="stylesheet" href="css/style.css">
  7.     <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css">
  8.     <link rel="stylesheet" href="bootstrap/dist/css/bootstrap-theme.css">
  9. </head>
  10. <body>
  11.     <div id = "sidebar">
  12.         <ul>
  13.             <li id="prof" class="item">
  14.                 <span class="glyphicon glyphicon-user"></span>
  15.                 <div>我</div>
  16.             </li>
  17.             <li id="asset" class="item">
  18.                 <span class="glyphicon glyphicon-user"></span>
  19.                 <div>资产</div>
  20.             </li>
  21.             <li id="brand" class="item">
  22.                 <span class="glyphicon glyphicon-user"></span>
  23.                 <div>商品</div>
  24.             </li>
  25.             <li id="foot" class="item">
  26.                 <span class="glyphicon glyphicon-user"></span>
  27.                 <div>足迹</div>
  28.             </li>
  29.             <li id="calender" class="item">
  30.                 <span class="glyphicon glyphicon-user"></span>
  31.                 <div>日历</div>
  32.             </li>
  33.         </ul>
  34.         <div id="closeBar">
  35.             <span class="glyphicon glyphicon-remove"></span>
  36.         </div>
  37.     </div>
  38.     <div class="nav-content" id="prof-content">
  39.         <div class="nav-con-close">
  40.             <span class="glyphicon glyphicon-chevron-left"></span>
  41.         </div>
  42.         <div>我</div>
  43.     </div>
  44.     <div class="nav-content" id="asset-content">
  45.         <div class="nav-con-close">
  46.             <span class="glyphicon glyphicon-chevron-left"></span>
  47.         </div>
  48.         <div>资产</div>
  49.     </div>
  50.     <div class="nav-content" id="brand-content">
  51.         <div class="nav-con-close">
  52.             <span class="glyphicon glyphicon-chevron-left"></span>
  53.         </div>
  54.         <div>商标</div>
  55.     </div>
  56.     <div class="nav-content" id="foot-content">
  57.         <div class="nav-con-close">
  58.             <span class="glyphicon glyphicon-chevron-left"></span>
  59.         </div>
  60.         <div>足迹</div>
  61.     </div>
  62.     <div class="nav-content" id="calender-content">
  63.         <div class="nav-con-close">
  64.             <span class="glyphicon glyphicon-chevron-left"></span>
  65.         </div>
  66.         <div>日历</div>
  67.     </div>
  68.     <script src="sideBar.js"></script>
  69. </body>
  70. </html>

注：

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

    style.css
  1. ul{
  2.     list-style: none;
  3.     padding-left:;
  4. }
  5. #sidebar{
  6.     width: 35px;
  7.     background-color: #e1e1e1;
  8.     padding-top: 200px;
  9.     /*设置高度100%都是相对父元素的100%，fixed使该元素脱离流，相对屏幕的100%，即全屏*/
  10.     position: fixed;
  11.     min-height:100%;
  12.     z-index:;
  13. }
  14.  
  15. .item{
  16.     font-size: 12px;
  17.     font-family: 'Microsoft New Tai Lue';
  18.     text-align: center;
  19.     margin-top: 5px;
  20. }
  21.  
  22. #closeBar{
  23.     position: absolute;
  24.     bottom: 30px;
  25.     width: 35px;
  26.     text-align: center;
  27.     /*提示别人是个按钮 手的样式*/
  28.     cursor: pointer;
  29. }
  30.  
  31. .nav-content{
  32.     width: 200px;
  33.     position: fixed;
  34.     min-height: 100%;
  35.     background-color: #e1e1e1;
  36.     /*调试代码时经常使用border，帮我们定位到div的一个区域*/
  37.     border: 1px solid black;
  38.     z-index:;
  39.     /*使用透明度为0来隐藏元素*/
  40.     opacity:;
  41. }
  42.  
  43. .nav-con-close{
  44.     position: absolute;
  45.     top: 5px;
  46.     right: 5px;
  47.     cursor: pointer;
  48. }
  49. .sidebar-move-left{
  50.     -webkit-animation:sml;
  51.     -o-animation:sml;
  52.     animation:sml;
  53.     /*持续时间*/
  54.     -webkit-animation-duration: 1s;
  55.     -moz-animation-duration: 1s;
  56.     -o-animation-duration: 1s;
  57.     animation-duration: 1s;
  58.     -webkit-animation-iteration-count:;
  59.     -moz-animation-iteration-count:;
  60.     -o-animation-iteration-count:;
  61.     animation-iteration-count:;
  62.     /*执行方向，动画执行结束时保持在它结束时的状态*/
  63.     animation-fill-mode: forwards;
  64.     -moz-animation-fill-mode: forwards;
  65.     -o-animation-fill-mode: forwards;
  66.     -webkit-animation-fill-mode: forwards;
  67.  
  68. }
  69.  
  70. @keyframes sml {
  71.     from{
  72.  
  73.     }
  74.     to{
  75.         transform: translateX(-120px);
  76.     }
  77. }
  78. .closebar-move-right{
  79.     -webkit-animation:cmr;
  80.     -o-animation:cmr;
  81.     animation:cmr;
  82.     /*持续时间*/
  83.     -webkit-animation-duration: 1s;
  84.     -moz-animation-duration: 1s;
  85.     -o-animation-duration: 1s;
  86.     animation-duration: 1s;
  87.     -webkit-animation-iteration-count:;
  88.     -moz-animation-iteration-count:;
  89.     -o-animation-iteration-count:;
  90.     animation-iteration-count:;
  91.     /*执行方向，动画执行结束时保持在它结束时的状态*/
  92.     animation-fill-mode: forwards;
  93.     -moz-animation-fill-mode: forwards;
  94.     -o-animation-fill-mode: forwards;
  95.     -webkit-animation-fill-mode: forwards;
  96. }
  97.  
  98. @keyframes cmr {
  99.     from{
  100.  
  101.     }
  102.     to{
  103.         transform: translateX(160px) rotate(405deg) scale(1.5);
  104.     }
  105. }
  106.  
  107. .sidebar-move-right{
  108.     -webkit-animation:smr;
  109.     -o-animation:smr;
  110.     animation:smr;
  111.     /*持续时间*/
  112.     -webkit-animation-duration: 1s;
  113.     -moz-animation-duration: 1s;
  114.     -o-animation-duration: 1s;
  115.     animation-duration: 1s;
  116.     -webkit-animation-iteration-count:;
  117.     -moz-animation-iteration-count:;
  118.     -o-animation-iteration-count:;
  119.     animation-iteration-count:;
  120.     /*执行方向，动画执行结束时保持在它结束时的状态*/
  121.     animation-fill-mode: forwards;
  122.     -moz-animation-fill-mode: forwards;
  123.     -o-animation-fill-mode: forwards;
  124.     -webkit-animation-fill-mode: forwards;
  125. }
  126.  
  127. @keyframes smr {
  128.     from{
  129.  
  130.     }
  131.     to{
  132.         transform: translateX(120px);
  133.     }
  134. }
  135. .closebar-move-left{
  136.     -webkit-animation:cml;
  137.     -moz-animation-name: cml;
  138.     -o-animation:cml;
  139.     animation:cml;
  140.     /*持续时间*/
  141.     -webkit-animation-duration: 1s;
  142.     -moz-animation-duration: 1s;
  143.     -o-animation-duration: 1s;
  144.     animation-duration: 1s;
  145.     -webkit-animation-iteration-count:;
  146.     -moz-animation-iteration-count:;
  147.     -o-animation-iteration-count:;
  148.     animation-iteration-count:;
  149.     /*执行方向，动画执行结束时保持在它结束时的状态*/
  150.     animation-fill-mode: forwards;
  151.     -moz-animation-fill-mode: forwards;
  152.     -o-animation-fill-mode: forwards;
  153.     -webkit-animation-fill-mode: forwards;
  154. }
  155.  
  156. @keyframes cml {
  157.     from{
  158.         transform: scale(1.5);
  159.     }
  160.     to{
  161.         transform:translateX(-160px) rotate(-405deg) scale(1);
  162.     }
  163. }
  164.  
  165. .menuContent-move-right{
  166.     -webkit-animation:mmr;
  167.     -moz-animation-name: mmr;
  168.     -o-animation:mmr;
  169.     animation:mmr;
  170.     /*持续时间*/
  171.     -webkit-animation-duration: .5s;
  172.     -moz-animation-duration: .5s;
  173.     -o-animation-duration: .5s;
  174.     animation-duration: .5s;
  175.     -webkit-animation-iteration-count:;
  176.     -moz-animation-iteration-count:;
  177.     -o-animation-iteration-count:;
  178.     animation-iteration-count:;
  179.     /*执行方向，动画执行结束时保持在它结束时的状态*/
  180.     animation-fill-mode: forwards;
  181.     -moz-animation-fill-mode: forwards;
  182.     -o-animation-fill-mode: forwards;
  183.     -webkit-animation-fill-mode: forwards;
  184. }
  185.  
  186. @keyframes mmr {
  187.     from{
  188.         opacity:;
  189.     }
  190.     to{
  191.         opacity:;
  192.         transform:translateX(120px);
  193.     }
  194.  
  195. }
  196.  
  197. .menuContent-move-left{
  198.     -webkit-animation:mml;
  199.     -moz-animation-name: mml;
  200.     -o-animation:mml;
  201.     animation:mml;
  202.     /*持续时间*/
  203.     -webkit-animation-duration: 1s;
  204.     -moz-animation-duration: 1s;
  205.     -o-animation-duration: 1s;
  206.     animation-duration: 1s;
  207.     -webkit-animation-iteration-count:;
  208.     -moz-animation-iteration-count:;
  209.     -o-animation-iteration-count:;
  210.     animation-iteration-count:;
  211.     /*执行方向，动画执行结束时保持在它结束时的状态*/
  212.     animation-fill-mode: forwards;
  213.     -moz-animation-fill-mode: forwards;
  214.     -o-animation-fill-mode: forwards;
  215.     -webkit-animation-fill-mode: forwards;
  216. }
  217.  
  218. @keyframes mml {
  219.     from{
  220.         opacity:;
  221.     }
  222.     to{
  223.         opacity:;
  224.         transform:translateX(-120px);
  225.     }
  226.  
  227. }
  228.  
  229. .menuContent-move-up{
  230.     -webkit-animation:mmu;
  231.     -moz-animation-name: mmu;
  232.     -o-animation:mmu;
  233.     animation:mmu;
  234.     /*持续时间*/
  235.     -webkit-animation-duration: 1s;
  236.     -moz-animation-duration: 1s;
  237.     -o-animation-duration: 1s;
  238.     animation-duration: 1s;
  239.     -webkit-animation-iteration-count:;
  240.     -moz-animation-iteration-count:;
  241.     -o-animation-iteration-count:;
  242.     animation-iteration-count:;
  243.     /*执行方向，动画执行结束时保持在它结束时的状态*/
  244.     animation-fill-mode: forwards;
  245.     -moz-animation-fill-mode: forwards;
  246.     -o-animation-fill-mode: forwards;
  247.     -webkit-animation-fill-mode: forwards;
  248. }
  249.  
  250. @keyframes mmu {
  251.     from{
  252.         opacity:;
  253.     }
  254.     to{
  255.         opacity:;
  256.         transform:translateY(-250px);
  257.     }
  258.  
  259. }

sidebar.js

  1. /*
  2. var sideBar = {} 会造成全局污染，sideBar赋给Windows，作为windows的一个属性*/
  3. /*目前常用模块模式的方法，避免全局污染*/
  4.  
  5. /*立即执行函数*/
  6. (function () {
  7.     var MenuBar = function () {
  8.         this.el = document.querySelector('#sidebar ul');
  9.         this.state = 'allClosed';
  10.         /*禁止向上传播，不然点击sidebar中的ul也会触发和点击关闭按钮一样的事件*/
  11.         this.el.addEventListener('click',function (e) {
  12.             e.stopPropagation();
  13.         });
  14.         var self = this;
  15.         this.menulist = document.querySelectorAll('#sidebar ul > li');
  16.         this.currentOpenMenuContent = null;
  17.         for(var i = 0;i<this.menulist.length;i++){
  18.             this.menulist[i].addEventListener('click',function (e) {
  19.                 var menuContentEl = document.getElementById(e.currentTarget.id +'-content');
  20.                 if(self.state === 'allClosed'){
  21.                     console.log('open'+menuContentEl.id);
  22.                     menuContentEl.style.top = '0';
  23.                     menuContentEl.style.left = '-85px';
  24.                     menuContentEl.className = 'nav-content';
  25.                     menuContentEl.classList.add('menuContent-move-right');
  26.                     self.state='hasOpened';
  27.                     self.currentOpenMenuContent = menuContentEl;
  28.                 }else{
  29.                     console.log('closed'+self.currentOpenMenuContent.id);
  30.                     console.log('open'+menuContentEl.id);
  31.                     self.currentOpenMenuContent.className = 'nav-content';
  32.                     self.currentOpenMenuContent.style.top = '0';
  33.                     self.currentOpenMenuContent.style.left = '35px';
  34.                     self.currentOpenMenuContent.classList.add('menuContent-move-left');
  35.                     menuContentEl.className='nav-content';
  36.                     menuContentEl.style.top = '250px';
  37.                     menuContentEl.style.left = '35px';
  38.                     menuContentEl.classList.add('menuContent-move-up');
  39.                     self.state='hasOpened';
  40.                     self.currentOpenMenuContent = menuContentEl;
  41.  
  42.                 }
  43.             });
  44.         }
  45.         this.menuContentList = document.querySelectorAll('.nav-content > div.nav-con-close');
  46.         for(var i=0;i<this.menuContentList.length;i++){
  47.             this.menuContentList[i].addEventListener('click',function (e) {
  48.                 var menuContent = e.currentTarget.parentNode;
  49.                 menuContent.className = 'nav-content';
  50.                 menuContent.style.top = '0';
  51.                 menuContent.style.left ='35px';
  52.                 menuContent.classList.add('menuContent-move-left');
  53.                 this.state='allClosed';
  54.             });
  55.         }
  56.     };
  57.     /*Sidebar第一个字母大写，构造函数的基本规范 */
  58.     var Sidebar = function (eId,closeBarId) {
  59.         this.state = 'opened';
  60.         this.el = document.getElementById(eId || 'sidebar');
  61.         this.closeBarEl = document.getElementById(closeBarId || 'closeBar');
  62.         /*默认向上冒泡,第三个参数可以不写*/
  63.         var self = this;
  64.         this.menubar = new MenuBar();
  65.         this.el.addEventListener('click',function (event) {
  66.             if(event.target !== self.el){
  67.                 //console.log(this);
  68.                 self.triggerSwich();
  69.             }
  70.         });
  71.  
  72.     }
  73.     Sidebar.prototype.close = function () {
  74.         console.log('关闭sidebar');
  75.         this.el.className = 'sidebar-move-left';
  76.         this.closeBarEl.className = 'closebar-move-right';
  77.         this.state = 'closed';
  78.     };
  79.     Sidebar.prototype.open = function () {
  80.         console.log('打开sidebar');
  81.         this.el.style.left = '-120px';
  82.         this.el.className = 'sidebar-move-right';
  83.         this.closeBarEl.style.left = '160px';
  84.         this.closeBarEl.className = 'closebar-move-left';
  85.         this.state = 'opened';
  86.     };
  87.     Sidebar.prototype.triggerSwich = function () {
  88.         if(this.state === 'opened'){
  89.             this.close();
  90.         }else{
  91.             this.open();
  92.         }
  93.     };
  94.     var sidebar = new Sidebar();
  95.  
  96. })();
  1.  

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

  1. Android项目实战（八）：列表右侧边栏拼音展示效果

    之前忙着做项目,好久之前的技术都没有时间总结,而发现自己的博客好多写的技术都比自己掌握的时候晚了很多.不管怎么样,写技术博客一定是一个想成为优秀程序猿或者已经是优秀程序猿必须做的.好吧,下面进行学习阶 ...

  2. js整频滚动展示效果（函数节流鼠标滚轮事件）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. JS实现有点炫的图片展示效果-图片解体和组合

    经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...

  4. [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构

    写在前面 前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病 ...

  5. JS/CSS 各种操作信息提示效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. JS魔法堂：通过marquee标签实现信息滚动效果

    一.前言   有限的空间展现无限的内容,这是滚动最常用到的地方.根据信息滚动效果我们可以有很多的实现方式,但HTML自带的 marquee标签 是其中一个较简单的实现方式.下面记录一下,供日后查阅. ...

  7. JavaScript实现联想校招员工信息展示

    原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 起因 今天和豪哥聊天,才知道他是我老乡,而且特别近..真的感觉他是我的贵人,这是他从 联想校招扣出来的,我们就用Java ...

  8. 微信小程序信息展示列表

    微信小程序信息展示列表 效果展示: 代码展示: wxml <view class="head"> <view class="head_item" ...

  9. 基于 jq 实现拖拽上传 APK 文件，js解析 APK 信息

    技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...

随机推荐

  1. python中通过string类名获得实例

    原文:https://bytes.com/topic/python/answers/42866-how-create-object-instance-string Ksenia Marasanova的 ...

  2. SQL Server 部署CLR程序集错误`6218`

    Visual Studio 2015中开发的SQL Server项目,添加了用户自定义函数,需要部署到SQL Server 2005上, 在部署时报错: (70,1): SQL72014: .Net ...

  3. React & shit Antd

    React & shit Antd https://ant.design/components/tooltip-cn/ https://ant.design/components/tag-cn ...

  4. 【bzoj4152】[AMPPZ2014]The Captain 堆优化Dijkstra

    题目描述 给定平面上的n个点,定义(x1,y1)到(x2,y2)的费用为min(|x1-x2|,|y1-y2|),求从1号点走到n号点的最小费用. 输入 第一行包含一个正整数n(2<=n< ...

  5. HDU 6191 Query on A Tree（可持久化Trie+DFS序）

    Query on A Tree Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 132768/132768 K (Java/Othe ...

  6. [洛谷P3865]【模板】ST表

    题目大意:区间静态最大值 题解:ST表,zkw线段树 ST表: st[i][j]存[i,i+$j^{2}$-1]的最大值,查询时把区间分成两个长度相同的小区间(可重复) #include<cst ...

  7. Tomcat-Jdbc-Pool连接池参数说明

    原文  http://liuxing.info/2016/01/05/Tomcat-Jdbc-Pool参数说明/ 转载收藏用,如有侵权,请联系删除,谢谢. 介绍 Tomcat 在 7.0 以前的版本都 ...

  8. 函数实现多个按钮控制一个div

    <!DOCTYPE HTML><html><head> <meta http-equiv="txttent-Type" txttent=& ...

  9. iconfont字体图标

    1.1.进入阿里图标网站 http://www.iconfont.cn/ 1.2.在购物车里添加自己需要的字体图标 1.3.下载代码 1.4.解压过后,找到iconfont.css,放在你的项目里,需 ...

  10. python实现多个文件的分发

    之前写的脚本只能分发一个配置,每次分发多个配置总要执行很多次,很不爽,于是就有了这个脚本 from multiprocessing import Process import paramiko imp ...