3

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

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

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

4

3 回答 3

8

仅针对地图的效果并不难实现。观察scroll窗口的-event，使用panBymap的-方法得到效果。

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

于 2013-08-15T22:14:36.943 回答
1

您提供的链接对我来说似乎不是视差，但无论哪种方式，我都使用 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)'});
});
于 2016-07-21T19:03:26.923 回答
0

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

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

于 2013-08-15T20:59:07.503 回答