使用 Parallax.js jQuery 插件时放大的背景图片
Background image zoomed in while using Parallax.js jQuery plugin
我添加了 parallax.js jQuery 插件并且效果有效,但不正确。背景被放大,图像在滚动时出现故障。我添加了文档中列出的其他变量来解决这些问题,它们按预期工作。然而,出乎意料的是,他们还破坏了我在“#sections”div 中使用 JS 动态创建的内容,一个空的 div 填充了一个 JavaScript 对象?
function parallaxBackground (){
var yPos = -(($window.scrollTop() - $this.offset().top) / 5);// Scroll speed
var coords = '1% '+ yPos + 'px';// Background position
$this.css({ backgroundPosition: coords });// Move the background
}
parallaxBackground();//Call parallaxBackground function
知道为什么这个函数会删除 HTML 使用 JS 创建的内容吗? JS 的其余部分仍然有效,只是停止工作的“#sections”div。滚动、显示和悬停效果仍然完好无损。这是代码的 link。
https://gist.github.com/flyspaceage/075dcf3a6d6bd65edf0f456036eb9bd8
请阅读 FlySpaceAge 的评论以了解更多信息。
我最终稍微更改了脚本并从 parallax documentation 添加了一些变量。虽然此解决方案确实修复了功能,但现在放大了背景图像。虽然不完美,但此功能确实修复了我发布的最初问题。
(function($){
$(document).ready(function(){
$('#sections').on('click', '.back-to-top', scrollToTop);
$('#jump-menu li').click(scrollToAnchor);
$('.parallax-window').parallax({imageSrc: '../images/background.png'});
});
function scrollToTop(event){
event.preventDefault();
$('html, body').animate({
scrollTop: 0
}, 500);
}
function scrollToAnchor(event){
event.preventDefault();
var target = $(this).attr('rel');
var offset = $(target).offset();
$('html, body').animate({
scrollTop: offset.top - 270
}, 500);
}
/* PARALLAX functionality*/
function parallaxBackground (){
var parallaxWidth = Math.max($(window).width() * 1, 1 ) | 0;
$('.parallax-window').width(parallaxWidth);
}
parallaxBackground();
})(jQuery);
我添加了 parallax.js jQuery 插件并且效果有效,但不正确。背景被放大,图像在滚动时出现故障。我添加了文档中列出的其他变量来解决这些问题,它们按预期工作。然而,出乎意料的是,他们还破坏了我在“#sections”div 中使用 JS 动态创建的内容,一个空的 div 填充了一个 JavaScript 对象?
function parallaxBackground (){
var yPos = -(($window.scrollTop() - $this.offset().top) / 5);// Scroll speed
var coords = '1% '+ yPos + 'px';// Background position
$this.css({ backgroundPosition: coords });// Move the background
}
parallaxBackground();//Call parallaxBackground function
知道为什么这个函数会删除 HTML 使用 JS 创建的内容吗? JS 的其余部分仍然有效,只是停止工作的“#sections”div。滚动、显示和悬停效果仍然完好无损。这是代码的 link。
https://gist.github.com/flyspaceage/075dcf3a6d6bd65edf0f456036eb9bd8
请阅读 FlySpaceAge 的评论以了解更多信息。
我最终稍微更改了脚本并从 parallax documentation 添加了一些变量。虽然此解决方案确实修复了功能,但现在放大了背景图像。虽然不完美,但此功能确实修复了我发布的最初问题。
(function($){
$(document).ready(function(){
$('#sections').on('click', '.back-to-top', scrollToTop);
$('#jump-menu li').click(scrollToAnchor);
$('.parallax-window').parallax({imageSrc: '../images/background.png'});
});
function scrollToTop(event){
event.preventDefault();
$('html, body').animate({
scrollTop: 0
}, 500);
}
function scrollToAnchor(event){
event.preventDefault();
var target = $(this).attr('rel');
var offset = $(target).offset();
$('html, body').animate({
scrollTop: offset.top - 270
}, 500);
}
/* PARALLAX functionality*/
function parallaxBackground (){
var parallaxWidth = Math.max($(window).width() * 1, 1 ) | 0;
$('.parallax-window').width(parallaxWidth);
}
parallaxBackground();
})(jQuery);