我的网站上有一个按钮,单击它会显示/隐藏google map div(使用iframe嵌入)。除border-radius仅在jquery动画期间起作用外,它都工作正常。动画制作完成后,iframe就会变成正方形。
的HTML
<div id="layer-2">
<span id="moreInfo">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12242.306455925878!2d-75.12138282383809!3d39.90611059880662!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3e48fdca1ebac4d0!2sWalt+Whitman+Bridge!5e0!3m2!1sen!2sin!4v1395728987250" width="300" height="200" frameborder="0" style="border:0"></iframe>
</span>
</div>
<button>Show</button>
Java脚本
$(function () {
$("button").on("click", function () {
if(parseInt($("#moreInfo").css("opacity"))) {
$("button").text("Show");
$("#moreInfo").css({opacity:1,top:0,height:200,display:'inline'});
$("#moreInfo").animate({opacity: 0,top: 100,height: 100}, 100, function () {$("#moreInfo").hide();});
} else {
$("button").text("Hide");
$("#moreInfo").css({opacity:0,top:100,height:100,display:'inline'});
$("#moreInfo").show();
$("#moreInfo").animate({opacity: 1,top: 0,height: 200}, 100);
}
});
});
的CSS
#moreInfo {
position: absolute;
opacity: 0;
top: 0px;
left: 10px;
width: 300px;
height: 200px;
background-color: blue;
border-radius: 50%;
}
#layer-2 {
height: 200px;
}
body {
background-color: #aaa;
}
注意:请不要标记此重复项,我已经经历了许多堆栈溢出的答案,但没有一个有帮助。另外,请不要建议任何其他Google Maps api集成,我需要使用iFrame实现。
它确实有效,您需要使用overflow: hidden;
该span
元素作为iframe
溢出的span
元素,并且由于您尚未border-radius
在iframe上应用它,因此它呈现为矩形块...
#moreInfo {
position: absolute;
opacity: 0;
top: 0px;
left: 10px;
width: 300px;
height: 200px;
background-color: blue;
border-radius: 50%;
overflow: hidden;
}
如果您不想使用overflow: hidden;
父级,则最好border-radius
将iframe
用作父级...并摆脱blue
背景色...
#moreInfo iframe {
border-radius: 50%;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句