Jq实现浮动飘窗广告位

最新推荐文章于 2020-10-30 10:49:32 发布

CaseyWei

最新推荐文章于 2020-10-30 10:49:32 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JQ

本文链接：https://blog.youkuaiyun.com/caseywei/article/details/99544474

JQ 专栏收录该内容

23 篇文章

订阅专栏

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>jquery漂浮广告代码</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <style>
    </style>
</head>

<body>
    <div id="imgDiv" style="position:absolute;left:50px;top:60px;">
        <div id="a" style="width:20px;height:20px;position:absolute;left:160px;background:salmon;text-align: center;">×
        </div>
        <!-- <img src="01.jpg" border="0" /> -->
        <div style="width:180px;height:180px;background:red;"></div>
    </div>

    <script>
        var xin = true, // true向右偏移,false向左偏移，首次为true，默认向右偏移
            yin = true; // true向下偏移,false向上偏移，首次为true，默认向下偏移
        var step = 1; // 每次移动偏移量
        var delay = 10; // 定时函数定时时间
        var $obj;
        $(function () {
            $obj = $("#imgDiv");
            var time = window.setInterval("move()", delay);
            $obj.mouseover(function () {
                clearInterval(time)
            });
            $obj.mouseout(function () {
                time = window.setInterval("move()", delay)
            });
        });

        function move() {
            var left = $obj.offset().left;
            var top = $obj.offset().top;
            var L = T = 0; //左边界和顶部边界
            var R = $(window).width() - $obj.width(); // 右边界
            var B = $(window).height() - $obj.height(); // 下边界

            //难点:怎样判断广告的4个边框有没有超出可视化范围!
            if (left < L) {
                xin = true; // 水平向右移动
            }
            if (left > R) {
                xin = false; // 水平向左移动
            }
            if (top < T) {
                yin = true; // 垂直向下移动
            }
            if (top > B) {
                yin = false; // 垂直向上移动
            }
            //根据有没有超出范围来确定广告的移动方向
            left += step * (xin == true ? 1 : -1);
            top += step * (yin == true ? 1 : -1);
            // 给div 元素重新定位
            $obj.offset({
                top: top,
                left: left
            })
        }
        //关闭
        $(function () {
            $("#a").click(function () {
                var b = $("#a").parent();
                $(b).remove();
            })
        })
    </script>

</body>

</html>