【问题标题】:Google Map Parallax Effect谷歌地图视差效果
【发布时间】:2013-08-15 20:51:01
【问题描述】:

我想知道如何在这个 wordpress 主题上创建视差 Google 地图效果(向底部滚动)

http://themeforest.net/item/3clicks-responsive-multipurpose-wordpress-theme/full_screen_preview/5092225

我尝试使用一些不同的视差 jquery 脚本和 javascript,但似乎无法获得相同的效果。

【问题讨论】:

  • 我不确定我看到地图的视差 - 对我来说这似乎是一个简单的谷歌地图?
  • 小心,Google 不允许在没有看到 Google 标志的情况下使用地图。

标签: javascript jquery wordpress google-maps


【解决方案1】:

只有一张地图的效果并不难实现。观察窗口的scroll-事件,使用贴图的panBy-方法得到效果。

简单实现:http://jsfiddle.net/doktormolle/dXqhn/

【讨论】:

  • 鼠标滚轮无法正常工作。有什么解决办法吗?
【解决方案2】:

您提供的链接对我来说似乎不是一个视差,但无论哪种方式,我都使用 Jquery scrollTop() 方法做了一个简短的小提琴,展示了它是如何实现的,注意它有点错误,但也许我们可以找到基于它的更好的解决方法。

这是从 Dr.Molle 的回答中分叉出来的小提琴:http://jsfiddle.net/xsz32sy9/

这里是 Jquery 代码:

var map;
function initialize() {
  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(52.5498783, 13.425209099999961),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  };
  map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
  new google.maps.Marker({map:map,position:map.getCenter()});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(window).scroll(function(){
    //THE HEIGHT, PLUS THE MARGIN OR PADDING IT NEEDS TO BE FULLY COVERED
    if($(window).scrollTop() < $('#map_canvas').height() + 21) 
        $('#map_canvas').css({'transform':'translate(0px,'+$(window).scrollTop()+'px)'});
});

【讨论】:

    【解决方案3】:

    页面看起来像谷歌地图,确保地图层大于它显示的空间,然后在用户滚动时将上边距从 0px 修改为 -150px。

    缩放控件位于单独的固定位置 div 中,以便它们在背景移动时保持原位。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2014-05-07
      • 1970-01-01
      • 1970-01-01
      • 2018-04-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多