jquery悬浮移动框

最新推荐文章于 2023-05-18 15:01:38 发布

mariopq

最新推荐文章于 2023-05-18 15:01:38 发布

阅读量386

点赞数

分类专栏： javascript 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/mariopq/article/details/126967525

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<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 language="JavaScript">
    var xin = true,
            yin = 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(); //下边界
        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);
        // 给div 元素重新定位
        $obj.offset({
            top: top,
            left: left
        })
    }
    $(function() {
        $("#a").click(function() {
            var b = $("#a").parent();
            $(b).remove();
        })
    })
    $("#imgDiv").draggable();
</SCRIPT>