Javascript 从左向右循环移动背景图像_Javascript_Css_Html_Background Image

Javascript 从左向右循环移动背景图像

javascript css html

Javascript 从左向右循环移动背景图像,javascript,css,html,background-image,Javascript,Css,Html,Background Image,我想有一个移动的背景图像在我的网页上从左到右完全相同的方式在下面的网站，请建议如何实现这一点感谢和问候使用一些js/jQuery： function move(){ var element = $('#selector'); element .css('background-position-x', (parseInt(element.css('background-position-x') - 10)); //Check if need to reset backgr

我想有一个移动的背景图像在我的网页上从左到右完全相同的方式在下面的网站，请建议如何实现这一点

感谢和问候

使用一些js/jQuery：

function move(){
    var element = $('#selector');
    element .css('background-position-x', (parseInt(element.css('background-position-x') - 10));
    //Check if need to reset background-position-x to origin.
}

我认为实现这一点最简单的方法是使用一点Javascript。您可以在此处找到用户使用的javascript作为示例：

但是，我敦促您不要简单地复制和粘贴，因为这可能不适合您。

您可以在HTML5中使用字幕标记。您可以在中看到示例。

很简单！只需使用一些简单的javascript

代码：

<html>
<head>
    <title>BackGround Slide</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
         // speed in milliseconds
         var scrollSpeed = 70;

         // 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);
    </script>
    <style type="text/css">
        body {
            background-image: url('http://kxip.in/images/mohalistadium.jpg');
        }
    </style>
</head>
<body>

</body>
</html>


背景幻灯片
//以毫秒为单位的速度
速度=70；
//设置默认位置
无功电流=0；
//确定方向
var方向='h'；
函数bgcroll（）{
//一次1像素行
电流-=1；
//使用backgrond position css属性移动背景
$（'body'）.css（“背景位置”，“方向='h'）？电流+“px 0”：“0”+电流+“px”）；
}
//反复调用滚动函数
设置间隔（“bgcroll（）”，滚动速度）；
身体{
背景图像：url（'http://kxip.in/images/mohalistadium.jpg');
}

这是一个有趣的问题，解决方案极具挑战性。谢天谢地，我是来帮你工作的

显然，您需要jQuery！所以，抓取一些jQuery，然后回来

回来？太好了

让我们开始吧。首先，在代码中添加以下行：

$(function(){

})

那么，这是什么神奇的东西？别担心你真的学会了！我们来这里是为了得到答案，不是为了学习！但是，如果你是一个好奇的人，打开一个新的标签，在stackoverflow.com上问下面的问题，“这是什么

$（function（）{}）

东西？”。有人会告诉你的！别忘了标记JQUERY

好的，我们要设置背景图像的动画。很难。当然，有很多方法可以做到这一点（HTML、CSS和JAVASCRIPT总是有不止一种方法可以做到这一点！），但我更喜欢JQuery方法。还记得顶部那个奇怪的美元符号吗？让我们回到那个问题上

$(function(){
    setInterval(function(){

    }, 500);
})

我们刚刚添加了一些程序！setInterval是一个计数器，它最多可计数500毫秒，然后在其中运行代码。为什么是500？我不知道，我只是喜欢。所以我们有一个计时器，我们需要更多的程序。我们如何添加背景

$(function(){
    setInterval(function(){
        $('body').css('background-position', '0 0');
    }, 500);
})

好了，现在我们有进展了！我们的jQuery现在实际上正在将背景位置设置为0，0。还没那么有趣。让我们看看是否能做得更多

$(function(){
    var x = 0;
    setInterval(function(){
        x-=1;
        $('body').css('background-position', '0 ' + x + 'px');
    }, 500);
})

让我们测试一下

哦，老兄。那张照片太大了，那只愚蠢的小猫正在往上爬！回到代码上来

$(function(){
    var x = 0;
    setInterval(function(){
        x-=1;
        $('body').css('background-position', x + 'px 0');
    }, 500);
})

啊，更像是这样！但是，老兄…太慢了。让我们升级它

$(function(){
    var x = 0;
    setInterval(function(){
        x-=1;
        $('body').css('background-position', x + 'px 0');
    }, 10);
})

哦，很快。我们现在有一些滚动的kittenz

JavaQuery

太棒了

但老实说，这张背景图片并没有起到应有的作用。是时候更新了

哦，是的，现在我们开始踢了

好了，就这样！做你想做的事情的很多方法中的一种

祝你好运。玩得开心。

这里有一个css解决方案：

body {
    background: url(http://kxip.in/images/mohalistadium.jpg) repeat;
    -webkit-animation: loader 16s steps(100) infinite;
    -moz-animation: loader 16s steps(100) infinite;
    -ms-animation: loader 16s steps(100) infinite;
    -o-animation: loader 16s steps(100) infinite;
    animation: loader 16s steps(100) infinite;
}

@-webkit-keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@-moz-keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@-ms-keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@-o-keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}

我的建议是学习css、html和javascript。点击

F12

，开始浏览那个网站。这是我见过的最好的答案。好极了！不使用请求动画帧事件的任何特定原因。当涉及到动画的东西是远远优于间隔和超时。一个伟大的动画框架是GreenSock，值得一看，。。你真是一个了不起的家伙。而且它甚至没有被标记为正确答案！css解决方案如何没有更多的投票权？顺便说一句，您示例中的图像已消失。

body {
    background: url(http://kxip.in/images/mohalistadium.jpg) repeat;
    -webkit-animation: loader 16s steps(100) infinite;
    -moz-animation: loader 16s steps(100) infinite;
    -ms-animation: loader 16s steps(100) infinite;
    -o-animation: loader 16s steps(100) infinite;
    animation: loader 16s steps(100) infinite;
}

@-webkit-keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@-moz-keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@-ms-keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@-o-keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}