漂浮的广告
哈哈，以前看到别人网站上面的漂浮广告觉得很神奇，应该要很复杂的代码吧。
但是，现在学了javascript后，自己想着做了一个，不过做完自己的后看了一下别人写的，参考一下，改进一些。
现在OK! ………(^_^)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
setTimeout(MoveAd,100);//网页加载等待0.1秒后开始
}
function MoveAd() {
var AdDiv = document.getElementById("divAd");
//动态生成图片
var AdImg = document.createElement("img");
AdDiv.appendChild(AdImg);
AdImg.src = "images/1.jpg";
AdImg.style.border = "0";
AdImg.style.width = "140px";
AdImg.style.height = "140px";
AdImg.style.cursor = "pointer";
AdDiv.style.border = "0";
//定义变量
var x=0,y=0;
var xStep=1,ySetp=1;
var setId = setInterval(Fun,8);
function Fun() {
//避免窗体改变所以变量放在这儿
var clientH = parseInt(document.documentElement.clientHeight);
var clientW = parseInt(document.documentElement.clientWidth);
x = x + xStep;
y = y + ySetp;
if (x < 0 || x > clientW - parseInt(AdImg.style.width)) {
xStep = (-1) * xStep;
}
if (y < 0 || y > clientH - parseInt(AdImg.style.height)) {
ySetp = (-1) * ySetp;
}
AdDiv.style.left = x + "px";
AdDiv.style.top = y + "px";
}
//图片事件
AdDiv.onmouseover = function () {
clearInterval(setId);
}
AdDiv.onmouseout = function () {
setId = setInterval(Fun,8);
}
AdImg.onclick = function () {
window.location.href = "http://www.baidu.com";
}
//添加关闭按钮
var btnclose = document.createElement("input");
btnclose.type = "button";
btnclose.value = "关闭";
AdDiv.appendChild(btnclose);
btnclose.style.display = "block";
btnclose.style.cursor = "pointer";
//关闭事件
btnclose.onclick = function () {
clearInterval(setId);
AdDiv.parentNode.removeChild(AdDiv);
}
}
</script>
</head>
<body>
<div id="divAd" style=" position:absolute;">
</div>
</body>
</html>
