zoukankan      html  css  js  c++  java
  • 层的拖动与隐藏

    <html>
    <head>
    <title>可移动的显示层</title>powered by 25175.net
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style>
    <!--

    /*Post-it note script- by Wsabstract.com
    Visit Website Abstraction (http://25175.net) for script
    Credit must stay intact for use*/
    body
    {
    font-size: 12px;
    margin: 0px auto;
    height: auto;
    805px;
    }
    #header
    {
    background:#eeeeee;
    border: 1px dashed #0099CC;

    }
    #content
    {
    height:300px;
    background:#eeff11;
    }
    #left
    {
    background:#0066FF;
    float:left;
    30%;
    height:100%;
    }
    #footer
    {
    background:#FF0000;
    }
    #postit{
    position:absolute;
    250;
    padding:5px;
    background-color:lightyellow;
    border:1px solid black;

    z-index:100;
    cursor:hand;
    }

    -->
    </style>
    <script type="text/javascript" language="javascript">
    function  show()
    {

    if (document.getElementById("postit").style.display=="none")
    {

    document.getElementById("postit").style.display="";
    }
    else
    {
    document.getElementById("postit").style.display="none"
    }
    }
    </script>
    </head>
    <body   bgcolor=#FFFFFF  >
    <!-------------------------------->

    <div id="header">header<a href="javascript:show();">单击显示</a></div>
     <div id="postit" style=" display:none;left:150px;top:150px">
     <div align="right"><b><a href="javascript:ColseShow();">[关闭]</a></b></div>
     
     <b>jojoo.net:</b><br>
     <p><font size="2" face="Arial"><a href="http://www.25175.net" target="_new">经典实例、教程库<br>
     </a>汇聚网界最多的网页特效之家@!</font></p>
     </div>
     <div id="content">
    <div id="left">left</div>
    <div id="right">right</div>
    </div>
    <div id="footer">footer</div>
    <script>

    //Post-it only once per browser session? (0=no, 1=yes)
    //Specifying 0 will cause postit to display every time page is loaded
    var once_per_browser=0

    ///No need to edit beyond here///

    var ns4=document.layers
    var ie4=document.all
    var ns6=document.getElementById&&!document.all

    if (ns4)
    crossobj=document.layers.postit
    else if (ie4||ns6)
    crossobj=ns6? document.getElementById("postit") : document.all.postit
    function  ColseShow()
    {
    document.getElementById("postit").style.display="none"

    }

    function get_cookie4(Name) {
      var search = Name + "="
      var returnvalue = "";
      if (document.cookie4.length > 0) {
        offset = document.cookie4.indexOf(search)
        if (offset != -1) { // if cookie4 exists
          offset += search.length
          // set index of beginning of value
          end = document.cookie4.indexOf(";", offset);
          // set index of end of cookie4 value
          if (end == -1)
             end = document.cookie4.length;
          returnvalue=unescape(document.cookie4.substring(offset, end))
          }
       }
      return returnvalue;
    }

    function showornot(){
    if (get_cookie4('postdisplay')==''){
    showit()
    document.cookie4="postdisplay=yes"
    }
    }

     

    </script>

    <script language="JavaScript1.2">

    //drag drop function for ie4+ and NS6////
    /////////////////////////////////

    function drag_drop(e){
    if (ie4&&dragapproved){
    crossobj.style.left=tempx+event.clientX-offsetx
    crossobj.style.top=tempy+event.clientY-offsety
    return false
    }
    else if (ns6&&dragapproved){
    crossobj.style.left=tempx+e.clientX-offsetx
    crossobj.style.top=tempy+e.clientY-offsety
    return false
    }
    }

    function initializedrag(e){
    if (ie4&&event.srcElement.id=="postit"||ns6&&e.target.id=="postit"){
    offsetx=ie4? event.clientX : e.clientX
    offsety=ie4? event.clientY : e.clientY

    tempx=parseInt(crossobj.style.left)
    tempy=parseInt(crossobj.style.top)

    dragapproved=true
    document.onmousemove=drag_drop
    }
    }
    document.onmousedown=initializedrag
    document.onmouseup=new Function("dragapproved=false")

    </script>
    <!---------------------------------->
    </body>
    </html>

     

  • 相关阅读:
    orcale 多列转一行显示
    orcale 树形结构查询
    orcale 32位guid转36位guid
    orcale 树形结构查询
    win7下安装virtualbox+Ubuntu12.04笔记
    Spring调度器corn表达式详解
    MYSQL之一主多从搭建方案
    None of the configured nodes are available:[{#transport#-1}解决方案
    大数据分批次提交保存
    ORACLE时间类型字段加减简便运算
  • 原文地址:https://www.cnblogs.com/hu88oo/p/1335060.html
Copyright © 2011-2022 走看看