这段代码可以重新排列吗?

时间:2016-03-21 19:29:48

标签: javascript

我有这个代码用于下降的花瓣效果。原始代码不是我的,我对编码除了如何改变像图像之类的一些东西之外一无所知(就像我对这个版本的代码所做的那样),但是我想知道它是否有可能让它看起来像是仅在页面的左侧。

我对这种事情一无所知,我一直在寻找答案,但我甚至不确定如何提出这个问题,所以我最大的希望是有人会了解我在寻找什么并能够回答。我已经玩了一点,但除了弄清楚如何改变坠落速度之外,我不知道我是否能够做到这一点只是摆弄。我有点害怕它需要完全重写但是现在,任何帮助都会受到赞赏。 (原始代码仍然记入贷方并链接回原始教程博客上的原始代码,我删除了它,因为它与此问题无关,但如果需要可以提供它,无论出于何种原因)。

<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>

2 个答案:

答案 0 :(得分:1)

首先,您应该检查代码的作者是否可以修改和重用他的代码。他甚至可能会为您解决问题。

left: e(0,c) + 'px'来电中将left: e(0, c/2) + 'px'更改为setTimeout() e是一个random(startRange, endRange)函数,c是窗口的长度,所以通过将可能出现雨滴的窗口左侧的可能位置减半,我们有效地将它们限制在左侧屏幕的一半。

这是fiddle illustrating the change

请注意,我并不打算理解整个脚本,并且还有两个对c的其他引用可能需要检查(可能是旧浏览器的兼容性?):

  • rainDiv的尺寸为c - 20 px。这可能在最近的浏览器中,甚至在所有
  • 中都无关紧要
  • for循环看起来应该在脚本开头创建雨滴,但我没有看到它改变任何东西。它还使用随机e(0, c)

答案 1 :(得分:-1)

试试这个 http://jsbeautifier.org/

使用美化的代码示例:

<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>