jq_從右向右的滑入滑出效果
阿新 • • 發佈：2018-07-11
ref == jquery outline tel lin vid solid radi 
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13View Codehtml, 14 body { 15 height: 100%; 16 overflow: hidden; 17 } 18 19 ul li { 20 list-style: none; 21 } 22 23 .hide { 24 display: none;25 } 26 27 .show { 28 display: block; 29 } 30 31 #contariner { 32 position: relative; 33 height: 100%; 34 /*background: pink;*/ 35 } 36 37.baseMap { 38 height: 100%; 39 background: red; 40 } 41 42 .checkOrder { 43 position: absolute; 44 top: 21.5px; 45 font-size: 28.6px; 46 height: 28.6px; 47 width: 67%; 48 /*background: pink;*/ 49 } 50 51 .orderInfo { 52 width: 33%; 53 height: 100%; 54 background: rgba(55, 76, 91, 0.45); 55 position: absolute; 56 top: 0; 57 right: -33%; 58 -webkit-transition: all .5s ease-in; 59 -moz-transition: all .5s ease-in; 60 transition: all .5s ease-in; 61 } 62 63 .rightIn { 64 right: -33%; 65 } 66 67 .leftOut { 68 right: 0%; 69 } 70 71 .packUpBtn { 72 line-height: 35.8px; 73 text-align: center; 74 width: 21.5px; 75 font-size: 12px; 76 background: rgba(55, 76, 91, 0.45); 77 margin-left: -21.5px; 78 color: #FFFFFF; 79 border-radius: 5px 0 0 5px; 80 position: absolute; 81 top: 214.3px; 82 font-weight: bold; 83 } 84 .packUpBtn span:nth-child(1){ 85 margin-right: -11px; 86 } 87 88 .checkOrder input { 89 display: block; 90 float: left; 91 width: 35%; 92 line-height: 28.6px; 93 margin-left: 25%; 94 padding-left: 7.2px; 95 font-size: 11.5px; 96 background: rgba(255, 255, 255, 1); 97 border-radius: 2.9px; 98 box-shadow: 0px 0px 10px rgba(238, 238, 238, 0.4); 99 } 100 101 .checkOrder button { 102 display: block; 103 float: left; 104 border: none; 105 outline: none; 106 margin-left: 2%; 107 width: 9%; 108 margin-top: 2px; 109 line-height: 30px; 110 text-align: center; 111 font-size: 11.5px; 112 color: #FFFFFF; 113 background: rgba(0, 108, 184, 1); 114 border-radius: 2.9px; 115 box-shadow: 0px 0px 10px rgba(175, 219, 250, 0.4); 116 } 117 118 .orderInfoContent { 119 width: 90%; 120 margin-left: 5.5%; 121 } 122 123 .orderInfoNav { 124 width: 80%; 125 margin-left: 10%; 126 height: 28.6px; 127 border-radius: 5px; 128 margin-top: 28.6px; 129 font-weight: 300; 130 } 131 132 .orderInfoNav :nth-child(1), 133 .orderInfoNav :nth-child(2) { 134 border-right: 1px solid #CCCCCC; 135 } 136 137 .orderInfoNav :nth-child(1) { 138 border-radius: 5px 0 0 5px; 139 } 140 141 .orderInfoNav :nth-child(3) { 142 border-radius: 0 5px 5px 0; 143 } 144 145 .orderInfoNav li { 146 line-height: 28.6px; 147 background: #fff; 148 width: 33%; 149 float: left; 150 text-align: center; 151 font-size: 11.5px; 152 } 153 154 .cargoInfo, 155 .envTempInfo { 156 background: #FFFFFF; 157 width: 100%; 158 margin-top: 20px; 159 float: left; 160 border-radius: 5px; 161 font-size: 10px; 162 color: #555; 163 font-family:MicrosoftYaHei; 164 font-weight: Regular; 165 } 166 .envTempInfo{ 167 margin-top: 22px; 168 } 169 170 .cargoInfo_basic li, 171 .cargoInfo_detail li { 172 width: 100%; 173 height: 29.3px; 174 border-bottom: 1px solid #CCCCCC; 175 } 176 177 .cargoInfo_basic li span { 178 display: inline-block; 179 line-height: 29.3px; 180 } 181 182 .cargoInfo_basic li span:nth-child(1) { 183 width: 20%; 184 overflow: hidden; 185 text-align: center; 186 border-right: 1px solid #CCCCCC; 187 } 188 189 .cargoInfo_basic li span:nth-child(2) { 190 box-sizing: border-box; 191 overflow: hidden; 192 width: 75%; 193 padding-left: 10px; 194 } 195 196 .cargoInfo_detail li span { 197 display: inline-block; 198 line-height: 29.3px; 199 text-align: center; 200 width: 33.333%; 201 } 202 203 .cargoInfo_detail li:last-child { 204 border-bottom: none !important; 205 } 206 207 .orderInfoNav_select { 208 background: #006CB8 !important; 209 color: #fff; 210 } 211 212 .envTempInfo { 213 /*height: 300px;*/ 214 position: relative; 215 } 216 217 .envtemp_chart { 218 height: 100px; 219 width: 100%; 220 background: #fff; 221 border-radius: 5px 5px 0 0; 222 border-bottom: 1px dashed #CCCCCC; 223 } 224 225 .envPDF { 226 position: absolute; 227 top: -18px; 228 right: 0; 229 font-size: 8px !important; 230 color: #fff; 231 border-bottom: 1px solid #fff; 232 padding-bottom: 1px; 233 } 234 .envTempInfo_detail{ 235 height: 200px; 236 width: 100%; 237 } 238 .cargoInfo_title{ 239 background: #F3F6F9; 240 } 241 </style> 242 </head> 243 244 <body> 245 <div id="contariner"> 246 <div class="baseMap"></div> 247 <div class="checkOrder"> 248 <input type="text" name="" id="" value="" /> 249 <button>查詢</button> 250 </div> 251 <div class="orderInfo"> 252 <div class="packUpBtn" data-id="1"><span><</span><span><</span></div> 253 <div class="orderInfoContent"> 254 <ul class="orderInfoNav"> 255 <li class="orderInfoNav_select" data-id="0">環境溫度</li> 256 <li data-id="1">隨貨溫度</li> 257 <li data-id="2">貨物信息</li> 258 </ul> 259 260 <!--貨物信息--> 261 <div class="cargoInfo hide"> 262 <ul class="cargoInfo_basic"> 263 <li><span>運單號</span><span>888888888</span></li> 264 <li><span>寄件公司</span><span>888888888</span></li> 265 <li><span>收件公司</span><span>888888888</span></li> 266 <li><span>總件數</span><span>888888888</span></li> 267 <li><span>總重量</span><span>888888888</span></li> 268 </ul> 269 <ul class="cargoInfo_detail"> 270 <li class="cargoInfo_title"><span>商品名稱</span><span>件數</span><span>重量</span></li> 271 <ul class="cargoDetail"> 272 <li><span>牛奶</span><span>10</span><span>10</span></li> 273 <li><span>奶酪</span><span>12</span><span>12</span></li> 274 <li><span>奶酪</span><span>12</span><span>12</span></li> 275 <li><span>奶酪</span><span>12</span><span>12</span></li> 276 <li><span>奶酪</span><span>12</span><span>12</span></li> 277 </ul> 278 </ul> 279 </div> 280 281 <!--環境溫度--> 282 <div class="envTempInfo"> 283 <p class="envPDF" href="javascript:;">導出環境PDF</p> 284 <div class="envtemp_chart"> 285 286 </div> 287 <!--<img style="width: 100%;" src="images/cutting_line.png" />--> 288 <div class="envTempInfo_detail"> 289 290 </div> 291 </div> 292 </div> 293 </div> 294 </div> 295 </body> 296 <script src="http://code.jquery.com/jquery-3.3.1.js"></script> 297 <script type="text/javascript"> 298 $(".checkOrder button").click(function(){ 299 var checkVal = $(".checkOrder input").val(); 300 if(checkVal.length == 0){ 301 alert("請輸入內容") 302 }else{ 303 this.parentElement.nextElementSibling.childNodes[1].dataset.id = 0; 304 $(".packUpBtn").html("<span>></span><span>></span>"); 305 $(".orderInfo").removeClass("rightIn"); 306 $(".orderInfo").addClass("leftOut"); 307 } 308 }); 309 310 311 $(".orderInfoNav li").click(function() { 312 var navId = this.dataset.id; 313 if(navId == 2) { 314 $(".envTempInfo").hide(); 315 $(".cargoInfo").show(); 316 317 } else { 318 $(".cargoInfo").hide(); 319 $(".envTempInfo").show(); 320 } 321 $(".orderInfoNav li").removeClass("orderInfoNav_select"); 322 $(this).addClass("orderInfoNav_select"); 323 324 }); 325 326 $(".packUpBtn").click(function() { 327 var upId = this.dataset.id; 328 if(upId == 0) { 329 this.dataset.id = 1; 330 $(".packUpBtn").html("<span><</span><span><</span>"); 331 $(".orderInfo").removeClass("leftOut"); 332 $(".orderInfo").addClass("rightIn"); 333 } else { 334 this.dataset.id = 0; 335 $(".packUpBtn").html("<span>></span><span>></span>"); 336 $(".orderInfo").removeClass("rightIn"); 337 $(".orderInfo").addClass("leftOut"); 338 } 339 }); 340 </script> 341 342 </html>
jq_從右向右的滑入滑出效果