js实现上下左右弹框划出效果


Posted in Javascript onMarch 08, 2017

效果图:

js实现上下左右弹框划出效果

图(1)初始图

js实现上下左右弹框划出效果

图(2)点击“从右侧划出”

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
 <title>上下左右弹框划出效果</title>
 <style>
   /*css document*/
body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input,button,aside{ padding: 0; margin: 0; -webkit-tap-highlight-color:rgba(255,255,255,0);}
   body { font-family: "Microsoft YaHei"; }
   .btn button {
 display: block;
 width: 240px; 
 line-height: 30px;
 margin: 20px auto;
 background-color: #cd0000;
 color: #fff;
 text-align: center;
 outline: none;
 border: none;
 cursor: pointer;
 font-family: "Microsoft YaHei";
}
.aside,
.aside-overlay {
 position: fixed;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
}
.aside {
 -webkit-transition: visibility .25s;
 transition: visibility .25s;
 z-index: 3;
 visibility: hidden;
 overflow: hidden;
}
.aside > div { text-align: center; }
.aside.active {
 -webkit-transition: none;
 transition: none;
 visibility: visible;
}
.aside-overlay {
 background-color: rgb(0,0,0);
 opacity: 0;
 -webkit-transition: opacity .25s;
 transition: opacity .25s;
}
.active > .aside-overlay {
 opacity: .6;
}
.rightContent {
 position: absolute;
 bottom: 0;
 right: 0;
 top: 0;
 left: 40px;
 background:#fff;
 -webkit-transition: transform .15s;
 transition: transform .15s;
 -webkit-transform:translateX(100%); 
 transform:translateX(100%); 
}
.active > .rightContent {
 -webkit-transform:translateX(0%); 
 transform:translateX(0%); 
}
.leftContent {
 position: absolute;
 bottom: 0;
 right: 40px;
 top: 0;
 left: 0;
 background:#fff;
 -webkit-transition: transform .15s;
 transition: transform .15s;
 -webkit-transform:translateX(-100%); 
 transform:translateX(-100%); 
}
.active > .leftContent {
 -webkit-transform:translateX(0%); 
 transform:translateX(0%); 
}
.topContent {
 position: absolute;
 bottom: 40px;
 right: 40px;
 top: 0;
 left: 40px;
 background:#fff;
 -webkit-transition: transform .15s,top .15s;
 transition: transform .15s;
 -webkit-transform:translateY(-100%); 
 transform:translateY(-100%); 
}
.active > .topContent {
 top: 40px;
 -webkit-transform:translateY(0%); 
 transform:translateY(0%); 
}
.botContent {
 position: absolute;
 bottom: 0;
 right: 40px;
 top: 40px;
 left: 40px;
 background:#fff;
 -webkit-transition: transform .15s,bottom .15s;
 transition: transform .15s;
 -webkit-transform:translateY(100%); 
 transform:translateY(100%); 
}
.active > .botContent {
 bottom: 40px;
 -webkit-transform:translateY(0%); 
 transform:translateY(0%); 
}
  </style>
 </head>
 <body>
 <!-- 按钮 -->
 <div class="btn">
 <button id="rightBtn">从右侧划出</button>
 <button id="leftBtn">从左侧划出</button>
 <button id="topBtn">从上面划下</button>
 <button id="botBtn">从下面划上</button>
 </div>
 <!-- 弹出层 -->
 <aside id="aside" class="aside">
 <i class="aside-overlay hideAside"></i>
 <div class="rightContent">
 右侧划出
 </div>
 <div class="leftContent">
 左侧划出
 </div>
 <div class="topContent">
 从上面划下
 </div>
 <div class="botContent">
 从上面划下
 </div>
 </aside>
 <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
 <script type="text/javascript">
 $(function(){
 var rightBtn = $('#rightBtn'),leftBtn = $('#leftBtn'),topBtn = $('#topBtn'),botBtn = $('#botBtn');
 var oAside = $('#aside');
 rightBtn.on("click",function(){
 $('.leftContent').hide();
 $('.topContent').hide();
 $('.botContent').hide();
 $('.rightContent').show();
 oAside.addClass('active');
 });
 leftBtn.on("click",function(){
 $('.rightContent').hide();
 $('.topContent').hide();
 $('.botContent').hide();
 $('.leftContent').show();
 oAside.addClass('active');
 });
 topBtn.on("click",function(){
 $('.rightContent').hide();
 $('.leftContent').hide();
 $('.botContent').hide();
 $('.topContent').show();
 oAside.addClass('active');
 });
 botBtn.on("click",function(){
 $('.rightContent').hide();
 $('.leftContent').hide();
 $('.topContent').hide();
 $('.botContent').show();
 oAside.addClass('active');
 });
 $('.hideAside').on("click",function(){
 oAside.removeClass('active');
 });
 })
 </script>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
angular动态表单制作
Feb 23 Javascript
使用JS获取页面上的所有标签
Oct 18 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 #Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 #Javascript
原生js实现瀑布流布局
Mar 08 #Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 #Javascript
JavaScript中的工厂函数(推荐)
Mar 08 #Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 #Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 #Javascript
You might like
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
php中序列化与反序列化详解
2017/02/13 PHP
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
python返回昨天日期的方法
2015/05/13 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
Python 读写文件的操作代码
2018/09/20 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
python实现图片插入文字
2019/11/26 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
HTML5制作表格样式
2016/11/15 HTML / CSS
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
分层教学实施方案
2014/03/19 职场文书
高中生操行评语
2014/04/25 职场文书
班主任评语大全
2014/04/26 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python