JQuery 常用DOM操作5

来源：互联网发布：导播软件编辑：程序博客网时间：2024/05/18 04:22

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>

截图：

0 0