0
我敢JavaScript新手,我試圖重新創建此代碼在這裏:JavaScript的 - 意外標記錯誤
的影響: http://www.clicktorelease.com/code/css3dclouds/
教程: http://www.clicktorelease.com/tutorials/css3dclouds/#creating_a_world_and_a_camera
未捕獲的SyntaxError :意外的標識
由於某種原因,我的第25行有些問題,而且我不確定wh它是:
/*
Clears the DOM of previous clouds bases
and generates a new set of cloud bases
*/
function generate() {
objects = [];
layers = [];
if (world.hasChildNodes()) {
while (world.childNodes.length >= 1) {
world.removeChild(world.firstChild);
}
}
for(var j = 0; j <; 5; j++) {
objects.push(createCloud());
}
}
完整的JavaScript:
(function() {
window.onload = function() {
/*
objects is an array of cloud bases
layers is an array of cloud layers
*/
var objects = [],
layers = [];
/*
Clears the DOM of previous clouds bases
and generates a new set of cloud bases
*/
function generate() {
objects = [];
layers = [];
if (world.hasChildNodes()) {
while (world.childNodes.length >= 1) {
world.removeChild(world.firstChild);
}
}
for(var j = 0; j <; 5; j++) {
objects.push(createCloud());
}
}
/*
Creates a single cloud base and adds several cloud layers.
Each cloud layer has random position (x, y, z), rotation (a)
and rotation speed (s). layers[] keeps track of those divs.
*/
function createCloud() {
var div = document.createElement('div' );
div.className = 'cloudBase';
var t = 'translateX(' + random_x + 'px) \
translateY(' + random_y + 'px) \
translateZ(' + random_z + 'px)';
div.style.transform = t;
world.appendChild(div);
for(var j = 0; j < 5 + Math.round(Math.random() * 10); j++) {
var cloud = document.createElement('div');
cloud.className = 'cloudLayer';
cloud.data = {
x: random_x,
y: random_y,
z: random_z,
a: random_a,
s: random_s
};
var t = 'translateX(' + random_x + 'px) \
translateY(' + random_y + 'px) \
translateZ(' + random_z + 'px) \
rotateZ(' + random_a + 'deg) \
scale(' + random_s + ')';
cloud.style.transform = t;
div.appendChild(cloud);
layers.push(cloud);
}
return div;
}
/*
Iterate layers[], update the rotation and apply the
inverse transformation currently applied to the world.
Notice the order in which rotations are applied.
*/
function update(){
for(var j = 0; j < layers.length; j++) {
var layer = layers[ j ];
layer.data.a += layer.data.speed;
var t = 'translateX(' + layer.data.x + 'px) \
translateY(' + layer.data.y + 'px) \
translateZ(' + layer.data.z + 'px) \
rotateY(' + (- worldYAngle) + 'deg) \
rotateX(' + (- worldXAngle) + 'deg) \
scale(' + layer.data.s + ')';
layer.style.transform = t;
}
requestAnimationFrame(update);
}
}; //-window.onload
}());
啊謝謝原來如此! –