Javascript 图像不移动

我已经做了一个网页，其中有一个移动图像的背景。 1.IE和Opera只是显示图像而不是移动图像。字体也不起作用 2.Chrome和Safari也不会移动图像，但字体显示正确 3.Firefox会根据需要移动图像，但不会显示字体

您可以在此处查看网站：

编辑的CSS代码如下所示：

/*-----------------------------------------------------------------------
@FONT-FACE
------------------------------------------------------------------------*/
@font-face {
    font-family: 'ChunkFive-Roman';
    src: url('../fonts/Chunkfive-roman-webfont.eot');
    src: url('../fonts/Chunkfive-roman-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Chunkfive-roman-webfont.woff') format('woff'),
         url('../fonts/chunkfive-roman-webfont.ttf') format('truetype'),
         url('../fonts/chunkfive-roman-webfont.svg#ChunkFiveRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BloklettersBalpen';
    src: url('../fonts/blokletters-balpen-webfont.eot');
    src: url('../fonts/blokletters-balpen-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/blokletters-balpen-webfont.woff') format('woff'),
         url('../fonts/blokletters-balpen-webfont.ttf') format('truetype'),
         url('../fonts/blokletters-balpen-webfont.svg#BloklettersBalpen') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*-----------------------------------------------------------------------
LETTERING SPECIFIC STYLES
------------------------------------------------------------------------*/
/* Logo H1 Text */
#logo .word1 {
    margin-left: 3px;
}

#logo .word1 span {
    display: inline-block;
    position: relative;
    letter-spacing: 0;
    transition: width 0.2s;
}

#logo span:hover {
    top: 4px;
}

/*-----------------------------------------------------------------------
DEFAULTS
------------------------------------------------------------------------*/
body {
    color: #000;
    background: #c1b69a url(../images/texture.jpg);
}

a {
    color: #000;
    text-decoration: none;
    outline: none;
}

h1 {
    font-family: 'ChunkFive-Roman', sans-serif;
    color: #1e1e1e;
    font-size: 60px;
    font-weight: 500;
    line-height: 1;
    text-transform: none;
}

h2 {
    font-family: 'ChunkFive-Roman', sans-serif;
    color: #1e1e1e;
    font-size: 114px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: #62b445 1px 1px 0, #62b445 2px 2px 0, #62b445 3px 3px 0, #45a5f6 4px 4px 0, #45a5f6 5px 5px 0, 5px 8px 10px rgba(0,0,0,.35);
}

h3 {
    font-size: 46px;
    font-weight: bold;
    line-height: 1.5;
    color: #262626;
}

h4 {
    font-family: 'ChunkFive-Roman', sans-serif;
    font-size: 26px;
    color: #262626;
    margin-bottom: 20px;
    font-style: normal;
    text-transform: uppercase;
}

.written {
    font-family: 'BloklettersBalpen',sans-serif;
    font-size: 18px;
    color: #000;
}

.written-small {
    font-family: 'BloklettersBalpen', sans-serif;
    font-size: 14px;
    color: #000;
}

p {
    font-size: 20px;
    color: #000;
}

/* About Page Definitions Area */
.col-def-plus p,.col-def-equals p {
    font-size: 80px;
    font-weight: 800;
}

.col-def p {
    font-size: 18px;
}

div.col-def p.word-break {
    font-size: 28px;
    font-weight: 900;
    color: #000;
}

div.col-def p.word-def {
    font-size: 14px;
    line-height: 1.7;
    margin-top: 12px;
    font-style: italic;
    color: #333;
}

#shareTab {
    font-family: 'ChunkFive-Roman', sans-serif;
}

/*-----------------------------------------------------------------------
COMMON CLASSES
------------------------------------------------------------------------*/
.clear {
    clear: both;
}

.wrap {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}

.fr {
    float: right;
}

.fl {
    float: left;
}

.ac {
    text-align: center;
}

