我使用Javascript和HTML5标记在Joomla模板中构建了一个可爱的(!)动画不同层上有7个透明云,它们在页面上移动时都在一个又一个的顶部移动。站点名称也是的一部分,因此云可以在其后面或前面移动,这取决于它们所在的层
你可以在那里亲眼看到:http://www.flunki.com
一切都在头版。但只要你点击链接(例如左边的博客),动画就会停止,我只有屏幕左边的一个静态云(有时是2个)。回到首页并不能解决这个问题,重新加载也不能。F5重新加载可解决此问题。
对我来说,这与缓存页面有关(Joomla中的缓存已关闭),但我没有找到解决问题的方法。
有人能帮忙吗?
这是代码,它是模板的一部分:
<script type="text/javascript">
var canvas;
var ctx;
var max;
var logopos;
var background;
var logo;
var width = 1300;
var height = 150;
var cloud1;
var cloud1_x;
var cloud1_y;
var cloud2;
var cloud2_x;
var cloud2_y;
var cloud3;
var cloud3_x;
var cloud3_y;
var cloud4;
var cloud4_x;
var cloud4_y;
var cloud5;
var cloud5_x;
var cloud5_y;
var cloud6;
var cloud6_x;
var cloud6_y;
var cloud7;
var cloud7_x;
var cloud7_y;
var cloud8;
var cloud8_x;
var cloud8_y;
var irun;
function init() {
canvas = document.getElementById("clouds");
width = window.innerWidth;
irun =+ 1;
height = canvas.height;
ctx = canvas.getContext("2d");
// init background
background = new Image();
background.src = 'http://www.flunki.com/templates/celebs_plazza/images/backblue.png';
// init logo
logo = new Image();
logo.src = 'http://www.flunki.com/templates/celebs_plazza/images/logo.png';
// init cloud1
cloud1 = new Image();
cloud1.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud40.png';
cloud1.onload = function(){
cloud1_x = 60;
cloud1_y = 5;
};
// init cloud3
cloud3 = new Image();
cloud3.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud50.png';
cloud3.onload = function(){
cloud3_x = max/2;
cloud3_y = 60;
};
// init cloud5
cloud5 = new Image();
cloud5.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud60.png';
cloud5.onload = function(){
cloud5_x = max-180;
cloud5_y = 35;
};
// init cloud7
cloud7 = new Image();
cloud7.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud70.png';
cloud7.onload = function(){
cloud7_x = 200;
cloud7_y = 75;
};
// init cloud2
cloud2 = new Image();
cloud2.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud60.png';
cloud2.onload = function(){
cloud2_x = max-100;
cloud2_y = 15;
};
// init cloud4
cloud4 = new Image();
cloud4.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud50.png';
cloud4.onload = function(){
cloud4_x = max-300;
cloud4_y = -15;
};
// init cloud6
cloud6 = new Image();
cloud6.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud70.png';
cloud6.onload = function(){
cloud6_x = max-560;
cloud6_y = 8;
};
// init cloud8
cloud8 = new Image();
cloud8.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud40.png';
cloud8.onload = function(){
cloud8_x = 0;
cloud8_y = 38;
};
return setInterval(main_loop, 10);
}
function update(){
max = window.innerWidth;
logopos = (640 + ((window.innerWidth-960)/2));
cloud1_x -= .05;
if (cloud1_x < -128) {
cloud1_x = max;
}
cloud3_x -= .2;
if (cloud3_x < -128) {
cloud3_x = max;
}
cloud5_x -= .15;
if (cloud5_x < -128) {
cloud5_x = max;
}
cloud7_x -= .1;
if (cloud7_x < -128) {
cloud7_x = max;
}
cloud2_x += .1;
if (cloud2_x>max ) {
cloud2_x = -128;
}
cloud4_x += .05;
if (cloud4_x>max ) {
cloud4_x = -128;
}
cloud6_x += .15;
if (cloud6_x>max ) {
cloud6_x = -128;
}
cloud8_x += .2;
if (cloud8_x>max ) {
cloud8_x = -128;
}
}
function draw() {
ctx.canvas.width = window.innerWidth-20;
ctx.drawImage(background,0,0);
ctx.drawImage(cloud1, cloud1_x, cloud1_y);
ctx.drawImage(cloud2, cloud2_x, cloud2_y);
ctx.drawImage(cloud3, cloud3_x, cloud3_y);
ctx.drawImage(cloud4, cloud4_x, cloud4_y);
ctx.drawImage(cloud5, cloud5_x, cloud5_y);
ctx.drawImage(cloud6, cloud6_x, cloud6_y);
ctx.drawImage(logo,logopos,0);
ctx.drawImage(cloud7, cloud7_x, cloud7_y);
// ctx.drawImage(cloud8, cloud8_x, cloud8_y);
}
function main_loop() {
draw();
update();
}
init();
</script>
1)在init()
中,您使用的是在函数update()
中定义的变量max
,该函数紧接着被调用。您应该在init()
函数之前或开始时定义max
。我真的不知道为什么这样做有时甚至会奏效。
2) max = window.innerWidth
window.innerWidth在<body>
解析后可用,并且在此之前激发脚本-有时(当缓存清除时)它有足够的时间加载所有必要的DOM内容并计算window.innerWidth
我看到你在使用mootools,这样你就可以避免把init()
函数放在DOMReady事件中
window.addEvent('domready', function() {
init();
});
3) 没有人回答你,因为你的代码一团糟,了解:
- 阵列
- 循环(用于)
好的,我终于找到了问题所在。
首先,我从模板中删除了代码,并为它创建了一个模块,这样每当用户点击菜单项时页面更新时,它就会加载。
这并没有解决问题。
然后我回到了我以前开始制作动画的网站,在我的模块中使用了他们的代码,它工作了一段时间,然后停止了。我仍然不知道为什么,但我用一个简单的HTML5画布动画替换了代码,它在首页的任何地方都能工作。那一定是我的代码。
我回去查看了一下,发现每次更新图像时(当所有图形都加载时),我都在使用window.innerWidth重新绘制徽标。它在第一次加载页面时确实起作用,但在随后的几次加载中没有起作用,正如rezoner所指出的,这让我发现了DOMReady的所有潜台词(谢谢你)。
下面的upstate代码反映了这一点,并且工作起来很有魅力。
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>flunkibanner</title>
</head>
<body>
<section>
<div>
<canvas id="clouds" width="100%" >
Your browser does not fully support HTML5.<BR>
Maybe it is time to upgrade ?
</canvas>
</div>
<script type="text/javascript">
var canvas;
var ctx;
var max;
var logopos;
var background;
var logo;
var width = 1300;
var height = 150;
var cloud1;
var cloud1_x;
var cloud1_y;
var cloud2;
var cloud2_x;
var cloud2_y;
var cloud3;
var cloud3_x;
var cloud3_y;
var cloud4;
var cloud4_x;
var cloud4_y;
var cloud5;
var cloud5_x;
var cloud5_y;
var cloud6;
var cloud6_x;
var cloud6_y;
var cloud7;
var cloud7_x;
var cloud7_y;
var cloud8;
var cloud8_x;
var cloud8_y;
function init() {
canvas = document.getElementById("clouds");
width = window.innerWidth;
max = window.innerWidth;
height = canvas.height;
ctx = canvas.getContext("2d");
ctx.canvas.width = window.innerWidth-20;
// init background
background = new Image();
background.src = 'http://www.flunki.com/templates/celebs_plazza/images/backblue.png';
// init logo
logo = new Image();
logo.src = 'http://www.flunki.com/templates/celebs_plazza/images/logo.png';
logopos = (640 + ((window.innerWidth-960)/2));
// init cloud1
cloud1 = new Image();
cloud1.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud40.png';
cloud1.onload = function(){
cloud1_x = 60;
cloud1_y = 5;
};
// init cloud3
cloud3 = new Image();
cloud3.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud50.png';
cloud3.onload = function(){
cloud3_x = max/2;
cloud3_y = 60;
};
// init cloud5
cloud5 = new Image();
cloud5.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud60.png';
cloud5.onload = function(){
cloud5_x = max-180;
cloud5_y = 35;
};
// init cloud7
cloud7 = new Image();
cloud7.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud70.png';
cloud7.onload = function(){
cloud7_x = 200;
cloud7_y = 75;
};
// init cloud2
cloud2 = new Image();
cloud2.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud60.png';
cloud2.onload = function(){
cloud2_x = max-100;
cloud2_y = 15;
};
// init cloud4
cloud4 = new Image();
cloud4.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud50.png';
cloud4.onload = function(){
cloud4_x = max-300;
cloud4_y = -15;
};
// init cloud6
cloud6 = new Image();
cloud6.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud70.png';
cloud6.onload = function(){
cloud6_x = max-560;
cloud6_y = 8;
};
// init cloud8
cloud8 = new Image();
cloud8.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud40.png';
cloud8.onload = function(){
cloud8_x = 0;
cloud8_y = 38;
};
return setInterval(main_loop, 10);
}
function update(){
cloud1_x -= .05;
if (cloud1_x < -128) {
cloud1_x = max;
}
cloud3_x -= .2;
if (cloud3_x < -128) {
cloud3_x = max;
}
cloud5_x -= .15;
if (cloud5_x < -128) {
cloud5_x = max;
}
cloud7_x -= .1;
if (cloud7_x < -128) {
cloud7_x = max;
}
cloud2_x += .1;
if (cloud2_x>max ) {
cloud2_x = -128;
}
cloud4_x += .05;
if (cloud4_x>max ) {
cloud4_x = -128;
}
cloud6_x += .15;
if (cloud6_x>max ) {
cloud6_x = -128;
}
cloud8_x += .2;
if (cloud8_x>max ) {
cloud8_x = -128;
}
}
function draw() {
ctx.drawImage(background,0,0);
ctx.drawImage(cloud1, cloud1_x, cloud1_y);
ctx.drawImage(cloud2, cloud2_x, cloud2_y);
ctx.drawImage(cloud3, cloud3_x, cloud3_y);
ctx.drawImage(cloud4, cloud4_x, cloud4_y);
ctx.drawImage(cloud5, cloud5_x, cloud5_y);
ctx.drawImage(cloud6, cloud6_x, cloud6_y);
ctx.drawImage(logo,logopos,0);
ctx.drawImage(cloud7, cloud7_x, cloud7_y);
// ctx.drawImage(cloud8, cloud8_x, cloud8_y);
}
function main_loop() {
draw();
update();
}
window.addEvent('domready', function() {
init();
});
</script>
</section>
</body>
</html>