为什么不能将javascript链接到我的html？

Question

我想要在我的网页上移动某些背景图片，所以我将我的java脚本保存在我的html所在的文件中。它是标题script.js。

下面是它看起来像在我的HTML的主体部分：

<div id="oneCloud" style="background-position: 441.6px 0%;"></div> 
<div id="twoClouds" style="background-position: 1029.7px 0%;"></div> 
<div id="blurryCloud" style="background-position: 2942px 0px;"></div> 
<span id="scriptContainer"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
    <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script> 
    <script src="js/plugins.js"></script> 
    <script src="script.js"></script> 

下面是它看起来像Java脚本文件： 的window.onload =函数（）{ /*开始动画*/ animateBgElements（）;

/* Load slow scripts after page load */ 
    $('#scriptContainer').html('<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>'); 

    /* Fade in grass for mobile devices */ 
    if('#grass:hidden') { 
     $('#grass').delay(600).fadeIn('slow'); 
    } 
} /* End onLoad() */ 

$(function() { 
    var url =location.href; 

    /* Add magnify glass */ 
    $('.thumbnails a').append('<span class="zoom"></span>'); 

    /* Auto year */ 
    $('#year').html(new Date().getFullYear()); 

    /* Yox viewer setup */ 
     $('.thumbnails').yoxview({ 
      onOpen: function() { 
       $('#oneCloud, #twoClouds, #blurryCloud, #grass, #trees').spStop(); 
      }, 
       backgroundColor: '#47ADE3', 
       backgroundOpacity: 0.9, 
       infoBackColor: '#000', 
       infoBackOpacity: .9, 
       allowInternalLinks: true, 
       autoHideInfo: false, 
       autoPlay: false, 
       onClose: function(){ 
        $('#oneCloud, #twoClouds, #blurryCloud, #grass, #trees').spStart(); 
      }, 
     }); 

    /* Scroll back to top 
    $('.backToTop').click(function(){ 
     rocketLaunch(); 
    }); 

    function rocketLaunch() { 
     $('html, body').animate({scrollTop:0}, 1600); 
    } 
    */ 
    /* Toggle BTT arrow color *//* Random Colors! 
    $('.backToTop').hover(function() { 
     var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; 
     $('.backToTop h2').animate({ color: hue, color: hue }, 1000); 
    }, function() { 
     $('.backToTop h2').css({'color' : '#47ADE3'}); 
    }); 
*/ 
    /* Navigation */ 
    if($('.mainNav').hasClass('children')) { 
     $('#portfolio').addClass('active, activeMenu'); 
     $('#home').removeClass('active, activeMenu'); 
    } 
    $('.webLink').live('click', function() { 
     $('#web').addClass('active'); 
    }); 
    // Parents 
    $('.topLevel li').click(function() { 
     if ($(this).hasClass('active')) { 
     } 
     else { 
      $('.topLevels li').removeClass('active'); 
      $(this).addClass('active'); 
     } 
    }); 
    // Check to see if the link is the current one   
    $('.topLevel li a').click(function() {    
     if ($(this).parent().hasClass('active')) { 
     } 
     else { 
      $('.topLevel li').removeClass('active'); 
      $(this).parent().addClass('active'); 
     } 
    }); 

    $('#siteLogo').click(function() { 
     $('.topLevel li').removeClass('active activeMenu'); 
     $('.topLevel #home').addClass('active activeMenu'); 
    }); 
     if(url.indexOf('#web') > -1) { 
      $('.topLevel li').removeClass('active activeMenu'); 
      $('.topLevel #web').addClass('active activeMenu'); 
     } 
     else if(url.indexOf('#photo') > -1) { 
      $('.topLevel li').removeClass('active activeMenu'); 
      $('.topLevel #photo').addClass('active activeMenu');   
     } 
     else if(url.indexOf('#paint') > -1) { 
      $('.topLevel li').removeClass('active activeMenu'); 
      $('.topLevel #paint').addClass('active activeMenu');  
     } 
     else if(url.indexOf('#contact') > -1) { 
      $('.topLevel li').removeClass('active activeMenu'); 
      $('.topLevel #contactLink').addClass('active activeMenu'); 
     }  
     else if(url.indexOf('#thankyou') > -1) { 
      $('.topLevel li').removeClass('active activeMenu'); 
      $('.topLevel #contactLink').addClass('active activeMenu'); 
     } 
}); 

function animateBgElements(){ 
    $('#oneCloud').pan({fps: 20, speed: 0.3, dir: 'right', depth:105}); 
    $('#blurryCloud').pan({fps: 20, speed: 2, dir: 'right', depth:125}); 
    $('#twoClouds').pan({fps: 20, speed: 0.7, dir: 'right', depth:15}); 
    $('#grass').pan({fps: 30, speed: 0.3, dir: 'left', depth:105}); 
    $('#trees').pan({fps: 20, speed: 0.3, dir: 'right', depth:105}); 
} 

Answer 1

我认为你的JavaScript代码是有问题的地方，这就是为什么它不适用。

您执行animateBgElements()，但它看起来像这个函数没有定义。

无论如何，你应该看看Javascript控制台并检查错误。