我是一个无可救药的 javascript 新手,我正在尝试将动态创建的图像元素插入到 DOM 中,同时随机定位和旋转它们。
目前我基本上是这样做的:
- 创建一个包含所有图像文件路径的数组
- 使用动态创建的名称创建一个 div 并插入到 DOM
- 生成 20 个不同的图像实例并插入到 DOM 中相应的 div
- 将每个图像旋转随机量并随机放置每个图像。对于旋转,我使用 jQuery 旋转插件。
我有一种感觉,我正在以一种非常愚蠢的方式做这一切,因为我首先将元素插入到 DOM 中,然后操纵它们的位置和旋转。
有没有办法首先在虚拟内存中完成所有操作,最后在所有操作完成后将元素插入到 DOM 中?
这是我当前的代码(抱歉,菜鸟质量):
$(document).ready(function(){
var wrapper = $('#wrapper'),
function movieCreator(movieName, generateAmount){
var contents=new Array (
'<img class="film '+movieName+'" src="images/'+movieName+'01.png" alt="'+movieName+'" />',
'<img class="film '+movieName+'" src="images/'+movieName+'02.png" alt="'+movieName+'" />',
'<img class="film '+movieName+'" src="images/'+movieName+'03.png" alt="'+movieName+'" />',
'<img class="film '+movieName+'" src="images/'+movieName+'04.png" alt="'+movieName+'" />',
'<img class="film '+movieName+'" src="images/'+movieName+'05.png" alt="'+movieName+'" />',
'<img class="film '+movieName+'" src="images/'+movieName+'06.png" alt="'+movieName+'" />',
'<img class="film '+movieName+'" src="images/'+movieName+'07.png" alt="'+movieName+'" />'
);
var tmp='';
var dynamicIdName = 'box'+movieName;
var dynamicIdCall = '#box'+movieName;
wrapper.append("<div id='"+dynamicIdName+"' class='moviebox'></div>");
var random
for (i=0; i < generateAmount;){
random = Math.floor(Math.random()*contents.length);
tmp += contents[random];
i++
};
$(dynamicIdCall).append(tmp);
$(".film").each(function(){
randomrot = Math.floor(Math.random()*360);
randomposX = Math.floor(Math.random()*200);
randomposY = Math.floor(Math.random()*200);
$(this).rotate(randomrot);
$(this).css({'top': randomposY -40});
$(this).css({'left': randomposX -40});
});
wrapper.on('click','.film',function(){
imageControl(this);
});
} //end movieCreator
movieCreator('terminator', 20);
movieCreator('rambo', 20);
movieCreator('godfather', 20);
movieCreator('matrix', 20);
movieCreator('kingkong', 20);
}); //dom ready
最佳答案
我试图在这里涵盖很多内容......
您有一个意外的,
:
var wrapper = $('#wrapper'),
---^
您可以使用[]
代替new Array()
:
var contents = [ ... ]
小心,i
是全局的,请使用var
。另外,您可以将 i++
移至 for
循环:
for (var i = 0; i < generateAmount; i++){
---^--- ---^---
这些是初学者常见的错误。首先尝试掌握这些概念,然后如果您想要最佳性能,请最后附加所有内容。然后您可以将所有内容重构为此,我评论了一些内容:
var $wrap = $('#wrapper')
var movieCreator = function (name, ammount) {
// Utility function to keep it DRY
var rand = function (len) {
return ~~(Math.random() * len) // ~~ trick Math.floor
}
// Cache your container in a variable
var $container = $('<div/>', {
id: 'box' + name,
'class': 'moviebox'
})
// Generate iamges with an array
// to keep it DRY
var imgs = []
for (var i = 0; i < 7; i++) {
imgs.push(
'<img ' +
'class="film '+ name +'"'+
'src="images/'+ name +'0'+ i + '.png"'+ // If no with more than 10...
'alt="'+ name +'"'+
'/>'
)
}
var randImgs = []
for (var i = 0; i < ammount; i++)
randImgs.push(imgs[rand(imgs.length)])
// Attach events before inserting in DOM
// that way you don't need delegation with on()
var $imgs = $(randImgs.join(''))
$imgs
.click(function(){
imageControl(this)
})
.each(function(){
var rot = rand(360),
posX = rand(200),
posY = rand(200)
$(this)
.css({
top: posY - 40 + 'px', // use units (px, em)
left: posX - 40 + 'px'
})
.rotate(rot)
})
// Finally insert in DOM. It already has
// all events attached and position changed
$wrap.append($container.append($imgs))
}
关于javascript - 在附加之前修改元素位置和旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11706457/