- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
javascript 的新手,尝试在 SVG map 上定位元素/路径的工具提示顶部中心。目前,工具提示在 .mousemove
之后,但希望它固定在顶部中心,最好有轻微的偏移,这样它几乎不会与所选区域重叠。
这是 JSfiddle 上的代码:https://jsfiddle.net/mwalker005/a8vrmw06/
$("path, polygon").hover(function(e) {
$('#info-box').css('display','block');
$('#info-box').html($(this).data('info'));
});
$("path, polygon").mouseleave(function(e) {
$('#info-box').css('display','none');
});
$(document).mousemove(function(e) {
$('#info-box').css('top',e.pageY-$('#info-box').height()-40);
$('#info-box').css('left',e.pageX-($('#info-box').width())/2);
}).mouseover();
var ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(ios) {
$('abbr').on('click touchend', function() {
var link = $(this).attr('href');
window.open(link,'_blank');
return false;
});
}
#map-example{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
path:hover, polygon:hover {
fill: #20487c !important;
}
#info-box {
background-color: #333;
border-bottom: 3px solid #3498DB;
color: #fff;
display: none;
font-family: arial;
left: 0px;
padding: 5px;
position: absolute;
top: 0px;
width: 150px;
z-index: 1;
}
#info-box:after {
content: '';
display: block;
position: absolute;
left: 35px;
top: 100%;
width: 0;
border: 10px solid transparent;
border-top-color: #3498DB;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="info-box"></div>
<svg version="1.1" id="map-example" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 300 200" style="enable-background:new 0 0 300 200;" xml:space="preserve">
<path id="area 01" data-info="<div>Area 01:</div><div>More Info about area</div>" fill="#D3D3D3" d="M90.5,72.5v12l7,1v12h20l3-27C120.5,70.5,108,77,90.5,72.5z"/>
<path id="area 02" data-info="<div>Area 02:</div><div>More Info about area</div>" fill="#D3D3D3" d="M89,72v14l7,1v12h21v17l-23-2l-11-6V93c0,0-6-7-16-5l5-33C72,55,80,59,89,72z"/>
<polygon id="area 03" data-info="<div>Area 03:</div><div>More Info about area</div>" fill="#D3D3D3" points="120,87 119,97 119,112 138,120 155,108 155,93 136,83 "/>
<polygon id="area 04" data-info="<div>Area 04:</div><div>More Info about area</div>" fill="#D3D3D3" points="138,122 143,131 146,129 152,137 155,135 159,138 159,152 174,146 199,131
225,117 219,108 199,108 170,101 157,94 156.5,108.5 "/>
<path id="area 05" data-info="<div>Area 05:</div><div>More Info about area</div>" fill="#D3D3D3" d="M122,70l-2,15l17-4l33,18l15,3l15-9l-21-29l-5,3l-17-19c0,0-16,10-22,15
C127.9,68.9,122,70,122,70z"/>
<path id="area 06" data-info="<div>Area 06:</div><div>More Info about area</div>" fill="#D3D3D3" d="M158,47.2l16.8,18.1l4.9-3l22.7,31.2l-15.8,10L198,106l22.7,1l5.3,9l12-6l7.5-27.1
l-4.9-20.1l-24.7-32.2c0,0-7.9-8-20.8-1l-3-3C192.1,26.6,175,36,158,47.2z"/>
<polygon id="area 07" data-info="<div>Area 07:</div><div>More Info about area</div>" fill="#D3D3D3" points="102,117 101,139 93,145 95,150 95,156 90,156 87,150 83,150 83,157 73,157
73,154 78,150 70,137 67,139 65,134 67,130 75.5,129.5 79.5,122.5 83.5,110.5 94.5,116.5 "/>
<polygon id="area 08" data-info="<div>Area 08:</div><div>More Info about area</div>" fill="#D3D3D3" points="81,95 81,108 78,121 74,128 65,128 63,132 54,132 54,128 40,127 40,122
43,122 47,117 51,117 51,110 56,110 56,95 63,95 67,90 70,90 77,91 "/>
<polygon id="area 09" data-info="<div>Area 09:</div><div>More Info about area</div>" fill="#D3D3D3" points="104,118 119,118 119,114 135,121 142,133 146,131 151,138 147,141 141,136
120,150 104,137 "/>
</svg>
最佳答案
实际上,您使用 mouseleave
处理程序来隐藏工具提示,并使用 mousemove
处理程序使工具提示跟随鼠标...
评论所有内容。
为每个多边形
和路径
添加一个数据属性。例如:
<path id="area 01" data-tooltip-left="33" data-tooltip-top="22" data-info="<div>Area 01:</div><div>More Info about area</div>" fill="#D3D3D3" d="M90.5,72.5v12l7,1v12h20l3-27C120.5,70.5,108,77,90.5,72.5z"/>
然后像这样修改您的hover
处理程序:
var timeout;
$("path, polygon").hover(
function() {
clearTimeout(timeout);
console.log($(this)[0].tagName);
$('#info-box').css({
'display':'block',
'position':'fixed',
'top':$(this).offset().top + parseInt($(this).data("tooltip-top")), // 22px added
'left':$(this).offset().left + parseInt($(this).data("tooltip-left")) // 33px added
});
$('#info-box').html($(this).data('info'));
},
function(){
timeout = setTimeout(function(){
$('#info-box').css('display','none');
},1000);
});
timeout
变量只是为了防止鼠标经过工具提示时出现运球效果。
.hover()
处理程序中的第一个函数是 mouseenter
操作。第二个是 mouseleave
Action 。
注意超时仅在 mouseleave 上实例化...并在 mouseenter
上“禁用”或“重置”以防止运球。
现在,关于“居中”... 由于您的多边形具有不规则形状,这可能很难。但是使用数据属性,逐个形状...可以做一些事情。
您的乐趣从这里开始。
;)
Updated Fiddle (没有那个居中的方面)
Last Fiddle (有定心解...找“Area 06”)
编辑
有一个“调整大小”方面......而且 SVG 大小与工具提示大小不是线性相关的。在与它战斗时,我厌倦了 Fiddle 一直愚蠢地窃听,所以我继续这个 CodePen我靠近的地方...
关于javascript - 如何定位工具提示顶部路径中心? SVG map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48039258/
我正在尝试从一个 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 m
我是 Haskell 的新手,我认为函数 map map和 map.map在 Haskell 中是一样的。 我的终端给了我两种不同的类型, (map.map) :: (a -> b) -> [[a]
我的目标是创建一个 map 的 map ,这样我就可以通过它的键检索外部 map 的信息,然后通过它们的键访问它的“内部” map 。 但是,当我得到每个内部映射时,我最初创建的映射变成了一个对象,我
如何使用 Java8 编写以下代码? for (Entry> entry : data.entrySet()) { Map value = entry.getValue(); if (valu
我有覆盖整个南非的图片。它们为Tiff格式,并已将坐标嵌入其中。我正在尝试拍摄这些图像(大约20张图像),并将它们用作我的iPhone应用程序中的地图叠加层。我的问题在于(准确地)将地图切成图块。 我
所以我有 2 std::map s >一个是“旧的”,一个是“新的”,我想知道哪些文件被删除了,这样就能够遍历差异并对 shared_ptr 做一些事情。这样的事情可能吗?如何做到? 最佳答案 虽然
是否可以将当前查看的 google.maps.Map 转换为静态图像链接,以便我可以获取图像并将其嵌入到 PDF 中? 我在 map 上添加了一些带有自定义图标的标记,所以我不确定这是否真的可行。 如
你能帮我吗 Java Streams ? 从标题可以看出我需要合并List>>进入Map> . 列表表示为List>>看起来像: [ { "USER_1":{
对于 idAndTags 的第二个条目,内部映射被打乱,但第一个条目则不然 第一次接近! for (Map.Entry> entryOne : idAndTags.entrySet()) {
我将从我的代码开始,因为它应该更容易理解我想要做什么: @function get-color($color, $lightness) { @return map-get(map-get($col
我过去曾在许多网站上使用过 Google map ,但遇到了以前从未遇到过的问题。 map 窗口正在显示,但它只显示左上角的 map 片段,以及之后的任何内容(即使我在周围导航时),右侧也不会加载任何
众所周知,这些 map ,无论是常规街道 map 还是卫星 map ,在中国的特定地区都无法正确排列。那么哪个 map 排列正确,是卫星 map 还是默认街道 map ?一些网站表明卫星 map 是正
在拖尾事件之后,我面临着获取此处 map 中的 map 边界的问题。我需要新的经纬度来在新更改的视口(viewport)中获取一些项目/点。我只是想在拖动结束时获得谷歌地图map.getBounds(
我想做的是通过 ajax API 显示以英国邮政编码为中心的小型 bing 生成 map 。我相信这是可能的;我在 Bing map 文档中找不到如何将英国邮政编码转换为可以插入 map Ajax 控
我有一个 List我想转换成的 e Map>其中外部字符串应为“Name”,内部字符串应为“Domain”。 Name Id Domain e(0) - Emp1, 1, Insuran
我的第 2 部分:https://stackoverflow.com/questions/21780627/c-map-of-maps-typedef-doubts-queries 然后我继续创建 I
是否可以在 1 行中使用 Java8 编写以下所有 null 和空字符串检查? Map> data = new HashMap<>(holdings.rowMap()); Set>> entrySet
我正在审查一个项目的旧代码,并使用 Map 的 Map 的 Map 获得了如下数据结构(3 层 map ): // data structure Map>>> tagTree
这可能是一种不好的做法,但我还没有找到更好的解决方案来解决我的问题。所以我有这张 map // Map>> private Map>> properties; 我想初始化它,这样我就不会得到 Null
我们在 JDK 1.7 中使用 HashMap,我在使用 SonarQube 进行代码审查时遇到了一些问题。 请考虑以下示例: public class SerializationTest imple
我是一名优秀的程序员,十分优秀!