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

そして私は<div id="canvasBubbles"></div>indisise htmlを持っています。

次に、次のコードを bubble.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

このすべてを内部<body>...</body>または内部に書き込むことができます。とタグ<head> ... </head> の間では機能しません（古いIEのようなあまり正式ではないブラウザでも機能する可能性があります）。</body><head>

于 2012-11-16T15:38:36.360 に答える
0

スクリプト タグは、何らかの理由でその前にコードを実行する必要がない限り、常にページの一番下のタグの直前に配置する必要があります。

私の知る限り、jQuery の noConflict() メソッドは、ドル記号を使用する 2 つの異なるライブラリ (別名 jQuery と MooTools) を同じページで使用している場合にのみ必要です。noConflict を使わなくても、jQuery とバニラ JavaScript を問題なく使用できます。

于 2012-12-06T00:48:08.793 に答える