同一页面上的jQuery和javascript代码不起作用

Question

同一页面上的jQuery和javascript代码不起作用

我有关于jQuery和javascript代码的问题; 当我在下面</head>和之间写下这个jQuery时<body>

<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function(){
        $j('#page_effect').fadeIn(3000);
    });
</script>

Run Code Online (Sandbox Code Playgroud)

然后在body标签中编写javascript代码

<script src="bubbles.js"></script>
<script type="text/javascript">
    bubblesMain(new Object({
        type : 'linear',
        minSpeed : 100,
        maxSpeed : 400,
        minSize : 30,
        maxSize : 55,
        num : 100,
        colors : new Array('#FF0000','#FFFFFF','#FFCC99', '#FF33CC')
    }));
</script>

Run Code Online (Sandbox Code Playgroud)

然后jQuery代码可以工作,但JavaScript代码不起作用.最后我发现当我在第一次加载后调整浏览器大小时,可以运行.

bubble.js是自动创建一个canvas元素,然后在canvas中使用动画引发一些气泡.

部分代码如下:

function bubblesMain(obj){
    bubbleResize();
    bubbles = new bubbleObject(obj);
    bubbles.createBubbles();
    setInterval(start,1000/60);
};

//WHEN WINDOW HEIGHT IS CHANGED, REMAKE THE CANVAS ELEMENT
window.onresize = function(event) {
    bubbleResize();
}

function bubbleResize(){
    var height = parseInt(document.getElementById("canvasBubbles").clientHeight);
    var width = parseInt(document.getElementById("canvasBubbles").clientWidth);
    document.getElementById("canvasBubbles").innerHTML = '<canvas id="canvas" width="'+width+'px" height="'+height+'px"></canvas>';
}

function start(){

    var canvas = document.getElementById("canvas");
    canvas.width = canvas.width;
    bubbles.move();
    bubbles.draw();
};

Run Code Online (Sandbox Code Playgroud)

我有一个<div id="canvasBubbles"></div>明确的HTML.

然后我将以下代码添加到bubbles.js后,就可以运行了.

window.onload = function(event) {
    bubbleResize();
}

Run Code Online (Sandbox Code Playgroud)

我想知道是否有人可以为此提出更智能的解决方案？谢谢.

Answer 1

g.a*_*ata 0

你可以把所有这些写在里面<body>...</body>或里面，不能在和标签<head> ... </head> 之间工作（也许适用于一些不太正式的浏览器，比如旧的 IE）。</body><head>

归档时间：	13 年，1 月前
查看次数：	1667 次
最近记录：	13 年前