缓存其他页面的背景滚动图像位置

cache background scrolling image position for other pages

本文关键字：滚动 图像 位置 背景 其他 缓存      更新时间：2023-09-26

我正在开发一个具有滚动背景图像的网站。当我转到网站上的另一个页面时，动画从开头开始。有没有办法缓存位置，以便当我转到另一个页面时，动画从中断的地方继续？

这是我正在使用的代码

<head>
<style>
body{
width:100%;
}
#pageWrap{
width:100%;
position:absolute;
background:#96c7ec;
}
#contentTop{
width:100%;
height:545px;
background:url('../img/bbClouds.png') repeat-x;
border-bottom:5px solid #41260c;
}
</style>
</head>
<body>
<div id="pageWrap">
<div id="contentTop"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var scrollSpeed = 70;       // Speed in milliseconds
var step = 1;               // How many pixels to move per step
var current = 0;            // The current pixel row
var imageWidth = 1500;     // Background image width
var headerWidth = 1500;     // How wide the header is.
//The pixel row where to start a new loop
var restartPosition = -(imageWidth - headerWidth);
function scrollBg(){
//Go to next pixel row.
current -= step;
//If at the end of the image, then go to the top.
if (current == restartPosition){
    current = 0;
}
//Set the CSS of the header.
$('#contentTop').css("background-position",+current+"px 0px");

}
//Calls the scrolling function repeatedly
var init = setInterval("scrollBg()", scrollSpeed);
</script>
</body>

任何帮助或指示非常感谢

谢谢

你使用这个jQuery cookie插件。

用法

  • 设置值：$.cookie('the_cookie', 'the_value');
  • 检索值：$.cookie('the_cookie');
向

$(window).unload事件添加一个事件侦听器，然后设置 cookie 背景位置，然后在 $(window).load 上获取 cookie 并设置背景位置。

作为旁注，我建议你使用内置在jQuery核心中的.animate：

var startAnimate = function() {
    $('#contentTop')
      .css('background-position', 0)
      .animate({ backgroundPosition: imageWidth },
              { duration: 3000, complete: startAnimate });
};
startAnimate();
相关文章：