jQuery图层全屏浮动效果可关闭
  • 分享到微信朋友圈
    X
立即下载 查看演示

如何使用jQuery实现图层全屏浮动效果？

关键技术点

  • 注意设定图层的定位类型

  • 使用计时器方法 window.setInterval()

  • 定义图层的移动方法

css设置

<style>
    #Div
    {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 99;
    }
</style>

设置div图层定位类型fixed 定位 即元素的位置相对于浏览器窗口是固定位置。

html设置

<div id="Div">
    <div id="clo">
        ×
    </div>
    <div style="width: 220px; background: #b8a9d4; padding: 20px;">
        <a href="#" target="_blank">
            <img src="images/move.png" />
        </a>
    </div>
</div>

设置容易id=Div 定义一个关闭图层 定义id=clo

主要js代码与解析

<script type="text/javascript">
    var xin = true, yin = true;
    var step = 0.5; //0.5px
    var delay = 10; //10毫秒
    var $obj;

    $(function () {
        $obj = $("#Div");

        //每10毫秒调用一次move()方法
        var time = window.setInterval("move()", delay);

        //鼠标移出
        $obj.mouseover(function () {
            //清空计时器
            clearInterval(time)
        });

        //鼠标移入
        $obj.mouseout(function () {

            //每10毫秒调用一次move()方法
            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(); //下边界
        if (left < L) {
            xin = true; // 水平向右移动
        }
        if (left > R) {
            xin = false; // 水平向左移动
        }
        if (top < T) {
            yin = true; // 垂直向下移动
        }
        if (top > B) {
            yin = false; // 垂直向上移动
        }
        left = left + step * (xin == true ? 1 : -1);
        top = top + step * (yin == true ? 1 : -1);
        // 重新定位
        $obj.offset({
            top: top,
            left: left
        })
    }

    //关闭容器图层
    $(function () {
        $("#clo").click(function () {
            $("#clo").parent().remove();
        })
    }) 
</script>