码迷,mamicode.com
首页 > 其他好文 > 详细

全屏漂浮效果

时间:2014-12-26 16:36:20      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:

自己写的一个满屏漂浮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

全屏漂浮效果

标签:

原文地址:http://www.cnblogs.com/wuyin/p/4186899.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!