地理数据时空查询UI模板:可拖动浮动窗口实现时间查询和空间查询
<div class='container'>
<div id='timeQuery' class='queryWindow'>
<h3>时间查询</h3>
<!-- 时间查询相关内容 -->
</div>
<div id='spaceQuery' class='queryWindow'>
<h3>空间查询</h3>
<!-- 空间查询相关内容 -->
</div>
</div>
<style>
.container {
position: relative;
}
.queryWindow {
position: absolute;
width: 300px;
height: 200px;
background-color: #f6f6f6;
border: 1px solid #ccc;
padding: 10px;
cursor: move;
}
.queryWindow h3 {
margin: 0;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}
/* 可拖动浮动窗口的样式 */
.queryWindow {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.queryWindow:hover {
background-color: #eaeaea;
}
.queryWindow:active {
background-color: #ddd;
}
</style>
<p>这是一个简单的地理数据时空查询可视化UI模板,包含了时间查询和空间查询的可拖动浮动窗口。你可以根据自己的需求进行修改和定制。 </p>
<p>你可以将以上代码保存为一个HTML文件,并将CSS代码保存为名为styles.css的文件,然后在浏览器中打开该HTML文件,即可看到时间查询和空间查询的可拖动浮动窗口。你可以根据需要在相关内容部分添加具体的查询表单或其他内容。</p>
原文地址: https://www.cveoy.top/t/topic/fd68 著作权归作者所有。请勿转载和采集!