本文将利用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>
这里是源码！！！原文地址：https://www.cnblogs.com/giserjobs/p/12180892.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。