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);
                });

enter image description here

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



    });

Answer 2

你的snowTop不得大于450，因为它与父容器顶部之间的距离必须大于0，因为它与父容器左边的距离必须大于0。

问题仅在于你的css在这一行

.css('left', left).css('top', snowTop)

你必须确保你的左边距不应小于0，你的上边距也不得超过最大限制（这里我根据我的屏幕分辨率和页面尺寸选择了450）。 这对我有用，试一试。

jQuery(function () {

                var windowHeight = jQuery(window).height();
                var drop = jQuery('.drop2').detach();

                var wh = jQuery(window).height();
                var ww = jQuery(window).width();
                var fh = jQuery('.drop2').outerHeight();
                var fw = jQuery('.drop2').outerWidth();
                function create() {

                    var left = Math.random() * jQuery(window).width() - 100;
                    if (left < 0)
                        left = 1;
                    var snowTop = Math.floor(Math.random() * (windowHeight));
                    if (snowTop > 450)
                        snowTop = 450;
                    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', left)
                                .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);



            });

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

2 个答案: