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

随机推荐

【iOS开发】动态添加子视图 UIView 的正确方法
很多时候哥比较喜欢用代码添加视图,特别是要同时加很多UIView时,而且跟 xib 比起来代码更容易管理,在多人的项目中代码不容易 conflict. 但小牛哥最近发现很多新人都不太清楚正确的使用方法 ...
lincode-58-四数之和
58-四数之和给一个包含n个数的整数数组S,在S中找到所有使得和为给定整数target的四元组(a, b, c, d). 注意事项四元组(a, b, c, d)中,需要满足a <= b &l ...
codeforce580c (dfs)
题目意思:给你一棵树,然后每个叶子节点会有一家餐馆,你讨厌猫,就不会走有连续超过m个节点有猫的路,然后问你最多去几家饭店思路:直接DFS Example Input 4 11 1 0 01 21 3 ...
PS制作圆角透明图片
方法一:利用“魔术棒橡皮工具”. 1. 点击“圆角矩形工具”,然后选中打开的背景图片,选中即可. 2.然后,按住“ctrl+enter”,所选边框变为虚线框,然后点击“ctrl+shift+i”反选( ...
sessionStorage的用法总结
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...
[洛谷P4722]【模板】最大流加强版 / 预流推进
会$TLE$... C++ Code:(HLPP) #pragma GCC optimize(3) #pragma GCC optimize("unroll-loops") #in ...
BEGIN TRAN;
USE master Create Database TestDb on Primary ( name='TestDb_data', filename='G:\TempData\Db\TestDb_d ...
POJ2195:Going Home (最小费用最大流)
Going Home Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 26212 Accepted: 13136 题目链接 ...
C++ 中 string, char*, int 类型的相互转换
一.int 1.int 转换成 string 1) to_string函数 —— c++11标准增加了全局函数std::to_string: string to_string (int val); s ...
dbcp重连问题排查
转载自:http://lc87624.iteye.com/blog/1734089 使用数据库连接池时,免不了会遇到断网.数据库挂掉等异常状况,当网络或数据库恢复时,若无法恢复连接池中的连接,那必然会 ...

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

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

随机推荐

热门专题