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 ...
随机推荐
- 软工实践原型设计——PaperRepositories
软工实践原型设计--PaperRepositories 写在前面 本次作业链接 队友(031602237吴杰婷)博客链接 pdf文件地址 原型设计地址(加载有点慢...) 结对成员:031602237 ...
- isset、is_null、empty的区别
版本:PHP 5.4 1.isset() :检测变量是否存在,测试如下: $a = false; $b = null; $c; $d = 0; $e = true; var_dump(isset($a ...
- [OS] 进程互斥
对互斥的正确软件实现算法(面包店算法)是非常耗时的,现代的计算机系统都会提供简单的硬件指令,使用这些指令能够有效地解决临界区问题. 硬件提供一个TestAndSet指令,来实现原子指令的功能: boo ...
- 【hdu3555】Bomb 数位dp
题目描述 求 1~N 内包含数位串 “49” 的数的个数. 输入 The first line of input consists of an integer T (1 <= T <= 1 ...
- CentOS 磁盘阵列（raid10）
1.通过mdadm命令进行磁盘阵列部署 mdadm是multiple devices admin的简称,它是Linux下的一款标准的软件 RAID 管理工具 如果没有mdadm命令,通过yum安装一下 ...
- 【题解】Atcoder ARC#94 F-Normalization
再次膜拜此强题!神级性质之不可能发现系列收藏++:首先,对于长度<=3的情况,我们采取爆搜答案(代码当中是打表).对于长度>=4的情况,则有如下几条玄妙的性质: 首先我们将 a, b, c ...
- [LOJ#2340] [WC2018] 州区划分
题目链接 洛谷题面. LOJ题面.还是LOJ机子比较快 Solution 设\(f(s)\)表示选\(s\)这些城市的总代价,那么我们可以得到一个比较显然的\(dp\): \[ f(s)=\frac{ ...
- 怎样去面试JavaScript开发者
面试 Javascript 工程师难吗?Javascript 工程师的水平参差不齐,如何评定他们技术水平的高低?如何确定 Javascript 工程师适合承担哪方面的任务?我在腾讯时的面试经验是,通过 ...
- PowerDesigner 快捷键
一般快捷键 快捷键 说明 F4 打开检查模型窗口,检查模型 F5 如果图窗口内的图改变过大小,恢复为原有大小即正常大小 F6 放大图窗口内的图 F7 缩小图窗口内的图 F8 在图窗口内中查看全部图内容 ...
- Multi-target tracking with Single Moving Camera
引自:http://www.eecs.umich.edu/vision/mttproject.html Wongun Choi, Caroline Pantofaru, Silvio Savarese ...