我想实现鼠标悬停时平滑过渡的效果。与弹出窗口相同(相似)。 我现在已经用以下代码涵盖了它:
var i, j, k = 0;
var opaOn = 0.5;
var opaOff = 1.0;
var waitInterval=20;
var marker1 = L.marker([54.351194, 18.644001], {
title: "F-25",
opacity: opaOn
})
.addTo(map)
.on('mouseover', function(e) {
localName = 'Marker 1';
popupName.setContent(localName);
this.openPopup();
for (let i = 1; i <= (1.0 - opaOn) * 10; i++) {
setTimeout(function timer() {
j = ((i / 10) + opaOn);
marker1.setOpacity(j);
popupMaster.setContent("Value: " + j);
}, i * waitInterval);
}
})
.on('mouseout', function(e) {
this.closePopup();
for (let i = 1; i <= (j - opaOn) * 10; i++) {
setTimeout(function timer() {
k = (opaOff - (i / 10));
marker1.setOpacity(k);
popupMaster.setContent("Value: " + k);
}, i * waitInterval);
}
})
.on('click', function(e) {
popupMaster.setContent('hello');
})
.bindPopup(popupName);
这是我之前尝试过的一些版本,有点乱,但其想法是,在“鼠标悬停”时,每 20 毫秒(waitInterval)增加 0.1 不透明度,从 0.5(opaOn)到 1.0(opaOff),然后执行“鼠标移出”时向后操作。
问题是,当鼠标快速穿过标记时,不透明度会变得困惑。我确实知道为什么会发生这种情况,因为“mouseover”循环在“mouseout”开始之前未能完成,因此“mouseover”仍然会增加值(value),而“mouseout”会尝试减去它。 我尝试添加 bool 触发器和 if 条件,如果另一个触发器未完成,则一个触发器无法执行。我尝试为“mouseout”添加 setTimeout() ,以便它自动等待一段时间,然后开始进行减法 - 没有运气。我尝试了一些更多不同的变体,但总是存在一个小间隙,导致“脚本”崩溃。
我读过有关异步函数/事件的内容,但无论如何我都无法在我的元素中实现它。
一点点帮助大家,提前致谢!
最佳答案
如果您的目标只是添加不透明度的过渡,您可能应该使用 CSS transitions .
使用这些 CSS 类
.leaflet-marker-icon {
opacity: 0.5;
}
.leaflet-marker-hover {
transition-property: opacity;
transition-duration: 1s;
opacity: 1;
}
在 mouseover
/mouseout
上切换 leaflet-marker-hover
类
L.marker([54.351194, 18.644001], {
title: "F-25"
})
.addTo(map)
.on('mouseover', function(e) {
popupName.setContent('Marker 1');
this.openPopup();
L.DomUtil.addClass(e.target.getElement(), 'leaflet-marker-hover');
})
.on('mouseout', function(e) {
this.closePopup();
L.DomUtil.removeClass(e.target.getElement(), 'leaflet-marker-hover');
})
.bindPopup(popupName);
以及基于您的示例的演示
var center = [54.351194, 18.644001];
var map = L.map('map').setView(center, 11);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 40
}).addTo(map);
var popupName = L.popup({
closeOnClick: false,
autoClose: false,
closeButton: false
});
var points = [
{latlng: [54.351194, 18.644001], title: "F-25", name: "Marker 1"},
{latlng: [54.361194, 18.664001], title: "F-26", name: "Marker 2"},
]
points.forEach(function(p) {
L.marker(p.latlng, {
title: p.title
})
.addTo(map)
.on('mouseover', function(e) {
popupName.setContent(p.name);
this.openPopup();
L.DomUtil.addClass(e.target.getElement(), 'leaflet-marker-hover');
})
.on('mouseout', function(e) {
this.closePopup();
L.DomUtil.removeClass(e.target.getElement(), 'leaflet-marker-hover');
})
.bindPopup(popupName);
});
html, body, #map {
height: 100%;
}
.leaflet-marker-icon {
opacity: 0.5;
}
.leaflet-marker-hover {
transition-property: opacity;
transition-duration: 1s;
opacity: 1;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<div id="map"></div>
关于javascript - 传单 map : marker's smooth transition opacity change,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60696311/