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标准,看不到浮动效果!

  • 相关阅读:
    OpenLDAP备份和恢复
    OpenLDAP搭建部署
    Python正则表达式
    ansible学习
    Jenkins学习
    docker学习2
    让阿里告诉你, iOS开发者为什么要学 Flutter !
    用UIKit和UIView在视图上执行iOS动画
    iOS开发如何面对疫情过后的面试高峰期 !
    如何写好一个UITableView
  • 原文地址:https://www.cnblogs.com/zhouhb/p/2839019.html
Copyright © 2011-2022 走看看