使用css3 的 animation 属性实现的点击滑出侧栏

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

        <meta name="author" content="TKB-nice" />

        <style>

        *{

                margin: 0;

                padding: 0;

        }

        body{

                height: 100%;

                position: relative;

                top: 0;

                left: 0;

        }

        html{

                height: 100%;

                background-color: #eee;

        }

        li{

                list-style: none;

        }

        .page{

                height: 100%;

                width: 100%;

                overflow: hidden;

        }

        .list li:last-child{

                margin-top: 5px;

                background-color: skyblue;

        }

        .text{

                height: 50%;

        }

        .close{

                height: 50%;

        }

        .side-bar{

                display: none;

                width: 100%;

                height: 100%;

                background-color: orange;

                position: absolute;

                top: 0;

                z-index: 99;

                }

                @keyframes mymove

                {

                from {left:100%;}

                to {left:50%;}

                }

                @-webkit-keyframes mymove

                {

                from {left:100%;}

                to {left:0;}

                }

                @keyframes myleave

                {

                from {left:50%;}

                to {left:100%;}

                }

                @-webkit-keyframes myleave

                {

                from {left:0;}

                to {left:100%;}

                }

    </style>

    </head>

<body>

        <div class="page">

                <div class="mian">

                        <ul class="list">

                                <li class="item1" id="item1">侧栏1</li>

                                <li class="item2" id="item2">侧栏2</li>

                        </ul>

                </div>

                <div class="side-bar" id="side-bar1">

                        <p class="text">我是侧栏111111111</p>

                        <p class="close" id="close1">点击关闭</p>

                </div>

                <div class="side-bar" id="side-bar2">

                        <p class="text">我是侧栏2222222</p>

                        <p class="close" id="close2">点击关闭</p>

                </div>

        </div>

    <script>

    document.getElementById('item1').onclick=function(){

        document.getElementById('side-bar1').style.animation = 'mymove 0.5s ease forwards';

        document.getElementById('side-bar1').style.display = 'block';

    }

    document.getElementById('item2').onclick=function(){

        document.getElementById('side-bar2').style.animation = 'mymove 0.5s ease forwards';

        document.getElementById('side-bar2').style.display = 'block';

    }

    document.getElementById('close1').onclick=function(){

        document.getElementById('side-bar1').style.animation = 'myleave 0.5s ease forwards ';

        setTimeout(function(){

                document.getElementById('side-bar1').style.display = 'none';

        },500);

    }

    document.getElementById('close2').onclick=function(){

        document.getElementById('side-bar2').style.animation = 'myleave 0.5s ease forwards ';

        setTimeout(function(){

                document.getElementById('side-bar2').style.display = 'none';

        },500);

    }

    </script>

</body>

</html>

CSS3侧栏滑出简单实现的更多相关文章

  1. 仿酒仙网的一款jQuery侧栏弹出导航栏特效

    仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...

  2. 多种css3时尚侧栏菜单展开显示效果Off-Canvas Menu Effects

    今天我们想分享多种css3时尚侧栏菜单展开显示效果.侧边栏应用广泛,我们之前已经产生了一些效果灵感.风格演变,今天我们要展示一套新的灵感的现代效果.不同的布局和菜单的同步转换和页面可以让一切看起来更有 ...

  3. 一款效果精致的 jQuery 多层滑出菜单插件

    想要以用户友好的方式呈现多级菜单是件不容易的事情,而且还要跨浏览器兼容就更难了.Multi-Level Push Menu 这款 jQuery 插件提供了呈现这种菜单的解决方案,能够让你无限制的展示菜 ...

  4. Slideout.js – 触摸滑出式 Web App 导航菜单

    Slideout.js 是为您的移动 Web 应用开发的触摸滑出式的导航菜单.它没有依赖,自由搭配简单的标记,支持原生的滚动,您可以轻松地定制它.它支持不同的 CSS3 转换和过渡.最重要的是,它只是 ...

  5. 玩转Firefox侧栏

    偶然看到煎蛋网的"玩转firefox侧栏",才注意到它. Firefox侧栏有啥不一样? Firefox可以在侧栏中打开网页. 于是,一系列玩法就出来了... 侧栏打开在线应用 G ...

  6. CSS3多栏布局

    CSS3多栏布局 分栏数: column-count:auto|num: auto为默认值,表示元素只有一列.num取值为大于0的整数 每栏宽度: column-width:auto|<leng ...

  7. 使用django开发博客过程记录3——博客侧栏实现

    说起这个侧栏真是苦恼我很长时间,一开始以为和之前的一样传递额外参数就可以了就像下面这样: class IndexView(ListView): template_name = 'apps/index. ...

  8. jquery定时滑出可最小化的底部提示层

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/index.htm当打开页面或者刷新页面后等待两秒钟,会在底部滑出可最小化的提示层.滑出层半透明,可关闭再现. ...

  9. 一款jQuery打造的滚动条在底部滑出信息提示层

    一款jQuery打造的滚动条在底部滑出信息提示层, 当滚动鼠标滚轮,或者滚动条往下拉的时候,在右下角,弹出一个信息提示框. 有一点仿的是一个插件工具,就是网页中大家都长用到的友荐. 这款特效算一款简单 ...

随机推荐

  1. 每天一个linux命令(2): nl命令

    0．学习时间 2014-05-16 1．命令格式 nl ［参数］ 文件名 (文件名也缺省的情况下, 从标准输入中读入) 2．命令参数 -b t 空行不加行号(默认) -b a  空行也加行号(类似于c ...

  2. (一)流--IO框架

    介绍: IO(Input/Output)是计算机输入/输出的接口.java的核心库java.io提供了全方面的IO接口,包括:文件系统的操作,文件读写,标准设备输出等等 File  文件和目录类 In ...

  3. xib搭建scrollView无法滑动的问题

    最近给xib中的scrollView添加contentView的时候,view的约束总是参照莫名其妙的东西,不是frameLayout就是safeArea 因为之前都是默认以superView为参照系 ...

  4. HZOJ 连连看

    考场几乎想到了正解,然而我也不知道当时在想啥,在没有证伪的情况下只是觉得无法实现就否了…… 最后打的好象是达哥说的O(4*15*n*m),复杂度不是很会证反正T成了暴力…… 题解: 对于测试点8,9, ...

  5. TextView.setTextColor(int); 括号里那个颜色int值的理解

    原本以为是R.id里的东西,后来发现不是 http://dianhua1990627.blog.163.com/blog/static/2755558820132262150387/

  6. Python 变量赋值

  7. Java练习 SDUT-1131_最大公约数与最小公倍数

    C/C++训练1---最大公约数与最小公倍数 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 输入两个正整数,求它们的最 ...

  8. js获取当前日期及获取当前日期的前一天日期函数

    function getcurrentdate(){ //获取系统时间var LSTR_ndate=new Date();var LSTR_Year=LSTR_ndate.getFullYear(); ...

  9. 12-3 DOM操作

    一 DOM基础 1 DOM介绍 DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组 ...

  10. HDFS概念名称节点和数据节点-名称节点