10
2013
10

弹出一个div的js代码

 

<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
  .black_overlay{  display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color: black;  z-index:1001;  -moz-opacity: 0.8;  opacity:.80;  filter: alpha(opacity=80);  }  .white_content {  display: none;  position: absolute;  top: 25%;  left: 25%;  width: 50%;  height: 50%;  padding: 16px;  border: 16px solid orange;  background-color: white;  z-index:1002;  overflow: auto;  }  </style>
</head>
<body>
<p>可以根据自己要求修改css样式<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点击这里打开窗口</a></p>
<div id="light" class="white_content">
    This is the lightbox content.
    <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
    Close</a></div>
<div id="fade" class="black_overlay">
</div>
</body>
</html>

09
2013
10

JS实现自定义右键菜单

 

 

JS右键.rar

08
2013
10

左侧隐藏导航菜单

 <html>
  <head>
  <meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网" />
    <title>精美设计左侧隐藏导航菜单,sky整理收集。</title>
    <script language="JavaScript1.2" type="text/javascript">
      var maxmnus = 5
      function opTab(){
        var mnu = document.getElementById("menubar")
        var arrdiv = document.getElementById("arrow")
        var arrtxt = document.getElementById("arr")
        if((mnu.style.display != "block") || (mnu.style.display == "")){
          mnu.style.display = "block"
          arrdiv.style.pixelLeft = mnu.style.width.substring(0 , mnu.style.width.length - 2)
          arrtxt.innerText = "3";
        } else {
          mnu.style.display = "none"
          arrtxt.innerText = "4";
          arrdiv.style.pixelLeft = 0;
        }
        event.cancelBubble = true;
      }//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
      function toggleMenu(el){
        for(var i = 0;i < maxmnus;i++) document.getElementById(document.getElementById("c" + i).menu).style.display = "none";
        if(el.status == "closed"){
          el.status = "open"
          document.getElementById(el.menu).style.display = "block";
        } else {
          el.status = "closed"
        }
      }//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
      function toggleSub(e){
        el = document.getElementById(e)
        if(el.status == "closed"){
          el.style.display = "block";
          el.status = "open"
        } else {
          el.style.display = "none";
          el.status = "closed"
        }
        event.cancelBubble = true;
      }
    </script>
