zoukankan      html  css  js  c++  java
  • JavaScript制作浮动广告

    如果有一定的JavaScript基础,制作浮动广告还是比较容易的。直接上代码了:

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    *{
     margin:0;
     padding:0;
    }

    #csdn
    {
     800px;
     margin:0 auto;
    }
    #ad
    {
     position:absolute;
     right:0px;
     top:30px;
     z-index:1;
    }
    #cl
    {
     position:absolute;
     right:0px;
     top:30px;
     z-index:2;
    }
    </style>
    <script type="text/javascript">
    var advInitTop=30;
    var closeInitTop=30;
    function inix()
    {
       advInitTop=document.getElementById("ad").style.pixelTop;
       closeInitTop=document.getElementById("cl").style.pixelTop;
    }
    function closeAd()
    {
     document.getElementById("ad").style.display="none";
     document.getElementById("cl").style.display="none";

    }
    function move()
    {
     //document.getElementById("ad").style.pixelTop=document.body.scrollTop+advInitTop;
     //document.getElementById("cl").style.pixelTop=document.body.scrollTop+closeInitTop;
     document.getElementById("ad").style.pixelTop=document.documentElement.scrollTop+advInitTop;
     document.getElementById("cl").style.pixelTop=document.documentElement.scrollTop+closeInitTop;
     //alert(document.getElementById("ad").style.pixelTop);
        window.status=document.documentElement.scrollTop+"/"+document.getElementById("ad").style.pixelTop;
    }
    window.onscroll=move;
    </script>
    </head>

    <body>
      <div id="cl" onclick="closeAd()">
       <img src="images/close.jpg" />
      </div>
      <div id="csdn">
       <a href="http://www.csdn.net"><img src="images/xiaojie1.jpg" border="0" /></a>
      </div>
      <div id="ad">
       <a href="http://www.taobao.com"><img src="images/advpic.gif" /></a>
      </div>
    </body>
    </html>

    要点:

    上述代码中要用document.documentElement ,不要用老的document.body,否则,不符合w3c标准,看不到浮动效果!

  • 相关阅读:
    Makefile文件(五)_使用变量
    Makefile文件(四)_书写命令
    Makefile文件(三)_书写规则
    Makefile文件(二)_总述
    Makefile文件(一)_介绍
    select、poll和epoll
    LintCode 子树
    LintCode 字符串查找
    LintCode 用栈实现队列
    LintCode 丑数
  • 原文地址:https://www.cnblogs.com/zhouhb/p/2839019.html
Copyright © 2011-2022 走看看