javascript - 使用jquery随机显示页面内的图像

Question

我尝试在页面内不断地使用 fadeIn fadeOut 图像。我尝试了窗口高度。但是出现的图像溢出了窗口的宽度。这是 FIDDLE 有没有办法在窗口内随机显示图像而不会溢出或任何东西。这是

  var clone = drop
                    .clone()
                    .appendTo('body')

                    .css('left', Math.random() * jQuery(window).width() - 100)
                            .css('top', snowTop)
                    .html('<img src="http://i.stack.imgur.com/S9o1r.png"/>')
                    .animate({
            }, 20000, function() {
                jQuery(this).fadeIn(2000, function() {

                    jQuery(this).fadeOut(2000);
                });

Answer 1

尝试以下代码....我刚刚使用了 innerHeight 和 innerWeight 而不是高度和宽度。还将 snowTop 更改为以下..

var snowTop = Math.floor(Math.random() * (windowHeight-128)); //here 128 is image height..you should provide actual height of image instead of 128

Demo Fiddle

JS:

    jQuery(function() {
        var windowHeight = jQuery(window).innerHeight();
        var drop = jQuery('.drop2').detach();

        var wh = jQuery(window).innerHeight();
        var ww = jQuery(window).innerWidth();
        var fh = jQuery('.drop2').innerHeight();
        var fw = jQuery('.drop2').innerWidth();
        function create() {


            var snowTop = Math.floor(Math.random() * (windowHeight-128));
            var number1 = windowHeight - 500 + Math.floor(Math.random() * windowHeight);
            var number2 = 1 + Math.floor(Math.random() * 28);
            var number3 = 9 + Math.floor(Math.random() * 4);
            var number4 = 13 + Math.floor(Math.random() * 4);
            var number5 = 17 + Math.floor(Math.random() * 4);
            var imageSize = Math.floor(Math.random() * 20);
            //alert(imageSize);

            if (imageSize > 15) {
                var customsize = Math.random(1 * 1000) + 9000;
            } else {
                var customsize = Math.random(1 * 1000) + 15000;
            }



            // alert(number1);

            var clone = drop
                    .clone()
                    .appendTo('body')

                    .css('left', Math.random() * jQuery(window).innerWidth() - 128)
                            .css('top', snowTop)
                    .html('<img src="http://i.stack.imgur.com/S9o1r.png"/>')
                    .animate({
            }, 20000, function() {
                jQuery(this).fadeIn(2000, function() {

                    jQuery(this).fadeOut(2000);
                });
                jQuery(this).click(function() {
                    alert("Happy Holidays");
                });
                jQuery(this).hover(
                        function() {
                            jQuery(this).append(jQuery("<div id='new' style='width:100px;height:100px;color:#fff;'>Happy Holidays</div>"));
                        }, function() {
                    jQuery(this).find("div:last").remove();
                }
                );


            });


        }


setInterval(create, 1000);



    });