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 ...
随机推荐
- 原生javascript自定义input[type=radio]效果
2018年6月27日 更新 找到最为简单的仅仅使用css3的方案 <!DOCTYPE html> <html lang="en"> <head> ...
- Jenkins系列-Jenkins添加git密钥对
添加密钥 1.添加git用户和git密码对 ,用于git客户端从gitlab上拉取代码到本地
- C#中的is和as操作符
在C#语言中进行类型转换的操作符is和as.is和as都是强制类型转换,但这两者有什么相同之处和不同之处呢?在使用is和as需要注意哪些事项?下面我们从简单的代码示例去探讨这个简单的问题.注:此博文只 ...
- 【Python】关于Python里面小数点精度控制的问题
基础 浮点数是用机器上浮点数的本机双精度(64 bit)表示的.提供大约17位的精度和范围从-308到308的指数.和C语言里面的double类型相同.Python不支持32bit的单精度浮点数.如果 ...
- springboot2.0 快速集成kafka
一.kafka搭建 参照<kafka搭建笔记> 二.版本 springboot版本 <parent> <groupId>org.springframework.bo ...
- [NOI2009]管道取珠 DP + 递推
---题面--- 思路: 主要难点在思路的转化, 不能看见要求$\sum{a[i]^2}$就想着求a[i], 我们可以对其进行某种意义上的拆分,即a[i]实际上可以代表什么? 假设我们现在有两种取出某 ...
- POJ1651：Multiplication Puzzle——题解
http://poj.org/problem?id=1651 题目大意:同“乘法游戏”,这里将乘法游戏的题面复制过来. 乘法游戏是在一行牌上进行的.每一张牌包括了一个正整数.在每一个移动中,玩家拿出一 ...
- 模板：数论 & 数论函数 & 莫比乌斯反演
作为神秘奖励--?也是为了方便背. 所有的除法都是向下取整. 数论函数: \((f*g)(n)=\sum_{d|n}f(d)g(\frac{n}{d})\) \((Id*\mu)(n)=\sum_{d ...
- oracle-java7-installer安装java失败之后的处理
最开始尝试使用installer安装jdk7,但是未能进行完整,之后每次安装软件都会报错,说oracle-java7-installer处有错误,查得如下解决办法: sudo rm /var/lib/ ...
- nginx基于域名的虚拟主机配置（本地分布式项目域名配置及测试方法）
最有用的虚拟主机配置方式. 一个域名只能绑定一个ip地址,一个ip地址可以被多个域名绑定. 可以修改host文件实现域名访问. 前提:即使我们在nginx中配置基于域名的虚拟主机,也需要域名解析,即n ...