1

私は絶望的なJavaScriptの初心者であり、動的に作成された画像要素をDOMに挿入し、それらをランダムに配置および回転させようとしています。

現在、私は基本的にこれを行っています：

  1. すべての画像ファイルパスを含む配列を作成します
  2. 動的に作成された名前でdivを作成し、DOMに挿入します
  3. 画像の20の異なるインスタンスを生成し、対応するdivにDOMに挿入します
  4. 各画像をランダムな量だけ回転させ、各画像をランダムに配置します。ローテーションには、jQueryrotateプラグインを使用します。

私は最初に要素をDOMに挿入し、次にそれらの位置と回転を操作しているので、これらすべてを非常に愚かな方法で行っていると感じています。

最初に仮想メモリですべてを実行し、最後にすべての操作が完了したときに要素をDOMに挿入する方法はありますか？

これが私の現在のコードです（noobish品質で申し訳ありません）：

$(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
4

1 に答える 1

0

私はここで多くのことをカバーしようとしています...

予期しない,:

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))
}
于 2012-07-29T04:29:42.097 に答える