js浮动飘窗笔记

---

HTML:
 

<div id="float_model">
    <div id="model_close">×</div>
    <div id="img_box">
       <img  src="bg.jpg" />
    </div>
</div> 

CSS:
 

body{
        position: relative;
    }
    #float_model{
        position:absolute;
        left:50px;
        top:60px;
    }
    #model_close{
       width:20px;
       height:20px;
       position:absolute;
       right:0;
       color: #000;
       line-height: 20px;
       background:rgba(255, 255, 255, 0.7);
       text-align: center;
       cursor: pointer;
    }
    #img_box{
       width:300px;
       height:auto;
    }
   #img_box img{
       width: 100%;
       height: 100%;
    }

JS:

var xin = true,
        yin = true;
    var step = 1;
    var delay = 10;
    var $obj;
    $(function() {
        $obj = $("#float_model");
        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() {
        $("#model_close").click(function() {
            var b = $("#model_close").parent();
            $(b).remove();
        })
    })