4

我尝试在页面内部不断地使用淡入淡出的图像。我尝试了窗口高度。但是出现的图像超出了窗口的宽度。这是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);
                });

在此处输入图像描述

4

2 回答 2

5

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

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

演示小提琴

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



    });
于 2013-10-23T08:09:43.630 回答
1

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



            });
于 2013-10-23T09:02:44.547 回答