哈哈,以前看到别人网站上面的漂浮广告觉得很神奇,应该要很复杂的代码吧。
但是,现在学了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>