Question

我正在使用滚动背景图片的网站。当我转到网站上的另一个页面时，动画从头开始。有没有办法缓存这个位置，以便当我转到另一个页面时，动画从它停止的位置开始拾取？

这是我正在使用的代码

<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>

任何帮助或指示非常感谢

谢谢

Answer 1

您使用this jQuery cookie plugin。

用法

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

向$(window).unload事件添加事件监听器，然后设置Cookie背景位置，然后在$(window).load上获取Cookie并设置背景位置。

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

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

startAnimate();

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

1 个答案:

用法