jq_从右向右的滑入滑出效果
2024-09-28 22:11:06
<!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>
最新文章
- 讲座：Influence maximization on big social graph
- HTML5 IE兼容问题
- Appium 切换上下文环境
- 织梦更换Ueditor编辑器后栏目内容提交更新失败
- android基于XMPP的消息推送机制
- codeforces#FF DIV2C题DZY Loves Sequences（DP）
- zTree市县实现三个梯级DAO接口测试
- sqlserver 注释提取工具
- Python javascript操作DOM
- java 集合类Array、List、Map区别和优缺点
- 伪指令 ENTRY 与 END
- [原]Jenkins(十六) jenkins再出发之jenkins+robot+blue ocean+svn
- 第二十四节：Java语言基础-讲解数组的综合应用
- for-in和for-of，forEach和Map
- C++ 对Ctrl+Z的解释
- Expo大作战(四)--快速用expo构建一个app，expo中的关键术语
- #1490 : Tree Restoration
- 关于CSRF的那点事儿
- Django 模板中使用css, javascript
- UVa 10917 林中漫步
热门文章
- [OS] 生产者-消费者问题（有限缓冲问题）
- Delphi 的绘图功能[8] - TextOut、TextWidth、TextHeight
- 从HR 到SBP其实还有很长的一段路要走
- 【EF】Entity Framework Core 2.0 特性介绍和使用指南
- Android UI设计的基本元素有哪些
- 【题解】51nod 1806 wangyurzee的树
- 【刷题】BZOJ 1143 [CTSC2008]祭祀river
- [HNOI2012][BZOJ2732] 射箭 [二分+半平面交]
- springMVC+spring+mybatis搭建最近
- BZOJ3926：[ZJOI2015]诸神眷顾的幻想乡——题解