<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>
地理数据时空查询UI模板:可拖动浮动窗口实现时间查询和空间查询

原文地址: https://www.cveoy.top/t/topic/fd68 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录