全屏漂浮效果

自己写的一个满屏漂浮JS效果

很土的一个效果,在互联网上感觉消失了好久了,但是最近在做一个项目的时候,又要用到,临时找还找不到,就写了一个,记录于此以防后用

<script type="text/javascript">

        $(function () {

            //浮动图片

            var floatImg = $("#img1");

            floatImg.css("position", "absolute");

            var imgW = floatImg.width();

            var imgH = floatImg.height();

            var winH = $(window).height();

            var winW = $(window).width();

            var maxW = winW - imgW;

            var maxH = winH - imgH;

            if (maxW > 0 && maxH > 0) {

//随机位置起始

                var nowH = Math.floor(Math.random() * maxH);

                var nowW = Math.floor(Math.random() * maxW);

                var reverseH = 0;

                var reverseW = 0;

                setInterval(function () {

                    if (nowH == 0) {

                        reverseH = 0;

                        nowH += 1;

                    }

                    else if (nowH > 0 && nowH < maxH) {

                        if (reverseH == 0) {

                            nowH += 1;

                        } else {

                            nowH -= 1;

                        }

                    } else if (nowH == maxH) {

                        nowH -= 1;

                        reverseH = 1;

                    }

                    if (nowW == 0) {

                        reverseW = 0;

                        nowW += 1;

                    }

                    else if (nowW > 0 && nowW < maxW) {

                        if (reverseW == 0) {

                            nowW += 1;

                        } else {

                            nowW -= 1;

                        }

                    } else if (nowW == maxW) {

                        nowW -= 1;

                        reverseW = 1;

                    }

                    floatImg.css("top", ($(window).scrollTop() + nowH) + "px").css("left", ($(window).scrollLeft() + nowW) + "px");

                }, 30);

            }

            setTimeout(function () {

                if ($("#img1").length > 0) {

                    $("#img1").remove();

                }

            }, 15000);

        });

    </script>

HTML就很简单

 <div title="点击关闭" id="img1" style="z-index: 100; left: 2px; width: 393px; position: absolute;

 height: 297px; visibility: visible;">

       要漂浮的内容

    </div>

demo下载地址http://www.wuyinweb.com/doc/53/107.aspx

你可能感兴趣的:(效果)