<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript">
/*
* 小遊戲:可愛的草莓 ,點擊下載圖片 
*/
onload = function(){
setTimeout(fun, 100); // 頁面加載後延遲100毫秒再執行, 避免因為無法獲取寬度高度而造成的圖片抖動
}
function fun(){
var ad = document.getElementById("ad");
var width = document.documentElement.clientWidth; // 瀏覽器窗口寬度
var height = document.documentElement.clientHeight; // 瀏覽器窗口高度
var id = setInterval(move, 20); // 每隔20毫秒移動一次
var x = 0; // 圖片的x軸坐標
var y = 0; // 圖片的y軸坐標
var xStep = 3; // x軸每次移動的距離
var yStep = 3; // y軸每次移動的距離
function move(){
x += xStep;
y += yStep;
if(y + ad.height > height || y < 0) // 如果超出邊界, 向反方向移動
yStep *= -1;
if(x + ad.width > width || x < 0)
xStep *= -1;
ad.style.left = x + "px"; // 改變圖片的x軸位置
ad.style.top = y + "px"; // 改變圖片的y軸位置
}
ad.onmouseover = function(){
clearInterval(id);
}
ad.onmouseout = function(){
id = setInterval(move, 20);
}
ad.onclick = function(){ // 鼠標點擊廣告時刪除, 並且打開新頁面
ad.parentNode.removeChild(ad);
open("img.html", "_blank", "height=336,width=336,status=no,toolbar=no,menubar=no,location=no,left=300,top=100");
}
}
</script>
</head>
<body>
<img id="ad" src="../img/mei.gif" style="position:absolute; left:0px; top:0px; cursor:pointer;">
</body>
</html>
摘自 代俊建的專欄
