漂浮的广告

　　哈哈，以前看到别人网站上面的漂浮广告觉得很神奇，应该要很复杂的代码吧。

　　但是，现在学了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>

 

 

posted @ 2012-07-29 21:45  hello*boy  阅读(370)  评论(0)    收藏  举报