javascript 小游戏:可爱的草莓
来源:岁月联盟
编辑:exp
时间:2012-03-20
<!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>
摘自 代俊建的专栏