6

我对 jQuery 和 javascript 代码有疑问；当我在下面写这个jQuery</head>时<body>

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

然后在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>

然后 jQuery 代码可以工作，但 javascript 代码不起作用。最后我发现当我第一次加载后调整浏览器大小时，运行是可以的。

bubble.js 是自动创建一个画布元素，然后在画布内引发一些带有动画的气泡。

部分代码如下：

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();
};

我有一个<div id="canvasBubbles"></div>indise html。

然后在我将以下代码添加到bubbles.js 之后，它就可以运行了。

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

我想知道是否有人可以为此提出更聪明的解决方案？谢谢你。

4

3 回答 3

1

如其他答案所述，<script>标签应该是标签之前的最后一件事</body>。看到这个问题。

放置标签的问题在于 HTML 页面的正文尚未加载，因此无法进行操作。window.onload和工作的原因window.onresize是因为它们稍后被调用，当文档的主体可用于使用 JS 操作时。

鉴于您的问题中提供的详细信息，您不需要该jQuery.noConflict()声明。

这是您的代码的替代版本，它应该做同样的事情，但效率更高。body将它放在元素的末尾，就在</body>标签之前。我没有测试它，因为我没有所需的所有脚本（气泡等）。

<!-- this goes at the end of your body element, just before the closing tag -->
<script type="text/javascript" src="bubbles.js"></script>
<script type="text/javascript">

    $.ready(function(){

        var canvasWrap,
            canvasElm,
            bubbles;

        init();

        setInterval(update, 1000/60);

        window.onresize = resize;

        $('#page_effect').fadeIn(3000);

        function init(){

            canvasWrap = document.getElementById("canvasBubbles");
            canvasElm = document.createElement('canvas');
            canvasElm.setAttribute('id', 'canvas');
            canvasElm.setAttribute('width', canvasWrap.clientWidth);
            canvasElm.setAttribute('height', canvasWrap.clientHeight);
            canvasWrap.appendChild(canvasElm);

            bubbles = new bubbleObject({
                type: 'linear',
                minSpeed: 100,
                maxSpeed: 400,
                minSize: 30,
                maxSize: 55,
                num: 100,
                colors: ['#FF0000','#FFFFFF','#FFCC99', '#FF33CC']
            });
            bubbles.createBubbles();
            update(); // you might not need this
        }

        function resize() {
            canvasElm.setAttribute('width', canvasWrap.clientWidth);
            canvasElm.setAttribute('height', canvasWrap.clientHeight);
        }

        function update(){
            // canvasElm.width = canvasElm.width; // is this a hack for something?
            bubbles.move();
            bubbles.draw();
        };

    });
</script>
于 2012-12-10T04:22:41.163 回答
0

You can write all this inside <body>...</body> or inside <head> ... </head> NOT works between </body> and <head> tag (maybe works for some less formal browser like old IE).

于 2012-11-16T15:38:36.360 回答
0

脚本标签应始终位于页面底部的标签之前，除非出于某种原因需要在此之前执行代码。

据我所知，仅当您在同一页面上使用两个都使用美元符号的不同库（即 jQuery 和 MooTools）时，才需要 jQuery noConflict() 方法。您可以使用 jQuery 和 vanilla javascript 而无需使用 noConflict 没有任何问题。

于 2012-12-06T00:48:08.793 回答