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>

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

  • 相关阅读:
    Gartner:安全软件在经济危机中独善其身 狼人:
    美军正式成立网络战司令部 保护美军网络 狼人:
    警惕“搜房网”“凯业房园”等网站被挂马 狼人:
    Gartner:08年全球杀毒软件市场份额排名 微软第七 狼人:
    专访梭子鱼:以“立体交付”保障Web应用安全 狼人:
    安全专家称Opera Unite或成黑客“好友” 狼人:
    微软正式提供免费杀毒软件下载 仅限7.5万份 狼人:
    电信故障引发全国多地上网难 京沪等地受影响 狼人:
    中国拟修订保守国家秘密法 严防通过互联网泄密 狼人:
    Google推反恶意广告网站 防护恶意软件威胁 狼人:
  • 原文地址:https://www.cnblogs.com/witer666/p/1468028.html
Copyright © 2011-2022 走看看