我试图让一个透明的图像滚动在我的背景图像。我遵循了位于这里的教程：http://www.kudoswebsolutions.com/blog/jquery_scrolling_background/demos.html
我稍微修改了一下代码，因为我只需要滚动覆盖，而不是背景本身。目前，我可以看到我的叠加图像在背景图像之上，但它没有移动。
想象一下我的背景图像是葡萄酒，叠加图像是移动的气泡。
在原始教程中，背景是移动的，它与图像（气泡）重叠。我所做的改变是让覆盖层滚动而不是背景。即使我将值从$('#container').css("background-position", "50% " + offset + "px");更改为$('#overlay').css("background-position", "50% " + offset + "px");，图像也不会移动。我在. js文件中保留了所有其他内容。
此外，在教程中，覆盖div被封装在容器div中。正如您所看到的，我现在已经将body-div封装在我自己的HTML文件中的overlay-div中。此外，我还将CSS文件中覆盖层的位置更改为relative。
我的代码：
HTML页面：
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="resources/assets/styles.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
</head>
<body>
<div id="overlay">
<div class="body">
<div class="header">
...
</div>
</body>
</html>我的CSS文件：
body {
background-image: url("../images/background.jpg");
width: 1104px;
height: 976px;
display: block;
margin-left: auto;
margin-right: auto;
font-family: Verdana;
}
#overlay {
position:relative;
width:899px;
height:858px;
background:url("../images/overlay.png");
}我的JS文件：
$(function() {
// Define the height of your two background images.
//The image to scroll
var backgroundheight = 1000;
// Create a random offset for both images' starting positions
offset = Math.round(Math.floor(Math.random()* 2001));
function scrollbackground() {
//Ensure all bases are covered when defining the offset.
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// Put the background onto the required div and animate vertically
$('#overlay').css("background-position", "50% " + offset + "px");
// Enable the function to loop when it reaches the end of the image
setTimeout(function() {
scrollbackground();
}, 100
);
}
// Initiate the scroll
scrollbackground();
// Use the offset defined earlier and apply it to the div.
$('#overlay').css("background-position", "50% " + offset + "px");
});有人能看出我做错了什么吗？
1条答案
按热度按时间lymgl2op1#
我的链接到我的JavaScript资源错误。如果人们对这个概念的工作原理感兴趣，请查看我的Fiddle：http://jsfiddle.net/YuBpA/。原始教程来自http://www.kudoswebsolutions.com/blog/jquery_scrolling_background/demos.html，请务必在那里查看。