js漂浮广告

<script type="text/javascript">
window.onload = function() {
var Bnn = document.getElementById("banner")
var ch = document.getElementById("cha")
//获得可见宽高
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
//设置left值和top值用来改变bnn的方向
var Top = 1;
var Lef = 1;
//设置定时器他会一直加加
var timer = setInterval(add, 5)


function add() {
// 获得旧的Top值
var Jtop = parseInt(Bnn.style.top);
// 获得旧的left的值
var Jleft = parseInt(Bnn.style.left);
// 新的top值
Bnn.style.top = Jtop + Top + 'px'
//新的left值
Bnn.style.left = Jleft + Lef + 'px'
//判断这个块不能可视区域


if(Jtop >= height - 100) {
Top = -1;
}
if(Jtop <= 0) {
Top = 1;
}
if(Jleft >= width - 100) {
Lef = -1;
}
if(Jleft <= 0) {
Lef = 1;
}


}
//当鼠标艺人的时候触发一个函数
Bnn.onmousemove = function(){
// 清除一下定时器
clearInterval(timer)
//当点击ch的时候
ch.onclick  = function(){
//让大块隐藏
Bnn.style.display='none'
}
}
//离开的时候
Bnn.onmouseout = function(){
//重新启动一下定时器
timer=setInterval(add,5)
}

}

</script>

<style type="text/css">
* {
margin: 0;
padding: 0;
}

#banner {
width: 100px;
height: 100px;
background: orange;
position: relative;
}
#banner #cha{
position: absolute;
top: -15px;
right: 0px;
font-size: 30px;
text-decoration: none;
color: red;
}
</style>

<div id="banner" style="position: absolute;left: 0px;top: 0px;background: url(img/bz2.jpg) no-repeat center;"
>
<a href="#" id="cha">x</a>
</div>