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

随机推荐

ORACLE和SQL语法区别归纳
数据类型比较类型名称 Oracle SQLServer 比较字符数据类型 CHAR CHAR 都是固定长度字符资料但oracle里面最大度为2kb,SQLServer里面最大长度为8kb ...
【iOS开发】iOS开发CGRectGetMidX. CGRectGetMidY.CGRectGetMinY. CGRectGetMaxY. CGRectGetMinX. CGRectGetMaxX的使用
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(10, 10, 110, 150)]; label.backgroundColor ...
关于org.springframework.web.filter.CharacterEncodingFilter的学习
介绍 org.springframework.web.filter.CharacterEncodingFilter 这是一个过滤器,是Spring在web请求中定义request和response的编 ...
Javascript中闭包常用场景
一.前言有准备去看Javascript框架,所以对于Javascript和原型继承有必要去了解,这边小记一下闭包比较好的例子~ 二.正文先来一下“闭包”的解释~ 一个拥有许多变量和绑定了这些变量的 ...
spring笔记(二)
共性问题: 1. 服务器启动报错,什么原因? * jar包缺少.jar包冲突 1) 先检查项目中是否缺少jar包引用 2) 服务器: 检查jar包有没有发布到服务器下: 用户库jar包,需要手动发布到 ...
mac 倍速播放
Mac的倍速播放,使用工具播放是quick time player,使用方式是,按住 “option” + “>>” 即可调整倍数:
BZOJ4477 JSOI2015字符串树（可持久化trie）
树上建可持久化trie即可,有点过于裸了.darkbzoj过了然而在bzoj一直wa,不知道哪有锅. #include<iostream> #include<cstdio> # ...
【BZOJ 4500 矩阵】
Time Limit: 1 Sec Memory Limit: 256 MBSubmit: 390 Solved: 217[Submit][Status][Discuss] Description ...
[学习笔记]动态dp
其实就过了模板. 感觉就是带修改的dp [模板]动态dp 给定一棵n个点的树,点带点权. 有m次操作,每次操作给定x,y表示修改点x的权值为y. 你需要在每次操作之后求出这棵树的最大权独立集的权值大小 ...
BZOJ 4777 Usaco2017 Open Switch Grass Kruskal+替罪羊树+权值线段树
这道题首先可以看出答案一定是一条边,而且答案一定在最小生成树上,那么我们就可以在这个最小生成树上维护他与异色儿子的边最小值,所以我们就可以已通过Kruskal和一棵平衡树来解决,时间复杂度是O(n*l ...

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

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

随机推荐

热门专题