我对 jQuery 和 javascript 代码有疑问；当我在 </head> 之间写下这个 jQuery 时和 <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>印度 html。
然后我在bubbles.js中加入如下代码后，就可以运行了。
window.onload = function(event) {
bubbleResize();
}
我想知道是否有人可以对此提出更明智的解决方案？谢谢。
最佳答案
如其他答案所述，<script>标签应该是 </body> 之前的最后一件事标签。 See this question.
标签放置位置的问题是 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>
关于javascript - 同一页面上的 jQuery 和 javascript 代码不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13418993/