纯js实现可恶的弹出广告

利用setInterval（“表达式”，1000）动态 时间定时器，clearInterval（）清除定时器  

样式部分：

div{

position:absolute;

background: #AA0000;

color: #fff;

font-size: 12px;

padding: 20px;

text-align: center;

width: 80px;

line-height: 24px;

border-radius:100%;

}

HTML部分

<div  id = "ad">我是可爱又可怜的广告君 </div>

JS部分

<script>

var x=0;

var y=0;

var xs=10;

var ys=10;

var adt = document.getElementById("ad");//获取广告这个节点对象

/*设置函数，让广告动起来*/

function move(){

x += xs;

y += ys;

//clientWidth 为浏览器宽度  offsetWidth元素自己的宽度  -20 滚动条的宽度

if(x >= document.documentElement.clientWidth-adt.offsetWidth-20 || x <= 0)//广告君活动的范围 判断  （超出浏览器宽度 反向运动）

{

xs = -1*xs;//改变方向

}

if( y >= document.documentElement.clientHeight-adt.offsetHeight-20 || y<=0)

{

ys = -1*ys;

}

adt.style.left = x+"px";//px不能丢

adt.style.top = y+"px";//px不能丢

}

/*设置定时器*/

var dt = setInterval("move()",200);

adt.onmouseover = function(){

clearInterval(dt);

}

adt.onmouseout = function(){

dt = setInterval("move()",200);

}

</script>

ps 凡是页面中活动的模块，基本都是脱离文档流，也就是定位处理过，切记。