flex布局构建大屏框架并支持翻页动画滚动表格功能
Posted giserjobs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了flex布局构建大屏框架并支持翻页动画滚动表格功能相关的知识，希望对你有一定的参考价值。
本文将利用flex属性构建大屏可视化界面。界面主要分标题栏、工具栏、数据可视化窗口。其中，翻页动画以及滚动表格功能分别分布在数据可视化界面两侧。
鼠标点击标题，可看到左侧窗口翻转动画；
整体布局效果图：
滚动列表效果图及核心代码：
var myH = $(".tableBoy").height() + 10;//获取容器高度 确定可视区域
$(".tableBoy").css({ ‘height‘: myH + "px", "overflow-y": "hidden" });
$(‘.tableB‘).clone().appendTo(".tableBoy");//拷贝数据
//设置动画
setInterval(function() {
$(".tableB").animate({ top: -myH + ‘px‘ }, 3000);
$(".tableB").animate({ top: ‘0px‘ }, 0);
});
源代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <title> 7 大屏展示ppt_40 8 </title> 9 </meta> 10 </head> 11 12 <body> 13 <style> 14 /* #A { 15 height: 100px; 16 width: 200px; 17 background: yellow; 18 border-radius: 50%; 19 transform: rotate(30deg); 20 Rotate div 21 transform: rotate(30deg); 22 -ms-transform: rotate(30deg); 23 IE 9 24 -webkit-transform: rotate(30deg); 25 Safari and Chrome 26 } 27 28 #B { 29 margin-top: 300px; 30 height: 100px; 31 width: 200px; 32 transform: scale(2, 3); 33 -ms-transform: scale(2, 3); 34 -webkit-transform: scale(2, 3); 35 background: blue; 36 37 } 38 39 .red { 40 color: red; 41 } 42 43 .green { 44 color: green; 45 } 46 */ 47 html, 48 body { 49 height: 100%; 50 } 51 52 body { 53 margin: 0px; 54 background: url(bigDataBackground.jpg) 100% 100%; 55 } 56 57 /* 版心 */ 58 .my-container { 59 width: 96%; 60 height: 100%; 61 margin: 0px auto; 62 /* background-color: #eee; */ 63 color: #fff; 64 /* display: flex;*/ 65 } 66 67 .my-container>div { 68 width: 100%; 69 } 70 71 /* 抬头 */ 72 .my-heart { 73 font-weight: 700; 74 font-size: 24px; 75 line-height: 24px; 76 background-color: #46487542; 77 height: 50px; 78 z-index: 999999; 79 /* text-align: center; */ 80 display: flex; 81 justify-content: center; 82 /* 水平居中 */ 83 align-items: center; 84 /* 竖直居中 */ 85 } 86 87 /* 工具栏 */ 88 .tool { 89 height: 70px; 90 display: flex; 91 justify-content: center; 92 /* 水平居中 */ 93 align-items: center; 94 /* 竖直居中 */ 95 } 96 97 .tool>div { 98 height: 40px; 99 width: 100%; 100 display: flex; 101 padding: 0 0 0 100px; 102 justify-content: flex-start; 103 position: relative; 104 } 105 106 /* 工具栏容器 */ 107 .tool-con { 108 width: 100%; 109 margin-left: 52px; 110 padding: 5px; 111 } 112 113 /* 展示容器 */ 114 .showCon { 115 display: flex; 116 justify-content: flex-start; 117 /* justify-content: center;水平居中 */ 118 align-items: center; 119 /* 竖直居中 */ 120 121 height: inherit; 122 margin-top: -132px; 123 padding-top: 130px; 124 padding-bottom: 28px; 125 box-sizing: border-box; 126 position: inherit; 127 top: 0px; 128 129 } 130 131 .showCon>div { 132 height: 100%; 133 background: #1000ff14; 134 position: relative; 135 padding: 4px 8px; 136 box-sizing: border-box; 137 border: 1px solid #300046; 138 } 139 140 .showLeft { 141 flex: 1; 142 position: relative; 143 } 144 145 .showCen { 146 flex: 2; 147 margin: 0 10px; 148 position: relative; 149 display: flex; 150 } 151 152 .showRig { 153 flex: 1; 154 position: relative; 155 } 156 157 .yuan { 158 width: 50px; 159 height: 50px; 160 top: -5px; 161 position: absolute; 162 justify-content: center; 163 /* 水平居中 */ 164 align-items: center; 165 /* 竖直居中 */ 166 } 167 168 169 170 /* 实线圆圈 */ 171 .cril_s { 172 border: 1px solid; 173 border-radius: 50%; 174 text-align: center; 175 } 176 177 /* 虚线圆圈 */ 178 .cril_x { 179 border: 1px dashed; 180 border-radius: 50%; 181 padding: 5px; 182 box-sizing: border-box; 183 } 184 185 /* 闪光 */ 186 .buling { 187 box-shadow: 0 0 10px #6360fb9c; 188 z-index: -1; 189 } 190 191 .tableBoy {} 192 193 .tableT, 194 .tableH, 195 .tableB { 196 display: flex; 197 padding: 5px 10px; 198 justify-content: flex-start; 199 position: relative; 200 margin-top: 10px; 201 border-radius: 4px; 202 } 203 204 .tableT { 205 font-weight: 700; 206 text-shadow: 1px 1px 6px #ff3b00; 207 /* 文字闪光 */ 208 } 209 210 .tableB { 211 background: #63300521; 212 margin-left: 14px; 213 } 214 215 .tableB::before { 216 content: attr(data-attr); 217 width: 24px; 218 height: 24px; 219 position: absolute; 220 border: 1px solid yellow; 221 background: #f9fd0224; 222 left: -12px; 223 top: 7px; 224 color: aqua; 225 transform: rotate(35deg); 226 /* padding: 0 5px; */ 227 text-align: center; 228 font-weight: 700; 229 box-sizing: border-box; 230 } 231 232 .tableH { 233 background: #c1671b21; 234 } 235 236 .tableB>div, 237 .tableH>div { 238 display: flex; 239 justify-content: center; 240 flex: 1; 241 } 242 243 .tableL { 244 align-items: center; 245 } 246 247 .l1, 248 .l2 { 249 height: 50%; 250 background: #f0f4ff0a; 251 position: relative; 252 } 253 254 .l2 { 255 margin: 5px 0; 256 } 257 258 /* 角装饰 */ 259 .showCen:before, 260 .showRig:before, 261 .showLeft:before { 262 content: ‘‘; 263 height: 6px; 264 width: 6px; 265 border-left: 2px solid #4b6ee2; 266 border-top: 2px solid #4b6ee2; 267 position: absolute; 268 top: -1px; 269 left: -1px; 270 z-index: 2; 271 272 } 273 274 .showCen:after, 275 .showRig:after, 276 .showLeft:after { 277 content: ‘‘; 278 height: 6px; 279 width: 6px; 280 border-right: 2px solid #4b6ee2; 281 border-bottom: 2px solid #4b6ee2; 282 position: absolute; 283 right: -1px; 284 bottom: -1px; 285 z-index: 2; 286 287 } 288 289 .tableB .tableR { 290 font-size: 23px; 291 color: aqua; 292 font-family: fantasy; 293 } 294 295 296 297 /* 正八边形 */ 298 #octagon { 299 width: 100px; 300 height: 100px; 301 background: #6376ff1f; 302 position: relative; 303 } 304 305 #octagon:before { 306 content: ""; 307 width: 50px; 308 height: 0; 309 position: absolute; 310 top: 0; 311 left: 0; 312 border-bottom: 25px solid #6376ff1f; 313 border-left: 25px solid white; 314 border-right: 25px solid white; 315 } 316 317 #octagon:after { 318 content: ""; 319 width: 50px; 320 height: 0; 321 position: absolute; 322 bottom: 0; 323 left: 0; 324 border-top: 25px solid #6376ff1f; 325 border-left: 25px solid white; 326 border-right: 25px solid white; 327 } 328 329 /* 八角星 */ 330 #burst-8 { 331 background: #6376ff1f; 332 width: 80px; 333 height: 80px; 334 position: relative; 335 text-align: center; 336 transform: rotate(20deg); 337 } 338 339 #burst-8:before { 340 content: ""; 341 position: absolute; 342 top: 0; 343 left: 0; 344 height: 80px; 345 width: 80px; 346 background: #6376ff1f; 347 transform: rotate(135deg); 348 } 349 350 /* 正六边形 */ 351 #hexagon { 352 width: 100px; 353 height: 55px; 354 background: #6376ff1f; 355 position: relative; 356 top: 25px; 357 } 358 359 #hexagon:before { 360 content: ""; 361 position: absolute; 362 top: -25px; 363 left: 0; 364 width: 0; 365 height: 0; 366 border-left: 50px solid transparent; 367 border-right: 50px solid transparent; 368 border-bottom: 25px solid #6376ff1f; 369 } 370 371 #hexagon:after { 372 content: ""; 373 position: absolute; 374 bottom: -25px; 375 left: 0; 376 width: 0; 377 height: 0; 378 border-left: 50px solid transparent; 379 border-right: 50px solid transparent; 380 border-top: 25px solid #6376ff1f; 381 } 382 383 /* 六角星 */ 384 #star-six { 385 width: 0; 386 height: 0; 387 border-left: 50px solid transparent; 388 border-right: 50px solid transparent; 389 border-bottom: 100px solid #6376ff1f; 390 position: relative; 391 } 392 393 #star-six:after { 394 width: 0; 395 height: 0; 396 border-left: 50px solid transparent; 397 border-right: 50px solid transparent; 398 border-top: 100px solid #6376ff1f; 399 position: absolute; 400 content: ""; 401 top: 30px; 402 left: -50px; 403 } 404 405 /* 心形 */ 406 #heart { 407 height: 50px; 408 width: 50px; 409 top: 20px; 410 background: #6376ff1f; 411 transform: rotate(45deg); 412 left: 20px; 413 position: absolute; 414 } 415 416 #heart:before { 417 position: absolute; 418 content: ""; 419 left: -25px; 420 top: 0px; 421 width: 50px; 422 height: 25px; 423 transform: rotate(-90deg); 424 background: #6376ff1f; 425 transform-origin: bottom; 426 border-radius: 50px 50px 0 0; 427 } 428 429 #heart:after { 430 position: absolute; 431 content: ""; 432 left: 0px; 433 top: -25px; 434 width: 50px; 435 height: 25px; 436 background: #6376ff1f; 437 border-radius: 50px 50px 0 0; 438 } 439 440 /* 平行四边形 */ 441 #ping { 442 height: 50px; 443 width: 100px; 444 transform: skew(20deg); 445 background: #6376ff1f; 446 } 447 448 /* 椭圆 */ 449 #tuoyuan { 450 height: 50px; 451 width: 100px; 452 border-radius: 50%; 453 background: #6376ff1f; 454 } 455 456 /*伪元素是行内元素 正常浏览器清除浮动方法*/ 457 .clearFix:after { 458 content: ""; 459 display: block; 460 height: 0; 461 clear: both; 462 visibility: hidden; 463 } 464 465 .sec:before { 466 content: attr(data-attr); 467 height: 24px; 468 color: brown; 469 } 470 471 .sec_new:before { 472 content: attr(data-attr); 473 height: 24px; 474 color: red; 475 } 476 477 .fanzhuan { 478 -webkit-animation: 1.5s fanzhuan ease-in-out backwards; 479 -moz-animation: 1.5s fanzhuan ease-in-out backwards; 480 animation: 1.5s fanzhuan ease-in-out backwards; 481 } 482 483 @-webkit-keyframes fanzhuan { 484 0% { 485 -moz-transform: scale(0) rotateX(360deg); 486 -ms-transform: scale(0) rotateX(360deg); 487 -webkit-transform: scale(0) rotateX(360deg); 488 transform: scale(0) rotateX(360deg); 489 height: 150px; 490 width: 150px; 491 } 492 493 50% { 494 -moz-transform: none; 495 -ms-transform: none; 496 -webkit-transform: none; 497 transform: none; 498 height: 150px; 499 } 500 501 75% { 502 height: 350px; 503 width: 150px; 504 } 505 506 100% { 507 width: 450px; 508 } 509 } 510 511 @-moz-keyframes fanzhuan { 512 0% { 513 -moz-transform: scale(0) rotateX(360deg); 514 -ms-transform: scale(0) rotateX(360deg); 515 -webkit-transform: scale(0) rotateX(360deg); 516 transform: scale(0) rotateX(360deg); 517 height: 150px; 518 width: 150px; 519 } 520 521 50% { 522 -moz-transform: none; 523 -ms-transform: none; 524 -webkit-transform: none; 525 transform: none; 526 height: 150px; 527 } 528 529 75% { 530 height: 350px; 531 width: 150px; 532 } 533 534 100% { 535 width: 450px; 536 } 537 } 538 </style> 539 <div class="my-container"> 540 <div class="my-heart"> 541 <span>城市区域信息展示</span> 542 </div> 543 <div class="tool"> 544 <div> 545 <div class="yuan cril_x buling">圆形</div> 546 <div class="tool-con buling" style="box-shadow:0px 0 72px #3454dcba, 0 0 10px #504f7d9c, 0 0 10px #2c2a7545, 0 0 10px #1814de2b;">工具栏</div> 547 </div> 548 </div> 549 <div class="showCon"> 550 <div class="showLeft"> 551 <div class="l1">左一</div> 552 <div class="l2">左二</div> 553 </div> 554 <div class="showCen"> 555 中间区域 556 <!-- <div id="burst-8"></div> 557 <div id="octagon"></div> 558 <div style="position: relative;width: 100px;"> 559 <div id="heart"></div> 560 </div> 561 <div id="star-six"></div> 562 <div id="hexagon"></div> 563 <div id="ping"></div> 564 <div id="tuoyuan"></div> --> 565 </div> 566 <div class="showRig"> 567 <div class="tableT"> 568 <div class="yuan cril_s buling" style="width: 40px;height: 40px;">圆形</div> 569 <div class="tool-con buling" style="margin-left: 45px;">子工具栏具栏</div> 570 </div> 571 <div class="tableH"> 572 <div class="tableL"><span>地区名</span></div> 573 <div class="tableR"><span>得分</span></div> 574 </div> 575 <div class="tableBoy"> 576 <div class="tableB" data-attr=‘1‘> 577 <div class="tableL"><span>北京市</span></div> 578 <div class="tableR"><span>95.2</span></div> 579 </div> 580 <div class="tableB" data-attr=‘2‘> 581 <div class="tableL"><span>武汉市</span></div> 582 <div class="tableR"><span>88.7</span></div> 583 </div> 584 </div> 585 </div> 586 </div> 587 </div> 588 <script src="jquery-1.11.3.min.js"></script> 589 <script> 590 $(function() { 591 592 /* 1. 翻页动画*/ 593 $(".my-heart").on(‘click‘, function() { 594 $(".showLeft").removeClass(‘fanzhuan‘); 595 $(".showLeft").addClass(‘fanzhuan‘); 596 }); 597 598 /* 2. 拷贝数据 599 滚动列表*/ 600 var myH = $(".tableBoy").height() + 10;//获取容器高度 确定可视区域 601 $(".tableBoy").css({ ‘height‘: myH + "px", "overflow-y": "hidden" }); 602 $(‘.tableB‘).clone().appendTo(".tableBoy");//拷贝数据 603 //设置动画 604 setInterval(function() { 605 $(".tableB").animate({ top: -myH + ‘px‘ }, 3000); 606 $(".tableB").animate({ top: ‘0px‘ }, 0); 607 }); 608 609 610 611 612 }) 613 </script> 614 </body> 615 616 </html>
以上是关于flex布局构建大屏框架并支持翻页动画滚动表格功能的主要内容，如果未能解决你的问题，请参考以下文章