jq_从右向右的滑入滑出效果
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} html,
body {
height: 100%;
overflow: hidden;
} ul li {
list-style: none;
} .hide {
display: none;
} .show {
display: block;
} #contariner {
position: relative;
height: 100%;
/*background: pink;*/
} .baseMap {
height: 100%;
background: red;
} .checkOrder {
position: absolute;
top: 21.5px;
font-size: 28.6px;
height: 28.6px;
width: 67%;
/*background: pink;*/
} .orderInfo {
width: 33%;
height: 100%;
background: rgba(55, 76, 91, 0.45);
position: absolute;
top: 0;
right: -33%;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
transition: all .5s ease-in;
} .rightIn {
right: -33%;
} .leftOut {
right: 0%;
} .packUpBtn {
line-height: 35.8px;
text-align: center;
width: 21.5px;
font-size: 12px;
background: rgba(55, 76, 91, 0.45);
margin-left: -21.5px;
color: #FFFFFF;
border-radius: 5px 0 0 5px;
position: absolute;
top: 214.3px;
font-weight: bold;
}
.packUpBtn span:nth-child(1){
margin-right: -11px;
} .checkOrder input {
display: block;
float: left;
width: 35%;
line-height: 28.6px;
margin-left: 25%;
padding-left: 7.2px;
font-size: 11.5px;
background: rgba(255, 255, 255, 1);
border-radius: 2.9px;
box-shadow: 0px 0px 10px rgba(238, 238, 238, 0.4);
} .checkOrder button {
display: block;
float: left;
border: none;
outline: none;
margin-left: 2%;
width: 9%;
margin-top: 2px;
line-height: 30px;
text-align: center;
font-size: 11.5px;
color: #FFFFFF;
background: rgba(0, 108, 184, 1);
border-radius: 2.9px;
box-shadow: 0px 0px 10px rgba(175, 219, 250, 0.4);
} .orderInfoContent {
width: 90%;
margin-left: 5.5%;
} .orderInfoNav {
width: 80%;
margin-left: 10%;
height: 28.6px;
border-radius: 5px;
margin-top: 28.6px;
font-weight: 300;
} .orderInfoNav :nth-child(1),
.orderInfoNav :nth-child(2) {
border-right: 1px solid #CCCCCC;
} .orderInfoNav :nth-child(1) {
border-radius: 5px 0 0 5px;
} .orderInfoNav :nth-child(3) {
border-radius: 0 5px 5px 0;
} .orderInfoNav li {
line-height: 28.6px;
background: #fff;
width: 33%;
float: left;
text-align: center;
font-size: 11.5px;
} .cargoInfo,
.envTempInfo {
background: #FFFFFF;
width: 100%;
margin-top: 20px;
float: left;
border-radius: 5px;
font-size: 10px;
color: #555;
font-family:MicrosoftYaHei;
font-weight: Regular;
}
.envTempInfo{
margin-top: 22px;
} .cargoInfo_basic li,
.cargoInfo_detail li {
width: 100%;
height: 29.3px;
border-bottom: 1px solid #CCCCCC;
} .cargoInfo_basic li span {
display: inline-block;
line-height: 29.3px;
} .cargoInfo_basic li span:nth-child(1) {
width: 20%;
overflow: hidden;
text-align: center;
border-right: 1px solid #CCCCCC;
} .cargoInfo_basic li span:nth-child(2) {
box-sizing: border-box;
overflow: hidden;
width: 75%;
padding-left: 10px;
} .cargoInfo_detail li span {
display: inline-block;
line-height: 29.3px;
text-align: center;
width: 33.333%;
} .cargoInfo_detail li:last-child {
border-bottom: none !important;
} .orderInfoNav_select {
background: #006CB8 !important;
color: #fff;
} .envTempInfo {
/*height: 300px;*/
position: relative;
} .envtemp_chart {
height: 100px;
width: 100%;
background: #fff;
border-radius: 5px 5px 0 0;
border-bottom: 1px dashed #CCCCCC;
} .envPDF {
position: absolute;
top: -18px;
right: 0;
font-size: 8px !important;
color: #fff;
border-bottom: 1px solid #fff;
padding-bottom: 1px;
}
.envTempInfo_detail{
height: 200px;
width: 100%;
}
.cargoInfo_title{
background: #F3F6F9;
}
</style>
</head> <body>
<div id="contariner">
<div class="baseMap"></div>
<div class="checkOrder">
<input type="text" name="" id="" value="" />
<button>查询</button>
</div>
<div class="orderInfo">
<div class="packUpBtn" data-id="1"><span><</span><span><</span></div>
<div class="orderInfoContent">
<ul class="orderInfoNav">
<li class="orderInfoNav_select" data-id="0">环境温度</li>
<li data-id="1">随货温度</li>
<li data-id="2">货物信息</li>
</ul> <!--货物信息-->
<div class="cargoInfo hide">
<ul class="cargoInfo_basic">
<li><span>运单号</span><span>888888888</span></li>
<li><span>寄件公司</span><span>888888888</span></li>
<li><span>收件公司</span><span>888888888</span></li>
<li><span>总件数</span><span>888888888</span></li>
<li><span>总重量</span><span>888888888</span></li>
</ul>
<ul class="cargoInfo_detail">
<li class="cargoInfo_title"><span>商品名称</span><span>件数</span><span>重量</span></li>
<ul class="cargoDetail">
<li><span>牛奶</span><span>10</span><span>10</span></li>
<li><span>奶酪</span><span>12</span><span>12</span></li>
<li><span>奶酪</span><span>12</span><span>12</span></li>
<li><span>奶酪</span><span>12</span><span>12</span></li>
<li><span>奶酪</span><span>12</span><span>12</span></li>
</ul>
</ul>
</div> <!--环境温度-->
<div class="envTempInfo">
<p class="envPDF" href="javascript:;">导出环境PDF</p>
<div class="envtemp_chart"> </div>
<!--<img style="width: 100%;" src="data:images/cutting_line.png" />-->
<div class="envTempInfo_detail"> </div>
</div>
</div>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(".checkOrder button").click(function(){
var checkVal = $(".checkOrder input").val();
if(checkVal.length == 0){
alert("请输入内容")
}else{
this.parentElement.nextElementSibling.childNodes[1].dataset.id = 0;
$(".packUpBtn").html("<span>></span><span>></span>");
$(".orderInfo").removeClass("rightIn");
$(".orderInfo").addClass("leftOut");
}
}); $(".orderInfoNav li").click(function() {
var navId = this.dataset.id;
if(navId == 2) {
$(".envTempInfo").hide();
$(".cargoInfo").show(); } else {
$(".cargoInfo").hide();
$(".envTempInfo").show();
}
$(".orderInfoNav li").removeClass("orderInfoNav_select");
$(this).addClass("orderInfoNav_select"); }); $(".packUpBtn").click(function() {
var upId = this.dataset.id;
if(upId == 0) {
this.dataset.id = 1;
$(".packUpBtn").html("<span><</span><span><</span>");
$(".orderInfo").removeClass("leftOut");
$(".orderInfo").addClass("rightIn");
} else {
this.dataset.id = 0;
$(".packUpBtn").html("<span>></span><span>></span>");
$(".orderInfo").removeClass("rightIn");
$(".orderInfo").addClass("leftOut");
}
});
</script> </html>
jq_从右向右的滑入滑出效果的更多相关文章
- 伴随ListView、RecyclerView、ScrollView滚动滑入滑出小图标--第三方开源--FloatingActionButton
FloatingActionButton在github上的项目主页是:https://github.com/makovkastar/FloatingActionButton 它的依赖包NineOldA ...
- WPF技术触屏上的应用系列（五）: 图片列表异步加载、手指进行缩小、放大、拖动 、惯性滑入滑出等效果
原文:WPF技术触屏上的应用系列(五): 图片列表异步加载.手指进行缩小.放大.拖动 .惯性滑入滑出等效果 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统, ...
- css transition 实现滑入滑出
transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? ...
- 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】
1.jquery隐藏and显示事件 $("p").hide(); //隐藏事件$("p").hide(1000); //1秒内缓慢隐藏$(" ...
- jQuary总结7:动画操作,显示与隐藏 淡入淡出, 滑入滑出
1 jquery提供了三组基本动画,这些动画都是标准的.有规律的效果,jquery还提供了自定义动画的功能. 2 显示与隐藏: show([speed],[easing],[callback]) 显示 ...
- JQuery动画之滑入滑出动画
1. 滑入动画(类似于商店的卷帘门) $(selector).slideDown(speed, 回调函数); 解释: 此语句实现的功能为, 在XX时间内, 下拉动画, 显现元素. 当 slideDow ...
- 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
- NSIS：实现程序窗口逐渐透明的渐入渐出效果
原文NSIS:实现程序窗口逐渐透明的渐入渐出效果 需要修改版的插件(支持timer功能): MUI:InstallOptions.dll MUI2:nsDialogs.dll 以及system插件,( ...
- [Unity3D]Unity3D游戏开发之Logo渐入渐出效果的实现
---------------------------------------------------------------------------------------------------- ...
- div层的滑入滑出实例
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat=&quo ...
随机推荐
- str.substring(beginIndex,endIndex)-008
// 将字符串str前n位放在后面,返回新的字符串 public String headToTail(String str,int n){ if(n==0){ System.out.println(s ...
- mysql,oracle,sql server中的默认事务隔离级别查看,更改
未提交读(隔离事务的最低级别,只能保证不读取物理上损坏的数据) 已提交读(数据库引擎的默认级别) 可重复读 可序列化(隔离事务的最高级别,事务之间完全隔离) 可串行化比较严谨,级别高; MySQL m ...
- 为什么 MongoDB （索引）使用B-树而 Mysql 使用 B+树
B-树由来 定义:B-树是一类树,包括B-树.B+树.B*树等,是一棵自平衡的搜索树,它类似普通的平衡二叉树,不同的一点是B-树允许每个节点有更多的子节点.B-树是专门为外部存储器设计的,如磁盘,它对 ...
- jQuery返回顶部代码
页面较长时,使用返回顶部按钮比较方便,在电商中必备操作.下面自己制作一个js文件,totop.js,把它直接引用到需要的网页中即可. $(function () { $("body" ...
- Python面向对象—类属性和实例属性
属性:就是属于一个对象的数据或函数元素 类有类方法.实例方法.静态方法.类数据属性(类变量)和实例数据属性(实例变量). 类属性:包括类方法和类变量,可以通过类或实例来访问,只能通过类来修改. 实例属 ...
- 什么是Docker？（6-12）
关于什么是Docker,刚开始学的时候一脸懵X,这个东西到底是干嘛用的啊?偶然间在知乎上刷到一个比较通俗的解释: Docker就相当于一个容器,这个容器了不得了,它里面能搭好你项目需要的所有环境,并且 ...
- 【题解】Atcoder AGC#16 E-Poor Turkeys
%拜!颜神怒A此题,像我这样的渣渣只能看看题解度日╭(╯^╰)╮在这里把两种做法都记录一下吧~ 题解做法:可以考虑单独的一只鸡 u 能否存活.首先我们将 u 加入到集合S.然后我们按照时间倒序往回推, ...
- BZOJ 1085 [SCOI2005]骑士精神 【A*启发式搜索】
1085: [SCOI2005]骑士精神 Time Limit: 10 Sec Memory Limit: 162 MB Submit: 2838 Solved: 1663 [Submit][St ...
- Random Numbers Gym - 101466K dfs序+线段树
Tamref love random numbers, but he hates recurrent relations, Tamref thinks that mainstream random g ...
- C语言超大数据相加计算整理
在做ACM 1002题时,整理得到. #include<stdio.h>#include<string.h>#define MAX 1000void zero(char *s, ...