Question

我的网站上有一个嵌入式谷歌地图，点击按钮后会改变位置。

<% provide(:title, "Car Pooling") %>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <h1>Car Pooling</h1>

<body>
<button data-long="23.7454209" data-lat="37.9758438" typeof="button">Na Fianna</button>
<button data-long="2.3470599" data-lat="48.8588589" typeof="button">St. Pauls</button>
<button data-long="-122.081267" data-lat="37.4038194" typeof="button">Kevins</button>
<br>
<div id="info">48.8588589,2.3470599</div>
<br>
<iframe id="map" width="600" height="450" src="https://www.google.com/maps/embed/v1/view?key=AIzaSyDxbtgKBohoqXqwPNEYOUGB5WNftHUVDWw&amp;center=48.8588589,2.3470599&amp;zoom=18&amp;maptype=roadmap" frameborder="0" style="border: 0px currentColor; border-image: none;"></iframe>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 
</script> 
<script type="text/javascript"> 
_uacct = "UA-162157-1";
urchinTracker();
</script> 

</body>

和javascript：

$(function() {
  $('button').each(function(i, btn) {
    $(btn).click(function() {
      var el = $(this)[0];
      var urlbeg="https://www.google.com/maps/embed/v1/view?key=AIzaSyDxbtgKBohoqXqwPNEYOUGB5WNftHUVDWw&center=";
      var urlend="&zoom=18&maptype=roadmap";
      var lat=el.dataset.lat;
      var lng=el.dataset.long;
      $('#info').text(lat+","+lng);
      $("iframe").attr("src",urlbeg+lat+","+lng+urlend);
    });
  });
});

我想只显示按钮，然后当点击一个按钮时，地图会显示为前景中屏幕中心的叠加层，背景稍微褪色。

有人可以建议如何解决这个问题吗？应该使用CSS还是javascript完成？

Answer 1

我会用JQuery和CSS做这样的事情，如下所示。使用这种方法，您可以灵活地根据自己的喜好微调效果。

CSS：

iframe {
    display: none;
    z-index: 2;
    transition: all 0.8s ease;
}

.body-shade {
    width: 100%;
    height: 100%;
    background: rgba(51, 51, 51, 0.5);
}

JQuery的：

  $('button').click(function(){
    $('iframe').fadeIn('slow');
    $('body').toggleClass('body-shade');
  });

请记住，您可以通过jquery函数或CSS3过渡来减慢效果并使用此方法更改效果。

使用onclick事件创建iframe叠加层

1 个答案: