1.元素定位的常用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漂浮广告</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="imgDiv" style="position:absolute;left:50px;top:60px">
<img src="jia.jpg" width="100px" height="100px" border="0px"/>
</div>
<script type="text/javascript">
var xin=true,yin=true;//标记xin=true往右移动，false往左
var step=1;//移动步伐
var delay=10;//时间间隔
var $obj;
function move(){
var left=$obj.offset().left;
var top=$obj.offset().top;//得到div相对浏览器的偏移量
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;}
left=left+step*(xin?1:-1);
//垂直方向判断
if(top<T){yin=true;}
if(top>B){yin=false;}
top=top+step*(yin?1:-1);
//给div元素重新定位一次
$obj.offset({top:top,left:left});//div在移动
}
$(function(){
var $obj=$("#imgDiv");
var itl=setInterval("move()",delay);
$obj.mouseover(function(){clearInterval(itl)});//鼠标事件
$obj.mouseout(function(){itl=setInterval("move()",delay)});//鼠标事件
});
</script>
</body>
</html>
截图：
