涉及到offset等有關獲取各種尺寸問題下 次總結 ...
涉及到offset等有關獲取各種尺寸問題下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>廣告</title>
<style>
*{
padding: 0;
margin: 0;
}
#ad{
width: 300px;
height: 200px;
background: url(images/400.jpg) no-repeat;
position: absolute;
left: 0;
top: 0;
}
#close{
width: 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>
次總結
