zoukankan      html  css  js  c++  java
  • 漂浮的广告

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

      但是,现在学了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>
    
  • 相关阅读:
    absolute之后居中宽度自适应
    定位网页元素(5)
    浮动(4)
    Android的方法和属性(1)
    Activity步骤
    JSP的指令
    边框和边距(3)
    计算机快件键
    字体、文本、背景、列表样式和超链接(2)
    c/s和b/s的区别
  • 原文地址:https://www.cnblogs.com/dedeyi/p/2614334.html
Copyright © 2011-2022 走看看