js 漂浮广告

<!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="20px;height:20px;position:absolute;left:160px;background:salmon;text-align: center;">×</div>
    <!-- <img src="01.jpg" border="0" /> -->
    <div style="180px;height:180px;background:red;"></div>
</div>

<script>
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;
    console.log(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
    })
}

</script>

</body>
</html>

<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>jquery漂浮广告代码</title>
<scriptsrc="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<divid="imgDiv"style="position:absolute;left:50px;top:60px;">
    <divid="a"style="20px;height:20px;position:absolute;left:160px;background:salmon;text-align: center;">×</div>
<!-- <img src="01.jpg" border="0" /> -->
    <divstyle="180px;height:180px;background:red;"></div>
</div>

<script>
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)
    });
});

functionmove() {
var left =$obj.offset().left;
console.log(left)
var top =$obj.offset().top;
varL=T=0; //左边界和顶部边界
varR=$(window).width() -$obj.width(); // 右边界
varB=$(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
    })
}

</script>

</body>
</html>