jquery漂浮广告代码有好多种实现方式，本文介绍的这种方法应该算得上是简单、实用、逻辑清晰的方法了。
<!doctype html><html><head><meta charset="utf-8"><title>jquery漂浮广告代码</title><script src="/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,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(); //下边界//难点:怎样判断广告的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>
