Question

我想滚动背景图像直到结束像素，然后返回到图像的开头。我想不断重复这个序列。

我有一个代码，但它会在一个方向上连续滚动背景图像。

如何更改此代码才能正常工作？

CSS：

body{margin:0; border:0; background:url(ejemplo3.jpg) repeat-x;}

HTML：

<body></body>

JQuery的：

var scrollSpeed = 50;

// set the default position
var current = 0;

// set the direction
var direction = 'h';

function bgscroll() {
    // 1 pixel row at a time
    current -= 1;

    // move the background with backgrond-position css properties
    $('body').css("backgroundPosition", (direction == 'h') ? current + "px 0" : "0 " + current + "px");
}

//Calls the scrolling function repeatedly
setInterval(bgscroll, scrollSpeed);

Answer 1

取决于我是否了解您的需要和图像的高度;尝试使用'background-repeat y'并且不要在CSS中修复背景图像。这应该允许您在视图中滚动图像

Answer 2

你的意思是这样优雅：http://jsfiddle.net/NicoO/fMHL4/ 我肯定喜欢在这样的页面上阅读;）

@keyframes move-body-bg
{
    0% { background-position:left top; }
    50% { background-position:left bottom; }
    100% { background-position:left top; }
}

html,body
{
    margin: 0;
    padding: 0;
    height: 100%;
    background-image: url(http://www.placehold.it/800x2000);
    transition-property: background-position;

    -webkit-animation: move-body-bg 2s infinite; 
    -moz-animation:    move-body-bg 2s infinite; 
    -o-animation:      move-body-bg 2s infinite; 
    animation:         move-body-bg 2s infinite; 
}

Answer 3

当你有背景repeat-x然后它会进入一个循环因此你会看到图像只在一个方向旋转。但如果您将图像设置为不重复，则可以修改代码，如下所示：

/ *添加背景图片（确定您的图片）* /

body{margin:0; border:0; background:url(dsc01549.jpg) no-repeat;}

/ *添加脚本* /

// Global Variables

var scrollSpeed = 50;
// set the default position
var current = 0;
// image height & rotation complete
var _ht,_finishNRot=false;
// set the direction
var direction = 'h';
// create hidden image element to grab height of it for calculation purpose
var url = $('body').css('background-image').replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
var bgImage = $('<img />');
bgImage.hide().bind('load', function(){ _ht = $(this).height(); });
$('body').append(bgImage);
bgImage.attr('src', url);

function bgscroll() {
// while rotation not completed 
if(_finishNRot==false){ current -= 1;} else {current+=1; } ;
// -ve Rotation completed
if(-(current)==_ht)_finishNRot = true;
// +ve Rotation completed
if((current)==0)_finishNRot = false;
// move the background with backgrond-position css properties
$('body').css("backgroundPosition", (direction == 'h') ? current + "px 0" : "0 " + current + "px");
}

//Calls the scrolling function repeatedly
setInterval(bgscroll, scrollSpeed);

希望这会对你有所帮助。

干杯，阿肖克

滚动背景图像

3 个答案: