一个广告框在指定区域,有定位属性的父级区域内,一直向右向左移动,如果碰到左右边框,反向,如果碰到上下边距,反向,实现在指定框中浮动的效果。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>广告浮动</title> <style type="text/css"> *{ padding: 0px; margin: 0px; } #div1{ 50px; height:70px; border: 1px solid red; background: blue; position: absolute;/*绝对定位*/ } </style> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('div1');//获得div元素 var x=1,y=1; setInterval(function(){//定时器 var hei=oDiv.offsetHeight;//获得div的高度(加边框) var k_hei=document.documentElement.clientHeight;//获得可视区域的高度 var max_top=k_hei-hei;//获得可以达到的最大高度 var wid=oDiv.offsetWidth;//获得div的宽度(加边框) var k_wid=document.documentElement.clientWidth;//获得可视区域的宽度 var max_left=k_wid-wid;//获得可以达到的最大宽度 var left=oDiv.offsetLeft;//获得瞬时的离左边的距离 var top=oDiv.offsetTop;//获得离上边的距离 var new_left=left+1*x;//每过一个间隔,往右移一个像素 var new_top=top+1*y;//每过一个间隔,往下移一个像素 if(new_top>=max_top||new_top==0){//当新位置离上边距离大于最大位置,或新位置离上边距离等于0时(向上走时),垂直方向上反向 y=-1*y; } if(new_left>=max_left||new_left==0){//当新位置离左边距离大于最大位置,或新位置离左边距离等于0时(向左走时),左右方向上反向 x=-1*x; } oDiv.style.left=new_left+'px';//赋值(离左边的距离) oDiv.style.top=new_top+'px';//赋值(离右边的距离) },10); } </script> </head> <body> <div id="div1"></div> </body> </html>