.line-through {
    text-decoration: line-through;
}

.underline {
    text-decoration: underline;
}

/*-----------------------------------------------------------------------
FLOATING BACKGROUND IMAGES
------------------------------------------------------------------------*/
#clouds {
    z-index: -1;
    background: url(../images/clouds.png);
    position: absolute;
    width: 100%;
    height: 736px;
    display: block;
}

@keyframes "float-clouds" {
 0% {
    background-position: 2400px 0;
 }
 100% {
    background-position: 0 0;
 }

}

@-moz-keyframes float-clouds {
 0% {
   background-position: 2400px 0;
 }
 100% {
   background-position: 0 0;
 }

}

@-webkit-keyframes "float-clouds" {
 0% {
   background-position: 2400px 0;
 }
 100% {
   background-position: 0 0;
 }

}

@-ms-keyframes "float-clouds" {
 0% {
   background-position: 2400px 0;
 }
 100% {
   background-position: 0 0;
 }

}

@-o-keyframes "float-clouds" {
 0% {
   background-position: 2400px 0;
 }
 100% {
   background-position: 0 0;
 }

}

#clouds {
    animation-name: float-clouds;
    -webkit-animation-duration: 95s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-duration: 95s;
    -o-animation-duration: 95s;
    -ms--animation-duration: 95s;
}

我如何更正这里的所有内容，以便它在所有浏览器中都能正常工作

以下是图像移动的JS代码：

       $(document).ready(function() {
  $("#logo h1, .nav-here-home, .nav-here-about, .home-page-tag h3, .about-page-tag h3, .written").lettering('words').children('span').lettering(); 
  $(".home-intro h2").fitText(.86); 
  $(".about-intro h2").fitText(.86);  

});        


// --------------------------------------------------- //
//             Background Image Floating               //
// --------------------------------------------------- //
$(document).ready(function() {
    if (!$.browser.webkit){
        var clouds = $('#clouds');
        var background = 0;
        setInterval(function(){
            background -= 2;
            if (background == 1200) background = 0;
            clouds.css('background-position', background)
        }, 95)
    }
}) 

---

我现在应该在哪里编辑它呢？

看看jQuery.animate——它可以制作动画，但使用javascript而不是css3，css3的animate并不完全受支持，因为它还是相当新的。

我创造了一个新的世界

---

我希望这就是你想要的。尽管您需要根据需要进行一些调整。

您可以将发布的CSS裁剪为只包含相关部分吗？当然可以。请给我一分钟。如果您使用CSS动画，还记得它是css3最不受支持的功能之一吗？razor:那我现在该怎么办？@sanketbode对于不支持它的浏览器，你应该使用css动画和Javascript回调只是一个小问题。。本网站是否使用.animate feautre？它使用了jquery api的动画功能，这也是一个很好的方法。请帮助…我现在把代码放在哪里？我不确定是否可以旋转整个背景，但是我们可以轻松地切换它们…我正在尝试一个解决方案…几分钟后将发布它。你将javascript代码放在服务器上的js文件中，就像放在css文件中一样，或者嵌入到文档的头部，您是否已经计算出动画命令需要使用什么来获得所需的效果？谢谢您提供的信息。我一定会尝试。但是如何在此处添加图像。。他们没有提供任何选择。。！！嗯，我编辑了图像url，它接受了…但是任何特定的代码都可以帮助我移动图像吗？您可以查看该网站以获取参考。。！！不是这样，但是你可以给div块一个背景云图，并调整屏幕上的位置。这可能就是它所做的。好吧……还有，猜猜为什么字体没有被破坏？

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
      $('#clouds').animate({
          'background-position-x': '2400px',
          'background-position-y': '0'
      }, 95*1000, 'linear');
    });
    setInterval(function(){
      $('#clouds').animate({
        'background-position-x': '2400px',
        'background-position-y': '0'
      }, 95*1000, 'linear');
    }, 95*1000);
</script>