Bu kod yeniden hizalanabilir mi?

Question

Düşen bir petal etkisi için bu kodu kullanıyorum. Orijinal kod benim değil, kodlama hakkında bir şey bilmiyorum, belki de resim gibi birkaç şeyi nasıl değiştirebileceğimi (kodun bu sürümü ile yaptığım gibi), fakat düştüğümüzü yapıp yapamayacağımı merak ediyorum. sayfanın sadece sol tarafında.

Bu türden bir şey için son derece bilgisizim, bir cevap aramayı denedim ama sorusunu sormak için bile emin değilim, bu yüzden benim en iyi umudum, birisinin ne yapacağımı anlamasıdır ' Cevap arıyorum ve cevaplayabiliyorum. Bununla biraz oynamıştım, ama düşme hızını nasıl değiştireceğimi anlamaktan başka, bunu sadece işe yaramayacak mıyım bilmiyorum. Biraz korktum, tamamen yeniden yazılmalı, ama şimdilik, herhangi bir yardım takdir edilecektir. (Orijinal kod hala kredilendirilmiş ve geldiği öğretici blogun orijinaline geri dönüyor, bu soruyla alakalı olmadığı için kaldırmıştım, ancak gerekenin ne olursa olsun bunu sağlayabilir).

<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="https://2.bp.blogspot.com/-LVX2LSAy4zM/VuyuSSQGKoI/AAAAAAAAAHk/0xFc8xRWzh8rUrbWaxkLaXFiSM6D46fiA/s1600/imageedit_2_9597694661.png";image_urls['rain2']="https://2.bp.blogspot.com/-LVX2LSAy4zM/VuyuSSQGKoI/AAAAAAAAAHk/0xFc8xRWzh8rUrbWaxkLaXFiSM6D46fiA/s1600/imageedit_2_9597694661.png";image_urls['rain3']="https://2.bp.blogspot.com/-LVX2LSAy4zM/VuyuSSQGKoI/AAAAAAAAAHk/0xFc8xRWzh8rUrbWaxkLaXFiSM6D46fiA/s1600/imageedit_2_9597694661.png";image_urls['rain4']="https://2.bp.blogspot.com/-LVX2LSAy4zM/VuyuSSQGKoI/AAAAAAAAAHk/0xFc8xRWzh8rUrbWaxkLaXFiSM6D46fiA/s1600/imageedit_2_9597694661.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv') 
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)]) 
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script> 

Answer 1

Her şeyden önce, sen kodun yazarı kontrol etmelidir . Size probleminizin çözümünü bile verebilir.

---

setTimeout() çağrısı içinde left: e(0, c/2) + 'px' değiştirin left: e(0,c) + 'px'.
e, bir random(startRange, endRange) işlevidir ve c pencerenin uzunluğudur, bu nedenle pencerenin solundaki olası konumları yarıya düşürerek, yağmur damlasının görülebildiği gibi, bunları ekranın sol yarısına etkin bir şekilde kısıtlarız.

İşte bir fiddle illustrating the change. Ben rahatsız değil

Not c için diğer iki referanslar kontrol etmek olabileceğini olduğunu tüm senaryoyu anlamak ve (eski tarayıcılar uyumluluk için belki?):

• büyüklüğü rainDiv, c - 20 px'dir. Bu, muhtemelen son tarayıcılarda veya
• numaralı telefonlarda önemli değildir. For döngüsü, komut dosyasının başlangıcında yağmur damlaları oluşturması gibi görünüyor, ancak hiçbir şeyi değiştirmediğini görmedim. Ayrıca rasgele bir e(0, c) kullanır.

Answer 2

beautifier ile bu kod http://jsbeautifier.org/

Örnek deneyin: o insanlar değiştirerek ve onun kodunu yeniden için sorun olmadığını

<script> 
if (typeof jQuery == 'undefined') { 
    document.write('<' + 'script'); 
    document.write(' language="javascript"'); 
    document.write(' type="text/javascript"'); 
    document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">'); 
    document.write('</' + 'script' + '>') 
} 
</script> 

<script> 
if (!image_urls) { 
    var image_urls = Array() 
} 
if (!flash_urls) { 
    var flash_urls = Array() 
} 
image_urls['rain1'] = "https://2.bp.blogspot.com/-LVX2LSAy4zM/VuyuSSQGKoI/AAAAAAAAAHk/0xFc8xRWzh8rUrbWaxkLaXFiSM6D46fiA/s1600/imageedit_2_9597694661.png"; 
image_urls['rain2'] = "https://2.bp.blogspot.com/-LVX2LSAy4zM/VuyuSSQGKoI/AAAAAAAAAHk/0xFc8xRWzh8rUrbWaxkLaXFiSM6D46fiA/s1600/imageedit_2_9597694661.png"; 
image_urls['rain3'] = "https://2.bp.blogspot.com/-LVX2LSAy4zM/VuyuSSQGKoI/AAAAAAAAAHk/0xFc8xRWzh8rUrbWaxkLaXFiSM6D46fiA/s1600/imageedit_2_9597694661.png"; 
image_urls['rain4'] = "https://2.bp.blogspot.com/-LVX2LSAy4zM/VuyuSSQGKoI/AAAAAAAAAHk/0xFc8xRWzh8rUrbWaxkLaXFiSM6D46fiA/s1600/imageedit_2_9597694661.png"; 
$(document).ready(function() { 
    var c = $(window).width(); 
    var d = $(window).height(); 
    var e = function(a, b) { 
     return Math.round(a + (Math.random() * (b - a))) 
    }; 
    var f = function(a) { 
     setTimeout(function() { 
      a.css({ 
       left: e(0, c) + 'px', 
       top: '-30px', 
       display: 'block', 
       opacity: '0.' + e(10, 100) 
      }).animate({ 
       top: (d - 10) + 'px' 
      }, e(7500, 8000), function() { 
       $(this).fadeOut('slow', function() { 
        f(a) 
       }) 
      }) 
     }, e(1, 8000)) 
    }; 
    $('<div></div>').attr('id', 'rainDiv') 
     .css({ 
      position: 'fixed', 
      width: (c - 20) + 'px', 
      height: '1px', 
      left: '0px', 
      top: '-5px', 
      display: 'block' 
     }).appendTo('body'); 
    for (var i = 1; i <= 20; i++) { 
     var g = $('<img/>').attr('src', image_urls['rain' + e(1, 4)]) 
      .css({ 
       position: 'absolute', 
       left: e(0, c) + 'px', 
       top: '-30px', 
       display: 'block', 
       opacity: '0.' + e(10, 100), 
       'margin-left': 0 
      }).addClass('rainDrop').appendTo('#rainDiv'); 
     f(g); 
     g = null 
    }; 
    var h = 0; 
    var j = 0; 
    $(window).resize(function() { 
     c = $(window).width(); 
     d = $(window).height() 
    }) 
}); 
</script>