涉及到offset等有关获取各种尺寸问题下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>广告</title>
<style>
*{
padding: 0;
margin: 0;
}
#ad{
300px;
height: 200px;
background: url(images/400.jpg) no-repeat;
position: absolute;
left: 0;
top: 0;
}
#close{
20px;
height: 20px;
}
</style>
</head>
<script type="text/javascript">
window.onload = function(){
var ad= document.getElementById("ad");
var close = document.getElementById("close");
// 获得可视区域的宽高
var win_height = document.documentElement.clientHeight;
var win_width = document.documentElement.clientWidth;
// 计算可以到达的最大top和left值
var max_top = win_height - ad.offsetHeight;//屏幕高度减去图片高度
var max_left = win_width - ad.offsetWidth;
var x = 2;y = 5;//xy均为移动速度
//设置函数控制怎么移动
function run(){
// 获得旧的left和top
var old_left = ad.offsetLeft;
var old_top = ad.offsetTop;
// 计算新的
var new_left = old_left + x;//加上移动速度x,y
var new_top = old_top + y;
// 需要判断超出，控制速度及其方向
if (new_top>max_top) {//加速到屏幕边沿时，设置new_top = max_top;即速度为0就停下
new_top = max_top;
}
if (new_left>max_left) {
new_left = max_left;
}
if (new_left<0) {
new_left = 0
}
if (new_top<0) {
new_top = 0
}
// 赋值
ad.style.left = new_left + 'px';
ad.style.top = new_top + 'px';
//当new_top = max_top;即速度为0，此时速度设为相反方向即可
if (new_top == max_top) {
y = -2;
}
if (new_top == 0) {
y = 2;
}
if (new_left == max_left) {
x = -2;
}
if (new_left == 0) {
x = 2;
}
}
// 设置定时器，每隔一段时间就改变一下left top
var timer = setInterval(run,3);
// 定时器结束
//给ad加鼠标移入事件
ad.onmouseover = function(){
// 停止定时器
clearInterval(timer)
};
// 给ad加鼠标移出事件
ad.onmouseout = function(){
//重启定时器
timer = setInterval(run,3)
};
//点击关闭广告
close.onclick = function(){
ad.style.display = 'none';
};
// 窗口改变事件
window.onresize = function(){//window.onresize = function(){....}浏览器尺寸变化响应事件
//广告归位
//重新将广告放到左上角
ad.style.left = 0;
ad.style.top = 0;
// 将他的速度重新定义
x = 2;
y = 5;
// 重新获得可视区域的宽高
win_height = document.documentElement.clientHeight;
win_width = document.documentElement.clientWidth;
// 重新计算可以到达的最大top和left值
max_top = win_height - ad.offsetHeight;
max_left = win_width - ad.offsetWidth;
}
}
</script>
<body>
<div id="ad">
<img src="images/X.jpg" id="close">
</div>
</body>
</html>
次总结