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 ...
随机推荐
- 修改IntelliJ IDEA字体
- C#常见函数
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- URL中编码问题
1.http协议传输统一iso-8859-1传输 jsp中用request.getparameter("keword");得到的是iso-8859-1翻译过来的,要用 keywor ...
- 线程同步(使用了synchronized)和线程通讯(使用了wait,notify)
线程同步 什么是线程同步? 当使用多个线程来访问同一个数据时,非常容易出现线程安全问题(比如多个线程都在操作同一数据导致数据不一致),所以我们用同步机制来解决这些问题. 实现同步机制有两个方法:1.同 ...
- Sparse autoencoder implementation 稀疏自编码器实现
任务:在这个问题中,你将实现稀疏自编码器算法,并且展示它怎么发现边缘是自然图像的一个好的表示. 在文件 sparseae_exercise.zip中,我们已经提供了一些Matlab中的初始代码,你应该 ...
- CentOS LVM逻辑卷管理
在CentOS 挂载(U盘NTFS格式,新硬盘,增加交换分区,扩展根分区等)中扩展根分区部分用的就是LVM逻辑卷管理来进行扩展的. 1.为什么会有逻辑卷管理 传统磁盘管理是直接对硬盘分区进行访问,你如 ...
- [CF1095F]Make It Connected
题目大意:给你$n(n\leqslant2\times10^5)$个点和$m(m\leqslant2\times10^5)$条边,第$i$个点点权为$a_i$.连接$u,v$两个点的代价为$a_u+a ...
- 在Windows*上编译Tensorflow教程
背景介绍 最简单的 Tensorflow 的安装方法是在 pip 一键式安装官方预编译好的包 pip install tensorflow 通常这种预编译的包的编译参数选择是为了最大兼容性而不是为了最 ...
- 51NOD 1227：平均最小公倍数——题解
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1227 懒得打公式了,看这位的吧:https://blog.csdn.ne ...
- Linux之同步互斥阻塞20160703
主要介绍一下Linux下的互斥与阻塞方面的知识: 1. 原子操作 原子操作指的是在执行过程中不会被别的代码路径所中断的操作. 常用原子操作函数举例: atomic_t v = ATOMIC_INIT( ...