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 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
js onclick事件传参讲解
Nov 06 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
Javascript中判断对象是否为空
Jun 10 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
浅谈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
php后台程序与Javascript的两种交互方式
2009/10/25 PHP
又一个php 分页类实现代码
2009/12/03 PHP
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
php中上传文件的的解决方案
2018/09/25 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
JS判断数组那点事
2017/10/10 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
Python读写ini文件的方法
2015/05/28 Python
Python import与from import使用及区别介绍
2018/09/06 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
专业实习自我鉴定
2013/10/29 职场文书
敬老文明号事迹材料
2014/01/16 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
双语教学实施方案
2014/03/23 职场文书
旅游文化节策划方案
2014/06/06 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
观看建国大业观后感
2015/06/01 职场文书
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