<style type="text/css">
#menubar{
position:absolute;top:0px;left:0px;display:none;font-family:Verdana,Helvetica,Arial;font-weight:700;font-size:10px;cursor:hand;z-index:5;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#2644b2', endColorstr='#e7e8f1');}
 .indicator{
color:#b24426;font-family:Webdings;font-weight:bold;font-size:10px;}
 .r1{
position:relative;top:10px;left:5px;width:213px;color:#e7e8f1;border-left:#e7e8f1 2px outset;border-top:#e7e8f1 2px outset;border-right:#e7e8f1 2px outset;border-bottom:#e7e8f1 2px outset;padding-left:5px;padding-top:1px;adding-right:5px;padding-bottom:1px;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#2644b2', endColorstr='#e7e8f1');}
.submenu1{
position:relative;top:0px;left:0px;height:95%;width:100%;border-left:#e0f8e3 2px inset;border-top:#e0f8e3 2px inset;border-right:#e0f8e3 2px inset;border-bottom:#e0f8e3 2px inset;padding-left:3px;padding-top:3px;padding-right:3px;padding-bottom:3px;display:none;color:#2644b2;font-family:Verdana,Helvetica,Arial;font-weight:700;font-size:10px;background-color:#cff1d4;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#bec1e4', endColorstr='#e7e8f1');}
.submenu2{
position:relative;top:0px;left:0px;width:90%;border-left:#e0f8e3 3px groove;border-top:#e0f8e3 3px groove;border-right:#e0f8e3 3px groove;border-bottom:#e0f8e3 3px groove;padding-left:3px;padding-top:3px;padding-right:3px;padding-bottom:3px;margin-top:4px;display:none;background-color:#cff1d4;color:#2644b2;font-family:Verdana,Helvetica,Arial;font-weight:700;font-size:10px;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#bec1e4', endColorstr='#e7e8f1');}
.pulltab{
position:absolute;top:0px;left:0px;height:100%;width:20px;padding-left:2px;cursor:hand;color:#2644b2;font-family:Webdings;font-weight:bold;font-size:10px;z-index:5;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#e7e8f1', endColorstr='#2644b2');}
.inner{
height:100%;width:100%;}
.mtab{
position:relative;top:0px;
.btninner{
height:100%;width:100%;}
.fr{
position:absolute;top:0px;left:30px;}
    </style>
  </head>
  <body scroll="no">
    <div id="menubar" style="; HEIGHT: expression(document.body.offsetHeight); WIDTH: 223px">
      <div id="c0" class="r1" onClick="toggleMenu(this)" status="closed" menu="m0">
        <div id="cbtn" class="btninner">Behaviors</div>
        <div class="mtab">
          <table id="m0" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">
            <tr><td onClick="opTab();">DHTML Behaviours</td></tr>
            <tr><td onClick="opTab();">HTC Reference</td></tr>
            <tr><td onClick="opTab();">Element Behaviors</td></tr>
            <tr><td onClick="toggleSub('m0s0');">ViewLink Overview<span class="indicator">6</span>
                <table id="m0s0" class="submenu2" align="center" border="0" cellspacing="0" cellpadding="0" status="closed">
                  <tr><td onClick="opTab();">ViewLink CSS Inheritance</td></tr>
                </table></td></tr>
            <tr><td onClick="opTab();">Default Behaviors Reference</td></tr>
            <tr><td onClick="opTab();">Behaviors Library</td></tr>
            <tr><td onClick="opTab();">Using DHTML behaviors</td></tr>
            <tr><td onClick="opTab();">Implementing DHTML Behaviors in Script Using HTML Components</td></tr>
          </table>
        </div>
      </div>
      <div id="c1" class="r1" onClick="toggleMenu(this)" status="closed" menu="m1">
        <div id="cbtn" class="btninner">CSS</div>
        <div>
          <table id="m1" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">
            <tr><td onClick="opTab();">A Coast-to-Coast Cascade of Style Sheets</td></tr>
            <tr><td onClick="opTab();">Using Cascading Style Sheets</td></tr>
            <tr><td onClick="opTab();">Controlling Presentation with Measurement and Location Properties</td></tr>
            <tr><td onClick="opTab();">A User's Guide to Style Sheets</td></tr>
            <tr><td onClick="opTab();">Cascading Style Sheets in Internet Explorer 4.0</td></tr>
            <tr><td onClick="opTab();">New in CSS, Level 2</td></tr>
            <tr><td onClick="opTab();">CSS Positioning</td></tr>
            <tr><td onClick="opTab();">Linked Style Sheets</td></tr>
            <tr><td onClick="opTab();">Using Vertical Layout in Internet Explorer 5.5</td></tr>
            <tr><td onClick="opTab();">CSS Attributes Reference</td></tr>
            <tr><td onClick="opTab();">CSS Length Units Reference</td></tr>
            <tr><td onClick="opTab();">Tips</td></tr>
          </table>
        </div>
      </div>
      <div id="c2" class="r1" onClick="toggleMenu(this)" status="closed" menu="m2">
        <div id="cbtn" class="btninner">DHTML</div>
        <div>
          <table id="m2" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">
            <tr><td>DHTML 1</td></tr>
            <tr><td>DHTML 2</td></tr>
            <tr><td>DHTML 3</td></tr>
            <tr><td>DHTML 4</td></tr>
            <tr><td>DHTML 5</td></tr>
            <tr><td>DHTML 6</td></tr>
            <tr><td>DHTML 7</td></tr>
            <tr><td>DHTML 8</td></tr>
            <tr><td>DHTML 9</td></tr>
            <tr><td>DHTML 10</td></tr>
            <tr><td>DHTML 11</td></tr>
            <tr><td>DHTML 12</td></tr>
          </table>
        </div>
      </div>
      <div id="c3" class="r1" onClick="toggleMenu(this)" status="closed" menu="m3">
        <div id="cbtn" class="btninner">DOM</div>
        <div>
          <table id="m3" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">
            <tr><td>DOM 1</td></tr>
            <tr><td>DOM 2</td></tr>
            <tr><td>DOM 3</td></tr>
            <tr><td>DOM 4</td></tr>
            <tr><td>DOM 5</td></tr>
            <tr><td>DOM 6</td></tr>
            <tr><td>DOM 7</td></tr>
            <tr><td>DOM 8</td></tr>
            <tr><td>DOM 9</td></tr>
            <tr><td>DOM 10</td></tr>
            <tr><td>DOM 11</td></tr>
            <tr><td>DOM 12</td></tr>
          </table>
        </div>
      </div>
      <div id="c4" class="r1" onClick="toggleMenu(this)" status="closed" menu="m4">
        <div id="cbtn" class="btninner">站长特效网</div>
        <div>
          <table id="m4" class="submenu1" align="center" border="0" cellspacing="0" cellpadding="0">
            <tr><td><a href="http://zzjs.net/">网站首页</a></td></tr>
            <tr><td><a href="http://zzjs.net/?cat=1">站长特效</a></td></tr>
            <tr><td><a href="http://zzjs.net/?cat=2">网页特效</a></td></tr>
            <tr><td><a href="http://zzjs.net/?cat=11">广告代码</a></td></tr>
            <tr><td><a href="http://zzjs.net/">rss订阅</a></td></tr>
            <tr><td><a href="http://zzjs.net/">留言本</a></td></tr>
            <tr><td><a href="http://www.alixixi.com/">阿里西西</a></td></tr>
            <tr><td><a href="http://zzjs.net/?cat=2">您自定义</a></td></tr>
            <tr><td><a href="http://zzjs.net/?cat=2">您自定义</a></td></tr>
            <tr><td><a href="http://zzjs.net/?cat=2">您自定义</a></td></tr>
            <tr><td><a href="http://zzjs.net/?cat=2">您自定义</a></td></tr>
            <tr><td><a href="http://zzjs.net/?cat=2">您自定义</a></td></tr>
          </table>
        </div>
      </div>
    </div>
<div id="arrow" class="pulltab" onClick="opTab()"><table class="inner"><tr><td id="arr" valign="middle">4</td></tr></table></div>
    <div id="fr" name="fr" class="fr">
      <h2>左侧的变化菜单</h2>
    </div>
</body>
</html>

08
2013
10

DIV经典布局(仿框架布局)+左侧DIV菜单隐藏/展开,右侧DIV自适应大小

 

适合场景:

08
2013
10

实现DIV的任意角度旋转

DIV旋转属性的演示
旋转成功

 

06
2013
10

js 判断对象为空或者不是对象的方法

 

在写js脚本的时候经常遇到对象为空或者不是对象的情况,出现这种情况我们可以用if去判断它,然后去执行相应的处理方法,具体判断他们的方法有以下几种:

05
2013
10

JS 调用window.open 打开窗口最大化

 

<script type="text/javascript">
     
     var xpwidth=window.screen.width-10;
        var xpheight=window.screen.height-35;
 </script>

05
2013
10

html页面之间也可以传递参数

 1.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>html传递参数</title>
</head>

<body>
<a href="2.htm?id1=34&id2=tt">html传递若干参数</a>
</body>

05
2013
10

解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()

 

一,$.get(url,[data],[callback])

05
2013
10

JQuery AJAX (JS) .NET C# 返回JSON数据

 

页面JS代码: