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

随机推荐

Jlink 软件断点和硬件断点
调试2440 RAM拷贝至SDRAM遇到的问题汇编代码主要是初始化一些寄存器,关狗,初始化时钟,初始化存储管理器以便访问内存,然后将SoC上4k RAM数据拷贝至SDRAM,然后在SRAM里面运行, ...
SQL Server 使用分区函数实现查询优化
在项目中遇到一个需求,需要在商家收藏信息中,获取到该商家发布的最新一条商品的发布时间,需求很简单,SQL语句也不复杂, select T_UserCollectMerchant.CollectID,T ...
xinetd不太详的详解
xinetd不太详的详解 http://blog.sina.com.cn/s/blog_88cdde9f01019fg5.html ################################## ...
[洛谷P3413]SAC#1 - 萌数
题目大意:求$[l,r](0\leqslant l<r< 10^{1001})$中存在长度至少为$2$的回文串的数字数题解:数位$DP$,发现如果有回文串,若长度为偶数,一定有两个相同的 ...
[NOIP2017 TG D1T2]时间复杂度
题目大意:略题解:模拟卡点:1.数组忘清空 (考场代码风格独特...) C++ Code: #include<cstdio> #include<cstring> #incl ...
用伪类实现一个div的宽度和高度是固定百分比
遇到一个题目:一个div宽度是固定百分比的情况下,如何设置高度是宽度的80% 看到题目的第一反应是用js控制,获取到div的宽度之后再用宽度的80%来设置div的高度,但是如何在不用js的情况下,只用 ...
大学本科毕业论文——LanguageTool语法校正规则库的开发
原创率超高的毕业论文,基本没有太多抄袭的东西,论述观点完全是1年半前的我的想法,或许bug很多,仅作发布参考,不作讨论. 参考预览图: 只读pdf版本下载地址: http://download.csd ...
[POI2006] OKR-period of words
传送门 - > $bzoj 1511$ 题目描述 A string is a finite sequence of lower-case (non-capital) letters of t ...
IDEA 使用maven创建web项目，打包war时不会创建class文件
使用maven创建项目后我有创建了个src的目录,导致maven编译不能识别我创建的src文件下的Java文件修改这样后就可以识别编译Java文件今天又给自己挖了个坑.......
批量添加公钥给server的bash
Bash 脚本 #/bin/bash adduser vlmonitor mkdir -p /home/vlmonitor/.ssh chown -R vlmonitor.vlmonitor /hom ...

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

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

随机推荐

热门专题