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);
});
源代码：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<title>
大屏展示ppt_40
</title>
</meta>
</head> <body>
<style>
/* #A {
height: 100px;
width: 200px;
background: yellow;
border-radius: 50%;
transform: rotate(30deg);
Rotate div
transform: rotate(30deg);
-ms-transform: rotate(30deg);
IE 9
-webkit-transform: rotate(30deg);
Safari and Chrome
} #B {
margin-top: 300px;
height: 100px;
width: 200px;
transform: scale(2, 3);
-ms-transform: scale(2, 3);
-webkit-transform: scale(2, 3);
background: blue; } .red {
color: red;
} .green {
color: green;
}
*/
html,
body {
height: 100%;
} body {
margin: 0px;
background: url(bigDataBackground.jpg) 100% 100%;
} /* 版心 */
.my-container {
width: 96%;
height: 100%;
margin: 0px auto;
/* background-color: #eee; */
color: #fff;
/* display: flex;*/
} .my-container>div {
width: 100%;
} /* 抬头 */
.my-heart {
font-weight: 700;
font-size: 24px;
line-height: 24px;
background-color: #46487542;
height: 50px;
z-index: 999999;
/* text-align: center; */
display: flex;
justify-content: center;
/* 水平居中 */
align-items: center;
/* 竖直居中 */
} /* 工具栏 */
.tool {
height: 70px;
display: flex;
justify-content: center;
/* 水平居中 */
align-items: center;
/* 竖直居中 */
} .tool>div {
height: 40px;
width: 100%;
display: flex;
padding: 0 0 0 100px;
justify-content: flex-start;
position: relative;
} /* 工具栏容器 */
.tool-con {
width: 100%;
margin-left: 52px;
padding: 5px;
} /* 展示容器 */
.showCon {
display: flex;
justify-content: flex-start;
/* justify-content: center;水平居中 */
align-items: center;
/* 竖直居中 */ height: inherit;
margin-top: -132px;
padding-top: 130px;
padding-bottom: 28px;
box-sizing: border-box;
position: inherit;
top: 0px; } .showCon>div {
height: 100%;
background: #1000ff14;
position: relative;
padding: 4px 8px;
box-sizing: border-box;
border: 1px solid #300046;
} .showLeft {
flex: 1;
position: relative;
} .showCen {
flex: 2;
margin: 0 10px;
position: relative;
display: flex;
} .showRig {
flex: 1;
position: relative;
} .yuan {
width: 50px;
height: 50px;
top: -5px;
position: absolute;
justify-content: center;
/* 水平居中 */
align-items: center;
/* 竖直居中 */
} /* 实线圆圈 */
.cril_s {
border: 1px solid;
border-radius: 50%;
text-align: center;
} /* 虚线圆圈 */
.cril_x {
border: 1px dashed;
border-radius: 50%;
padding: 5px;
box-sizing: border-box;
} /* 闪光 */
.buling {
box-shadow: 0 0 10px #6360fb9c;
z-index: -1;
} .tableBoy {} .tableT,
.tableH,
.tableB {
display: flex;
padding: 5px 10px;
justify-content: flex-start;
position: relative;
margin-top: 10px;
border-radius: 4px;
} .tableT {
font-weight: 700;
text-shadow: 1px 1px 6px #ff3b00;
/* 文字闪光 */
} .tableB {
background: #63300521;
margin-left: 14px;
} .tableB::before {
content: attr(data-attr);
width: 24px;
height: 24px;
position: absolute;
border: 1px solid yellow;
background: #f9fd0224;
left: -12px;
top: 7px;
color: aqua;
transform: rotate(35deg);
/* padding: 0 5px; */
text-align: center;
font-weight: 700;
box-sizing: border-box;
} .tableH {
background: #c1671b21;
} .tableB>div,
.tableH>div {
display: flex;
justify-content: center;
flex: 1;
} .tableL {
align-items: center;
} .l1,
.l2 {
height: 50%;
background: #f0f4ff0a;
position: relative;
} .l2 {
margin: 5px 0;
} /* 角装饰 */
.showCen:before,
.showRig:before,
.showLeft:before {
content: '';
height: 6px;
width: 6px;
border-left: 2px solid #4b6ee2;
border-top: 2px solid #4b6ee2;
position: absolute;
top: -1px;
left: -1px;
z-index: 2; } .showCen:after,
.showRig:after,
.showLeft:after {
content: '';
height: 6px;
width: 6px;
border-right: 2px solid #4b6ee2;
border-bottom: 2px solid #4b6ee2;
position: absolute;
right: -1px;
bottom: -1px;
z-index: 2; } .tableB .tableR {
font-size: 23px;
color: aqua;
font-family: fantasy;
} /* 正八边形 */
#octagon {
width: 100px;
height: 100px;
background: #6376ff1f;
position: relative;
} #octagon:before {
content: "";
width: 50px;
height: 0;
position: absolute;
top: 0;
left: 0;
border-bottom: 25px solid #6376ff1f;
border-left: 25px solid white;
border-right: 25px solid white;
} #octagon:after {
content: "";
width: 50px;
height: 0;
position: absolute;
bottom: 0;
left: 0;
border-top: 25px solid #6376ff1f;
border-left: 25px solid white;
border-right: 25px solid white;
} /* 八角星 */
#burst-8 {
background: #6376ff1f;
width: 80px;
height: 80px;
position: relative;
text-align: center;
transform: rotate(20deg);
} #burst-8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: #6376ff1f;
transform: rotate(135deg);
} /* 正六边形 */
#hexagon {
width: 100px;
height: 55px;
background: #6376ff1f;
position: relative;
top: 25px;
} #hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #6376ff1f;
} #hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #6376ff1f;
} /* 六角星 */
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #6376ff1f;
position: relative;
} #star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #6376ff1f;
position: absolute;
content: "";
top: 30px;
left: -50px;
} /* 心形 */
#heart {
height: 50px;
width: 50px;
top: 20px;
background: #6376ff1f;
transform: rotate(45deg);
left: 20px;
position: absolute;
} #heart:before {
position: absolute;
content: "";
left: -25px;
top: 0px;
width: 50px;
height: 25px;
transform: rotate(-90deg);
background: #6376ff1f;
transform-origin: bottom;
border-radius: 50px 50px 0 0;
} #heart:after {
position: absolute;
content: "";
left: 0px;
top: -25px;
width: 50px;
height: 25px;
background: #6376ff1f;
border-radius: 50px 50px 0 0;
} /* 平行四边形 */
#ping {
height: 50px;
width: 100px;
transform: skew(20deg);
background: #6376ff1f;
} /* 椭圆 */
#tuoyuan {
height: 50px;
width: 100px;
border-radius: 50%;
background: #6376ff1f;
} /*伪元素是行内元素 正常浏览器清除浮动方法*/
.clearFix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
} .sec:before {
content: attr(data-attr);
height: 24px;
color: brown;
} .sec_new:before {
content: attr(data-attr);
height: 24px;
color: red;
} .fanzhuan {
-webkit-animation: 1.5s fanzhuan ease-in-out backwards;
-moz-animation: 1.5s fanzhuan ease-in-out backwards;
animation: 1.5s fanzhuan ease-in-out backwards;
} @-webkit-keyframes fanzhuan {
0% {
-moz-transform: scale(0) rotateX(360deg);
-ms-transform: scale(0) rotateX(360deg);
-webkit-transform: scale(0) rotateX(360deg);
transform: scale(0) rotateX(360deg);
height: 150px;
width: 150px;
} 50% {
-moz-transform: none;
-ms-transform: none;
-webkit-transform: none;
transform: none;
height: 150px;
} 75% {
height: 350px;
width: 150px;
} 100% {
width: 450px;
}
} @-moz-keyframes fanzhuan {
0% {
-moz-transform: scale(0) rotateX(360deg);
-ms-transform: scale(0) rotateX(360deg);
-webkit-transform: scale(0) rotateX(360deg);
transform: scale(0) rotateX(360deg);
height: 150px;
width: 150px;
} 50% {
-moz-transform: none;
-ms-transform: none;
-webkit-transform: none;
transform: none;
height: 150px;
} 75% {
height: 350px;
width: 150px;
} 100% {
width: 450px;
}
}
</style>
<div class="my-container">
<div class="my-heart">
<span>城市区域信息展示</span>
</div>
<div class="tool">
<div>
<div class="yuan cril_x buling">圆形</div>
<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>
</div>
</div>
<div class="showCon">
<div class="showLeft">
<div class="l1">左一</div>
<div class="l2">左二</div>
</div>
<div class="showCen">
中间区域
<!-- <div id="burst-8"></div>
<div id="octagon"></div>
<div style="position: relative;width: 100px;">
<div id="heart"></div>
</div>
<div id="star-six"></div>
<div id="hexagon"></div>
<div id="ping"></div>
<div id="tuoyuan"></div> -->
</div>
<div class="showRig">
<div class="tableT">
<div class="yuan cril_s buling" style="width: 40px;height: 40px;">圆形</div>
<div class="tool-con buling" style="margin-left: 45px;">子工具栏具栏</div>
</div>
<div class="tableH">
<div class="tableL"><span>地区名</span></div>
<div class="tableR"><span>得分</span></div>
</div>
<div class="tableBoy">
<div class="tableB" data-attr='1'>
<div class="tableL"><span>北京市</span></div>
<div class="tableR"><span>95.2</span></div>
</div>
<div class="tableB" data-attr='2'>
<div class="tableL"><span>武汉市</span></div>
<div class="tableR"><span>88.7</span></div>
</div>
</div>
</div>
</div>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function() { /* 1. 翻页动画*/
$(".my-heart").on('click', function() {
$(".showLeft").removeClass('fanzhuan');
$(".showLeft").addClass('fanzhuan');
}); /* 2. 拷贝数据
滚动列表*/
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);
}); })
</script>
</body> </html>
这里是源码！！！
flex布局构建大屏框架并支持翻页动画、滚动表格功能的更多相关文章
- html 打印代码，支持翻页
ylbtech_html_print html打印代码,支持翻页 <html> <head> <meta name=vs_targetSchema content=&qu ...
- 通过js实现整屏滑动+全屏翻页+动画展示+线性图
技术:html+css+jquery+jquery-ui.js+jquery.fullPage.js 概述 本demo主要通过html+css+js实现整屏滑动,全屏翻页并带动画的功能效果,借助于 ...
- 15分钟构建超低成本数据大屏：DataV + DLA
第一步:准备低成本存储的业务数据和DLA表 OSS(https://www.aliyun.com/product/oss)是云上低成本数据存储的优选方案 DLA(https://www.aliyun. ...
- Qt编写数据可视化大屏界面电子看板1-布局方案
一.前言 布局方案在整个数据可视化大屏界面电子看板系统中,是除了基础功能以外的核心功能之一,只有具备了布局方案这个功能,才能让用户随意调整自己想要的布局,保存成自定义名称的布局配置文件,这样就大大增加 ...
- 【可视化大屏教程】用Python开发智慧城市数据分析大屏！
目录 一.开发背景 二.讲解代码 2.1 大标题+背景图 2.2 各区县交通事故统计图-系列柱形图 2.3 图书馆建设率-水球图 2.4 当年城市空气质量aqi指数-面积图 2.5 近7年人均生产总值 ...
- 【解决ViewPager在大屏上滑动不流畅】 设置ViewPager滑动翻页距离
在项目中做了一个ViewPager+Fragment滑动翻页的效果,在模拟器和小米手机上测试也比较正常.但是换到4.7以上屏幕测试的时候发现老是滑动失效. 因为系统默认的滑动策略是当用户滑动超过半屏之 ...
- 构建NetCore应用框架之实战篇（三）：BitAdminCore框架功能规划选择
本篇承接上篇内容,如果你不小心点击进来,建议从第一篇开始完整阅读,文章内容继承性连贯性. 构建NetCore应用框架之实战篇系列 一.BitAdminCore功能规划 如何选择框架的落地功能,前篇文章 ...
- flex布局防止被挤压 flex-shrink: 0
lex布局非常好用,但在开发过程中可能会碰到的一些坑 1.内容超出容器大致情况是:在一个设置了display:flex布局的大容器A中并排放置两个子容器,并且子容器设置flex:1,子容器中都有一个元 ...
- Visual-platform，基于Vue的可视化大屏开发GUI框架
visual-platform 基于Vue的可视化大屏开发GUI框架 ------ CreatedBy 漆黑小T 构建用于开发可视化大屏项目的自适应布局的GUI框架. github仓库: https: ...
随机推荐
- MFC对话框常用操作文章收藏
1.改变控件文本 参考链接:https://blog.csdn.net/active2489595970/article/details/88856235 所有控件的文本都可以用这种方式动态改变. 2 ...
- Rider代码格式设置
单选注释格式设置: File/Settings(Ctrl+Alt+S/Command+Option+S)/Code Style/C#选择Other
- Python—网络通信编程之tcp非阻塞通信(socketserver)
服务端代码 import socketserver # 定义一个类 class MyServer(socketserver.BaseRequestHandler): # 如果handle方法出现报错, ...
- python面试的100题（8）
企业面试题 15.python新式类和经典类的区别? (在Python 2及以前的版本中,由任意内置类型派生出的类(只要一个内置类型位于类树的某个位置),都属于“新式类”,都会获得所有“新式类”的特性 ...
- js处理json字符串
后台输出的字符串为 res= {"result":"true","data":"提交成功"} 前台js无法转化成对象,需 ...
- 总结下抽象类Abstract和虚方法Virtual（易混点）
1.普通类中可以有普通方法和虚方法,在被继承时,虚方法可以选择重写(override)或者不重写 2.抽象类中可以有普通方法和虚方法和抽象方法,当被继承时 如下 1.普通方法不能被子类重写 2.虚方法 ...
- Hibernate：HIbernate配置详解-HelloWorld
hibernate介绍: Hibernate是一个开源的对象关系映射框架,它对JDBC进行了轻量级的对象封装,使Java程序员可以随心所欲的使用对象编程思维来操纵数据库. 它不仅提供了从java类到数 ...
- python中pip问题
1.在cmd中运行pip命令显示‘pip命令显示不是内部或外部命令,也不是可运行的程序或批处理文件’的问题 先看python的安装目录下Script文件夹中pip3.exe有没有缺失 如果没有在cmd ...
- C#应用程序部署到集群若干问题
1. MemoryCache中的缓存在集群中的每个节点不能同步 解决方案: A. 将缓存内容迁移到系统外部的Redis缓存 B. 在使用MemoryCache的时候设置过期时间(当对数据同步要求不是那 ...
- SqlDataAdapter、DataSet、DataTable使用
原文链接:https://blog.csdn.net/zhang_hui_cs/article/details/7327395 using System.Data; using System.Data ...