zoukankan      html  css  js  c++  java

  • 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          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          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; 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=" 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>
    这里是源码！！！
  • 相关阅读:
    javaScript系列 [35]HTML页面渲染的基本过程
    javaScript系列 [29] RegExp
    javaScript系列 [40]defineProperty
    javaScript系列 [32] type
    javaScript系列 [34]FormData
    javaScript系列 [39]deepClone
    javaScript系列 [33] new
    javaScript系列 [36]Call by sharing
    javaScript系列 [38]浏览器、HTML和内核(引擎)
    javaScript系列 [28] Event
  • 原文地址：https://www.cnblogs.com/giserjobs/p/12180892.html
Copyright © 2011-2022 走看看