为什么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 = function（）{/ *开始动画* / 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控制台中查找并检查错误。