zoukankan      html  css  js  c++  java
  • Div弹出提示效果(原创)

       一直一来对javascript对非常热爱.当ajax出来后.和服务器的交互变的方便和快捷好多.javascript应用的范围更加广范.但自身对javascript的开发和应用感觉还是停留在初级阶段.时时看到javascript时都希望可以有时间好好研究好好看一下代码.很多应用都没有亲身体验过!

     今天由于项目需要和时间上充足.自己开发了一个div的弹出提示效果.挺不错的.代码如下载载.有什么意见或建议请留言.

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <style type="text/css">
      body{
     font-size:12px;
     font-family:Arial, Helvetica, sans-serif;
      }
      .divNone{
     300px;
     background-color:#f90;
     height:210px;
     z-index:999;
     position:absolute;
      }
    .divNone p{ margin:6px}
    .roundtop {
     background: url(images/tr.gif) no-repeat top right;
    }
    .roundbottom {
     background: url(images/br.gif) no-repeat top right;
    }
    img.corner {
      5px;
     height: 5px;
     border: none;
     display: block;
    }
    .title{
     float:right;
     margin-top:5px;
     margin-right:5px;
    }
    .closeCss{
     color:#FFF;
    }
      </style>
      <script language="javascript">
       function MM_addHeight(isShow,tmpDiv){
      var intervalProcess=null;
      var height=210;
      if(isShow){
       var tmpHeight=0;
       intervalProcess = window.setInterval(MM_setHeight, 10);
       function MM_setHeight(){
        if(height>tmpHeight){
         tmpHeight+=3;
         tmpDiv.style.height=tmpHeight+"px";
        }
       }
      }
      else{
       clearInterval(intervalProcess);
       intervalProcess= window.setInterval(MM_setCloseHeight, 10);
       function MM_setCloseHeight(){
        if(height>0){
         tmpDiv.style.height=height+"px";
         height-=3;
        }
        else{
         tmpDiv.style.height="0px";
         tmpDiv.style.display="none";
         clearInterval(intervalProcess);
        }
       }
      }
     }  
     function MM_Tip(objDiv){
      var tmpDiv=document.getElementById(objDiv);
      if(tmpDiv.style.display=="none"){   
       tmpDiv.style.height="0px";
       tmpDiv.style.display="block";
       tmpDiv.style.overflow = "hidden";
       MM_addHeight(true,tmpDiv);   
      }
      else{
       MM_addHeight(false,tmpDiv);
      }
     }
     function MM_closeTip(objDiv){
      var tmpDiv=document.getElementById(objDiv);
      MM_addHeight(false,tmpDiv);
     }
      </script>
     </HEAD>
     <BODY>
      <div><a href="#html" onclick="MM_Tip('div1');" style="cusor:hand;">科学发展观</a><div>
      <div id="div1" class="divNone" style="display:none;">
     <div class="title"><a href="#html" class="closeCss" onclick="MM_closeTip('div1')">关闭</a></div>
     <div class="roundtop">
      <img src="images/tl.gif" alt="" width="5px" height="5px" class="corner"/>
     </div>
     <p>dsgsdgewtqewtqewtewqtewqtqewtewds<br/>
     我有人人在在要要有有有有要要ewtewqtedsgsdgewtqeewt<br/>
     我有人人在在要要有有有有要要ewtewqtewqtewqtqewttedsgew<br/>
     我有人人在在要要有有有有要要ewtewqtewqtewqtqewttedtt<br/>
     我有人人在在要要有有有有要要ewtewqtewqtewqtqewtewq<br/>
     我有人人在在要要有有有有要要ewtewqtewqtewqtqwtew<br/>
     我有人人在在要要有有有有要要ewtewqtewqtewqttqewtew<br/>
     </p>
     <div class="roundbottom">
      <img src="images/bl.gif" alt="" width="5px" height="5px" class="corner" />
     </div>
      </div>
      <div style="clear:both;"><input type="text" id="test" /></div>
     </BODY>
    </HTML>

    附:为什么园里无法上传附件了呢?郁闷!

  • 相关阅读:
    java编译错误No enclosing instance of type TestFrame is accessible. Must qualify the allocation with an enclosing instance of type TestFrame (e.g. x.new A(
    java 2中创建线程方法
    动态规划基本思想
    关于eclipse编译一个工程多个main函数
    java Gui初识
    Eclipse中java项目的打包
    java 播放声音
    把资源文件夹导入到eclipse中
    Java建立JProgressBar
    How to grant permissions to a custom assembly that is referenced in a report in Reporting Services
  • 原文地址:https://www.cnblogs.com/witer666/p/1468028.html
Copyright © 2011-2022 走看看