纯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 凡是页面中活动的模块,基本都是脱离文档流,也就是定位处理过,切记。