html/css
html/css
漏刻有时
数据可视化和地图可视化技术研究
展开
-
使用css实现一个图片360°旋转并能调整速度的解决方案
如果它是’2s’(快速),我们就将它改为’4s’(慢速)。如果它是’4s’(慢速),我们就将它改为’2s’(快速)。这样,每次点击按钮时,图片的旋转速度就会改变。要实现一个圆形图片360°旋转并且能调整速度的效果,你需要结合HTML,CSS和JavaScript。首先,在HTML中,我们需要一个图片元素和一个按钮元素,按钮用于调整旋转速度。这个动画从0度开始旋转到360度。然后,在CSS中,我们需要为图片元素设置一个动画,使其能够进行360°旋转。的图片元素上,设置动画时间为2秒,并且让动画无限次地重复。原创 2023-09-05 00:15:00 · 1177 阅读 · 0 评论 -
漏刻有时数据大屏CSS样式表成长教程(3):使用样式表做圆环指示图标
使用CSS样式表做圆环1.将block块通过border-radius: 50%转为圆;2.设置圆的边框border: 2px solid #FF4145;3.background: transparent背景色为透明;@lockdata.cn原创 2022-06-18 15:47:22 · 256 阅读 · 0 评论 -
漏刻有时数据大屏CSS样式表成长教程(2):九宫格图表背景自适应的解决方案
在数据可视化大屏中,经常出现同样的图片作为背景,但是尺寸不同,需要做多个背景图片的情况。这样不仅增加了切图工作,更是在无形中增加了图片的加载数量。核心样式表@lockdata.cn原创 2022-06-18 15:40:46 · 442 阅读 · 0 评论 -
text-overflow实现数据可视化大屏文本滚动自适应伸缩隐藏
数据可视化大屏在实际开发中,必须考虑到大屏的自适应。文本的自适应性是不可避免的功能开发。在此过程中,CSS的text-overflow是不可或缺的手段。原创 2022-06-04 08:05:57 · 472 阅读 · 3 评论 -
select下拉框选择触发事件
HTML<select onchange="func()" id="near"> <option value="">附近</option> <option value="0">选项一</option> <option value="1">选项二</option></select>jq传参 function func() { var vs = $('#near原创 2021-12-03 09:01:08 · 7142 阅读 · 0 评论 -
DIV+CSS文字与图片上下垂直居中-div css居中
img {vertical-align:middle;}lockdatav Done!原创 2021-05-03 15:53:04 · 394 阅读 · 0 评论 -
百度地图开发自定义信息窗口openInfoWindow样式的解决方案
1.InfoWindow的样式,百度是没用提供直接使用的样式表的,目前都是热心网友在实际开发中自己的经验和实战总结;2.百度提供了InfoBox富文本标签弹出框的接口,引入InfoBox.js,即可自定义样式或丰富的边框功能,但是鼠标单击下一个标注时,已经弹出的模态框是无法自动关闭;InfoWindow单击事件则是会即时展示现在单击的弹出模态框。3.InfoBox的样式表要理解,必须理解的组成部分;4.实现原理,就是CSS优先级和权重问题以及!important优先级;/*地图标题 infoW..原创 2021-03-07 17:34:19 · 4281 阅读 · 0 评论 -
HTML和CSS实现鼠标下拉菜单
实现原理将一级菜单和二级菜单置于同一个DIV,二级菜单默认显示为none,鼠标滑过,调用:hover,显示。HTML <span class="btn-list-group"> <a class="menuBtn"><img src="images/headimg.png" alt="会员"></a> <span class="btn-list-area"> <a class="menuBtn subMe.原创 2021-02-28 11:31:29 · 512 阅读 · 0 评论 -
获取web页面的宽度和高度
网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth网页正文全文高: document.body.scrollHeight网页被卷去的高: document.body.sc原创 2020-11-04 17:35:55 · 441 阅读 · 0 评论 -
漏刻有时数据大屏CSS样式表成长教程(4):数据指标层叠排版
CSS :root { --gradient: linear-gradient(135deg, #03c8f2 10%, #5151E5 100%); } .pannel { position: relative; width: 400px; height: 200px; z-index: 99; } .item {.原创 2021-02-06 12:30:30 · 473 阅读 · 0 评论 -
悬浮坐标的开发:拾取静态图片坐标进行热点标注
【代码】悬浮坐标的开发:拾取静态图片坐标进行热点标注。原创 2020-12-08 08:31:59 · 55 阅读 · 0 评论 -
CSS按钮高亮的解决方案
.active { background-color: aqua; }<div id="list"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span></div> var原创 2020-12-03 20:50:22 · 917 阅读 · 0 评论 -
data-*属性的使用(1)data-*属性的使用
<div id="main" data-id="1" data-url="ani.html" data-index="1">data-*属性</div><a href="dom_obj_attributes.php" target="_blank">Attr 对象</a> var a = document.getElementById("main").getAttribute("data-index"); console.log(a);原创 2020-12-03 20:48:02 · 477 阅读 · 2 评论 -
Echarts实战案例代码(49):基于不支持立体漏斗图Funnel的HTML+CSS解决方案
Echarts的Funnel目前是不支持3D的,但是设计师在项目过程中,为了项目的炫目,会出现伪3D之类的图表。本案例是基于HTML+CSS的解决方案CSS样式表 body { margin: 0; padding: 0; background-color: #343d4b; } .funnel { background: url("funnel.png") n原创 2020-11-05 10:15:27 · 1519 阅读 · 0 评论 -
CSS背景图片自适应大小
/*数据指标装饰框*/.rim { position: relative; background: url("../images/boder.png"); background-size: 100% 100%; padding: 10px; margin-bottom: 15px; z-index: 10;}Done!原创 2020-10-31 21:15:17 · 579 阅读 · 1 评论 -
CSS版的雷达扫描效果
CSS代码 body { background-color: #000; } #radar:after { content: ''; display: block; background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00ff33 100%); width:.原创 2020-10-28 17:39:59 · 534 阅读 · 0 评论 -
layui在当前页面弹出层的HTML
<!--弹窗内容 Begin--><!--性别--><div class="popup" id="popup1"> <div id="gender2" style="width:750px;height:550px;"></div></div><!--年龄--><div class="popup" id="popup2"> <div id="ages2" style="width:原创 2020-10-24 21:01:34 · 963 阅读 · 0 评论 -
漏刻有时数据可视化大屏常用排版HTML和CSS动画(1):旋转动画
<div> <img class="jzxz1" src="images/jzxz1.png"> <img class="jzxz2" src="images/orange.png"></div> .jzxz1 { animation: xz1 8s infinite linear; } @keyframes xz1 { from { .原创 2020-10-23 20:26:00 · 748 阅读 · 0 评论 -
CSS样式表在javascript函数中的写法
认真仔细的看了一边CSS结构,就是前端经常用的json对象,只是一直没注意,直到javascript函数调用CSS样式的时候才发现,做个记号吧!.menuBox { display: inline-block; position: absolute; border: 1px solid #aaa; background-color: #fff; font-size: 12px;原创 2020-08-25 17:48:57 · 435 阅读 · 0 评论 -
漏刻有时数据可视化Echarts组件开发(38):半同心环的数据可视化的解决方案
【代码】漏刻有时数据可视化Echarts组件开发(38):半同心环的数据可视化的解决方案。原创 2020-07-01 09:38:11 · 37 阅读 · 1 评论 -
漏刻有时数据大屏CSS样式表成长教程(1)CSS绝对定位时水平居中的写法
在CSS定位的过程中,正常的居中定位:margin:0 auto可以满足水平居中;但是决定定位是,使用left:50%,实际在视觉上不是水平居中的。目前一个最佳的绝对定位水平居中的代码如下:(上下左右都居中,删除对应的top和bottom,即可实现水平居中) width: 600px; height: 400px; position: absolute; left: 0;......原创 2020-03-04 21:46:46 · 452 阅读 · 1 评论 -
CSS伪类的使用:标题下划线的纯CSS代码
.title { color: #fff; font-size: 20px; line-height: 40px; height: 40px; text-align: center; position:relative; ...原创 2020-02-22 19:16:19 · 882 阅读 · 0 评论 -
txt文档的标准写法参考示例
当前版本对上个版本无缝兼容,可直接覆盖升级。原创 2020-07-01 10:08:08 · 24 阅读 · 0 评论