JavaScript 经典效果集1

本文 23343 pv

JavaScript 经典效果集1

大家欣赏,收藏完之后,别忘了留一个自己珍藏的好代码,大家如果有空的话顶一下拉！谢谢。
一、些很实用且必用的小脚本代码:

脚本1:进入主页以后自动播放声音

运行代码

复制代码

脚本2:进入主页后自动最大话,省的去在自己单击了

运行代码

复制代码

脚本3:显示现在时间的脚本

运行代码

复制代码

脚本4:显示最后修改时间的脚本

运行代码

复制代码

脚本5:设为首页,加为收藏，加入频道,启动outlook发信

运行代码

复制代码

脚本6:状态栏动态显示现在时间

运行代码

复制代码

脚本7:关闭窗口的脚本

运行代码

复制代码

脚本8:按下F12键,直接返回首页

运行代码

复制代码

脚本9:后退,刷新,前进

运行代码

复制代码

脚本10:设定时间弹出窗口,4000=4秒,当然你可以自定义

运行代码

复制代码

二鼠标旁边的提示信息,类似与163登录后的页面提示效果

<a href="http://www.geekso.com" title="这是提示">tip</a> 
<script Language="JavaScript"> 
//***********默认设置定义.********************* 
tPopWait=50;//停留tWait豪秒后显示提示。 
tPopShow=5000;//显示tShow豪秒后关闭提示 
showPopStep=20; 
popOpacity=99; 
//***************内部变量定义***************** 
sPop=null; 
curShow=null; 
tFadeOut=null; 
tFadeIn=null; 
tFadeWaiting=null; 
document.write("<style type='text/css'id='defaultPopStyle'>"); 
document.write(".cPopText {  background-color: #F8F8F5;color:#000000; border: 1px #000000 solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}"); 
document.write("</style>"); 
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>"); 
function showPopupText(){ 
var o=event.srcElement; 
MouseX=event.x; 
MouseY=event.y; 
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""}; 
        if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""}; 
if(o.dypop!=sPop) { 
sPop=o.dypop; 
clearTimeout(curShow); 
clearTimeout(tFadeOut); 
clearTimeout(tFadeIn); 
clearTimeout(tFadeWaiting); 
if(sPop==null || sPop=="") { 
dypopLayer.innerHTML=""; 
dypopLayer.style.filter="Alpha()"; 
dypopLayer.filters.Alpha.opacity=0; 
} 
else { 
if(o.dyclass!=null) popStyle=o.dyclass  
else popStyle="cPopText"; 
curShow=setTimeout("showIt()",tPopWait); 
} 
} 
} 
function showIt(){ 
dypopLayer.className=popStyle; 
dypopLayer.innerHTML=sPop; 
popWidth=dypopLayer.clientWidth; 
popHeight=dypopLayer.clientHeight; 
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24 
else popLeftAdjust=0; 
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24 
else popTopAdjust=0; 
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust; 
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust; 
dypopLayer.style.filter="Alpha(Opacity=0)"; 
fadeOut(); 
} 
function fadeOut(){ 
if(dypopLayer.filters.Alpha.opacity<popOpacity) { 
dypopLayer.filters.Alpha.opacity+=showPopStep; 
tFadeOut=setTimeout("fadeOut()",1); 
} 
else { 
dypopLayer.filters.Alpha.opacity=popOpacity; 
tFadeWaiting=setTimeout("fadeIn()",tPopShow); 
} 
} 
function fadeIn(){ 
if(dypopLayer.filters.Alpha.opacity>0) { 
dypopLayer.filters.Alpha.opacity-=1; 
tFadeIn=setTimeout("fadeIn()",1); 
} 
} 
document.onmouseover=showPopupText; 
</script>

运行代码

复制代码

三如果文字过长,则将过长的部分变成省略号显示

运行代码

复制代码

四滚动的图片

运行代码

复制代码

五接收键盘指令的脚本

运行代码

复制代码

六让你的文本链接渐隐渐显

运行代码

复制代码

七类似与QQ的好友/黑名单之类的树型菜单_极品

运行代码

复制代码

八很多的脚本翻页

<!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=gb2312" />
<title> JavaScript: showPages v1.0 [by Lapuasi.com]</title>
<script language="JavaScript">
/*
showPages v1.1
=================================
Infomation
----------------------
Web : http://www.geekso.com
Date : 2005-11-17
Example
----------------------
var pg = new showPages('pg');
pg.pageCount = 12; //定义总页数(必要)
pg.argName = 'p';    //定义参数名(可选,缺省为page)
pg.printHtml();        //显示页数
Supported in Internet Explorer, Mozilla Firefox
*/
function showPages(name) { //初始化属性
  this.name = name;      //对象名称
  this.page = 1;         //当前页数
  this.pageCount = 1;    //总页数
  this.argName = 'page'; //参数名
  this.showTimes = 1;    //打印次数
}
showPages.prototype.getPage = function(){ //丛url获得当前页数,如果变量重复只获取最后一个
  var args = location.search;
  var reg = new RegExp('[?&]?' + this.argName + '=([^&]*)[&$]?', 'gi');
  var chk = args.match(reg);
  this.page = RegExp.$1;
}
showPages.prototype.checkPages = function(){ //进行当前页数和总页数的验证
  if (isNaN(parseInt(this.page))) this.page = 1;
  if (isNaN(parseInt(this.pageCount))) this.pageCount = 1;
  if (this.page < 1) this.page = 1;
  if (this.pageCount < 1) this.pageCount = 1;
  if (this.page > this.pageCount) this.page = this.pageCount;
  this.page = parseInt(this.page);
  this.pageCount = parseInt(this.pageCount);
}
showPages.prototype.createHtml = function(mode){ //生成html代码
  var strHtml = '', prevPage = this.page - 1, nextPage = this.page + 1;
  if (mode == '' &#124;&#124; typeof(mode) == 'undefined') mode = 0;
  switch (mode) {
    case 0 : //模式1 (页数,首页,前页,后页,尾页)
      strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
      strHtml += '<span class="number">';
      if (prevPage < 1) {
        strHtml += '<span title="First Page">&#171;</span>';
        strHtml += '<span title="Prev Page">&#139;</span>';
      } else {
        strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&#171;</a></span>';
        strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#139;</a></span>';
      }
      for (var i = 1; i <= this.pageCount; i++) {
        if (i > 0) {
          if (i == this.page) {
            strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
          } else {
            strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
          }
        }
      }
      if (nextPage > this.pageCount) {
        strHtml += '<span title="Next Page">&#155;</span>';
        strHtml += '<span title="Last Page">&#187;</span>';
      } else {
        strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#155;</a></span>';
        strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&#187;</a></span>';
      }
      strHtml += '</span><br />';
      break;
    case 1 : //模式1 (10页缩略,首页,前页,后页,尾页)
      strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
      strHtml += '<span class="number">';
      if (prevPage < 1) {
        strHtml += '<span title="First Page">&#171;</span>';
        strHtml += '<span title="Prev Page">&#139;</span>';
      } else {
        strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&#171;</a></span>';
        strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#139;</a></span>';
      }
      if (this.page % 10 ==0) {
        var startPage = this.page - 9;
      } else {
        var startPage = this.page - this.page % 10 + 1;
      }
      if (startPage > 10) strHtml += '<span title="Prev 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage - 1) + ');">...</a></span>';
      for (var i = startPage; i < startPage + 10; i++) {
        if (i > this.pageCount) break;
        if (i == this.page) {
          strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
        } else {
          strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
        }
      }
      if (this.pageCount >= startPage + 10) strHtml += '<span title="Next 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage + 10) + ');">...</a></span>';
      if (nextPage > this.pageCount) {
        strHtml += '<span title="Next Page">&#155;</span>';
        strHtml += '<span title="Last Page">&#187;</span>';
      } else {
        strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#155;</a></span>';
        strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&#187;</a></span>';
      }
      strHtml += '</span><br />';
      break;
    case 2 : //模式2 (前后缩略,页数,首页,前页,后页,尾页)
      strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
      strHtml += '<span class="number">';
      if (prevPage < 1) {
        strHtml += '<span title="First Page">&#171;</span>';
        strHtml += '<span title="Prev Page">&#139;</span>';
      } else {
        strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&#171;</a></span>';
        strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#139;</a></span>';
      }
      if (this.page != 1) strHtml += '<span title="Page 1"><a href="javascript:' + this.name + '.toPage(1);">[1]</a></span>';
      if (this.page >= 5) strHtml += '<span>...</span>';
      if (this.pageCount > this.page + 2) {
        var endPage = this.page + 2;
      } else {
        var endPage = this.pageCount;
      }
      for (var i = this.page - 2; i <= endPage; i++) {
        if (i > 0) {
          if (i == this.page) {
            strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
          } else {
            if (i != 1 && i != this.pageCount) {
              strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
            }
          }
        }
      }
      if (this.page + 3 < this.pageCount) strHtml += '<span>...</span>';
      if (this.page != this.pageCount) strHtml += '<span title="Page ' + this.pageCount + '"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">[' + this.pageCount + ']</a></span>';
      if (nextPage > this.pageCount) {
        strHtml += '<span title="Next Page">&#155;</span>';
        strHtml += '<span title="Last Page">&#187;</span>';
      } else {
        strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#155;</a></span>';
        strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&#187;</a></span>';
      }
      strHtml += '</span><br />';
      break;
    case 3 : //模式3 (箭头样式,首页,前页,后页,尾页) (only IE)
      strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
      strHtml += '<span class="arrow">';
      if (prevPage < 1) {
        strHtml += '<span title="First Page">9</span>';
        strHtml += '<span title="Prev Page">7</span>';
      } else {
        strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">9</a></span>';
        strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">7</a></span>';
      }
      if (nextPage > this.pageCount) {
        strHtml += '<span title="Next Page">8</span>';
        strHtml += '<span title="Last Page">:</span>';
      } else {
        strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">8</a></span>';
        strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">:</a></span>';
      }
      strHtml += '</span><br />';
      break;
    case 4 : //模式4 (下拉框)
      if (this.pageCount < 1) {
        strHtml += '<select name="toPage" disabled>';
        strHtml += '<option value="0">No Pages</option>';
      } else {
        var chkSelect;
        strHtml += '<select name="toPage" onchange="' + this.name + '.toPage(this);">';
        for (var i = 1; i <= this.pageCount; i++) {
          if (this.page == i) chkSelect=' selected="selected"';
          else chkSelect='';
          strHtml += '<option value="' + i + '"' + chkSelect + '>Pages: ' + i + ' / ' + this.pageCount + '</option>';
        }
      }
      strHtml += '</select>';
      break;
    case 5 : //模式5 (输入框)
      strHtml += '<span class="input">';
      if (this.pageCount < 1) {
        strHtml += '<input type="text" name="toPage" value="No Pages" class="itext" disabled="disabled">';
        strHtml += '<input type="button" name="go" value="GO" class="ibutton" disabled="disabled"></option>';
      } else {
        strHtml += '<input type="text" value="Input Page:" class="ititle" readonly="readonly">';
        strHtml += '<input type="text" id="pageInput' + this.showTimes + '" value="' + this.page + '" class="itext" title="Input page" onkeypress="return ' + this.name + '.formatInputPage(event);" onfocus="this.select()">';
        strHtml += '<input type="text" value=" / ' + this.pageCount + '" class="icount" readonly="readonly">';
        strHtml += '<input type="button" name="go" value="GO" class="ibutton" onclick="' + this.name + '.toPage(document.getElementById('pageInput' + this.showTimes + '').value);"></option>';
      }
      strHtml += '</span>';
      break;
    default :
      strHtml = 'Javascript showPage Error: not find mode ' + mode;
      break;
  }
  return strHtml;
}
showPages.prototype.createUrl = function (page) { //生成页面跳转url
  if (isNaN(parseInt(page))) page = 1;
  if (page < 1) page = 1;
  if (page > this.pageCount) page = this.pageCount;
  var url = location.protocol + '//' + location.host + location.pathname;
  var args = location.search;
  var reg = new RegExp('([?&]?)' + this.argName + '=[^&]*[&$]?', 'gi');
  args = args.replace(reg,'$1');
  if (args == '' &#124;&#124; args == null) {
    args += '?' + this.argName + '=' + page;
  } else if (args.substr(args.length - 1,1) == '?' &#124;&#124; args.substr(args.length - 1,1) == '&') {
      args += this.argName + '=' + page;
  } else {
      args += '&' + this.argName + '=' + page;
  }
  return url + args;
}
showPages.prototype.toPage = function(page){ //页面跳转
  var turnTo = 1;
  if (typeof(page) == 'object') {
    turnTo = page.options[page.selectedIndex].value;
  } else {
    turnTo = page;
  }
  self.location.href = this.createUrl(turnTo);
}
showPages.prototype.printHtml = function(mode){ //显示html代码
  this.getPage();
  this.checkPages();
  this.showTimes += 1;
  document.write('<div id="pages_' + this.name + '_' + this.showTimes + '" class="pages"></div>');
  document.getElementById('pages_' + this.name + '_' + this.showTimes).innerHTML = this.createHtml(mode);
  
}
showPages.prototype.formatInputPage = function(e){ //限定输入页数格式
  var ie = navigator.appName=="Microsoft Internet Explorer"?true:false;
  if(!ie) var key = e.which;
  else var key = event.keyCode;
  if (key == 8 &#124;&#124; key == 46 &#124;&#124; (key >= 48 && key <= 57)) return true;
  return false;
}
</script>
<style>
/* Pages Main Tyle */
.pages {
  color: #000000;
  cursor: default;
  font-size: 10px;
  font-family: Tahoma, Verdana;
  padding: 3px 0px 3px 0px;
}
.pages .count, .pages .number, .pages .arrow {
  color: #000000;
  font-size: 10px;
  background-color: #F7F7F7;
  border: 1px solid #CCCCCC;
}
/* Page and PageCount Style */
.pages .count {
  font-weight: bold;
  border-right: none;
  padding: 2px 10px 1px 10px;
}
/* Mode 0,1,2 Style (Number) */
.pages .number {
  font-weight: normal;
  padding: 2px 10px 1px 10px;
}
.pages .number a, .pages .number span {
  font-size: 10px;
}
.pages .number span {
  color: #999999;
  margin: 0px 3px 0px 3px;
}
.pages .number a {
  color: #000000;
  text-decoration: none;
}
.pages .number a:hover {
  color: #0000ff;
}
/* Mode 3 Style (Arrow) */
.pages .arrow {
  font-weight: normal;
  padding: 0px 5px 0px 5px;
}
.pages .arrow a, .pages .arrow span {
  font-size: 10px;
  font-family: Webdings;
}
.pages .arrow span {
  color: #999999;
  margin: 0px 5px 0px 5px;
}
.pages .arrow a {
  color: #000000;
  text-decoration: none;
}
.pages .arrow a:hover {
  color: #0000ff;
}
/* Mode 4 Style (Select) */
.pages select, .pages input {
  color: #000000;
  font-size: 10px;
  font-family: Tahoma, Verdana;
}
/* Mode 5 Style (Input) */
.pages .input input.ititle, .pages .input input.itext, .pages .input input.icount {
  color: #666666;
  font-weight: bold;
  background-color: #F7F7F7;
  border: 1px solid #CCCCCC;
}
.pages .input input.ititle {
  width: 70px;
  text-align: right;
  border-right: none;
}
.pages .input input.itext {
  width: 25px;
  color: #000000;
  text-align: right;
  border-left: none;
  border-right: none;
}
.pages .input input.icount {
  width: 35px;
  text-align: left;
  border-left: none;
}
.pages .input input.ibutton {
  height: 17px;
  color: #FFFFFF;
  font-weight: bold;
  font-family: Verdana;
  background-color: #999999;
  border: 1px solid #666666;
  padding: 0px 0px 2px 1px;
  margin-left: 2px;
  cursor: hand;
}
/* body */
body {
  font-size: 12px;
}
</style>
</head>
<body                    >
<script language="JavaScript">
var pg = new showPages('pg');
pg.pageCount =12;  // 定义总页数(必要)
//pg.argName = 'p';  // 定义参数名(可选,默认为page)
document.write('<br>Show Times: ' + pg.showTimes + ', Mood Default');
pg.printHtml();
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 0');
pg.printHtml(0);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 1');
pg.printHtml(1);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 2');
pg.printHtml(2);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 3 (only IE)');
pg.printHtml(3);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 4');
pg.printHtml(4);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 5');
pg.printHtml(5);
</script>
</body>
</html>

运行代码

复制代码

九 DIV的透明层实现

<body                   bgcolor="#ff0ddd">
<div id="Layer1" style="position:absolute; width:260px; height:115px; z-index:1; left: 50px; top: 77px; filter:Alpha(opacity=30)"> 
        <table width="96%" border="1" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#999999">
          <tr> 
                                
            <td height="25" bgcolor="#f5f5f5" class="13">你也可以在这里插入图片</td>
                              </tr>
                              <tr> 
                                
            <td height="20" bgcolor="#f5f5f5" class="12">你想注册地图名片吗</td>
                              </tr>
                              <tr> 
                                
            <td height="20" bgcolor="#f5f5f5" class="12">http://www.geekso.com</td>
                              </tr>
                              <tr>
                                
            <td height="20" bgcolor="#f5f5f5" class="12">EMAIL:lipeng@mapabc.com</td>
                              </tr>
                              <tr> 
                                
            <td height="20" bgcolor="#f5f5f5" class="12">地址</td>
                              </tr>
                              <tr> 
                                
            <td height="20" bgcolor="#f5f5f5" class="12">邮编</td>
                              </tr>
                            </table>
              </div>

运行代码

复制代码

十超级强大的表单验证

<title>表单验证类 Validator v1.01</title>
 <style>
 body,td{font:normal 12px Verdana;color:#333333}
 input,textarea,select,td{font:normal 12px Verdana;color:#333333;border:1px solid #999999;background:#ffffff}
 table{border-collapse:collapse;}
 td{padding:3px}
 input{height:20;}
 textarea{width:80%;height:50px;overfmin:auto;}
 form{display:inline}
 </style>
 <table align="center">
  <form name="theForm" id="demo" action="" method="get" onSubmit="return Validator.Validate(this,2)">
    <tr>
   <td>真实姓名：</td><td><input name="Name" dataType="Chinese" msg="真实姓名只允许中文"></td>
  </tr>
  <tr>
   <td>英文名：</td><td><input name="Nick" dataType="English" require="false" msg="英文名只允许英文字母"></td>
  </tr>
    <tr>
   <td>主页：</td><td><input name="Homepage" require="false" dataType="Url"   msg="非法的Url"></td>
  </tr>
  <tr>
   <td>密码：</td><td><input name="Password" dataType="SafeString"   msg="密码不符合安全规则" type="password"></td>
  </tr>
  <tr>
   <td>重复：</td><td><input name="Repeat" dataType="Repeat" to="Password" msg="两次输入的密码不一致" type="password"></td>
  </tr>
  <tr>
   <td>信箱：</td><td><input name="Email" dataType="Email" msg="信箱格式不正确"></td>
  </tr>
    <tr>
   <td>信箱：</td><td><input name="Email" dataType="Repeat" to="Email" msg="两次输入的信箱不一致"></td>
  </tr>
  <tr>
   <td>QQ：</td><td><input name="QQ" require="false" dataType="QQ" msg="QQ号码不存在"></td>
  </tr>
    <tr>
   <td>身份证：</td><td><input name="Card" dataType="IdCard" msg="身份证号码不正确"></td>
  </tr>
  <tr>
   <td>年龄：</td><td><input name="Year" dataType="Range" msg="年龄必须在18~28之间" min="18" max="28"></td>
  </tr>
   <tr>
   <td>年龄1：</td><td><input name="Year1" require="false" dataType="Compare" msg="年龄必须在18以上" to="18" operator="GreaterThanEqual"></td>
  </tr>
   <tr>
   <td>电话：</td><td><input name="Phone" require="false" dataType="Phone" msg="电话号码不正确"></td>
  </tr>
   <tr>
   <td>手机：</td><td><input name="Mobile" require="false" dataType="Mobile" msg="手机号码不正确"></td>
  </tr>
     <tr>
   <td>生日：</td><td><input name="Birthday" dataType="Date" format="ymd" msg="生日日期不存在"></td>
  </tr>
   <tr>
   <td>邮政编码：</td><td><input name="Zip" dataType="Custom" regexp="^[1-9]d{5}$" msg="邮政编码不存在"></td>
  </tr>
  <tr>
   <td>邮政编码：</td><td><input name="Zip1" dataType="Zip" msg="邮政编码不存在"></td>
  </tr>
  <tr>
   <td>操作系统：</td><td><select name="Operation" dataType="Require"  msg="未选择所用操作系统" ><option value="">选择您所用的操作系统</option><option value="Win98">Win98</option><option value="Win2k">Win2k</option><option value="WinXP">WinXP</option></select></td>
  </tr>
  <tr>
   <td>所在省份：</td><td>广东<input name="Province" value="1" type="radio">陕西<input name="Province" value="2" type="radio">浙江<input name="Province" value="3" type="radio">江西<input name="Province" value="4" type="radio" dataType="Group"  msg="必须选定一个省份" ></td>
  </tr>
  <tr>
   <td>爱好：</td><td>运动<input name="Favorite" value="1" type="checkbox">上网<input name="Favorite" value="2" type="checkbox">听音乐<input name="Favorite" value="3" type="checkbox">看书<input name="Favorite" value="4" type="checkbox"" dataType="Group" min="2" max="3"  msg="必须选择2~3种爱好"></td>
  </tr>
   <td>自我介绍：</td><td><textarea name="Description" dataType="Limit" max="10"  msg="自我介绍内容必须在10个字之内">中文是一个字</textarea></td>
  </tr>
     <td>自传：</td><td><textarea name="History" dataType="LimitB" min="3" max="10"  msg="自传内容必须在[3,10]个字节之内">中文是两个字节t</textarea></td>
  </tr>
  <tr>
   <td colspan="2"><input name="Submit" type="submit" value="确定提交"><input onClick="Validator.Validate(document.getElementById('demo'))" value="检验模式1" type="button"><input onClick="Validator.Validate(document.getElementById('demo'),2)" value="检验模式2" type="button"><input onClick="Validator.Validate(document.getElementById('demo'),3)" value="检验模式3" type="button"></td>
  </tr>
  </form>
 </table>
 <script>
 /*************************************************
  Validator v1.01
  code by 我佛山人
  wfsr@cunite.com
  http://www.cunite.com
*************************************************/
 Validator = {
  Require : /.+/,
  Email : /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/,
  Phone : /^(((d{3}))|(d{3}-))?((0d{2,3})|0d{2,3}-)?[1-9]d{6,7}$/,
  Mobile : /^(((d{3}))|(d{3}-))?13d{9}$/,
  Url : /^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/,
  IdCard : /^d{15}(d{2}[A-Za-z0-9])?$/,
  Currency : /^d+(.d+)?$/,
  Number : /^d+$/,
  Zip : /^[1-9]d{5}$/,
  QQ : /^[1-9]d{4,8}$/,
  Integer : /^[-+]?d+$/,
  Double : /^[-+]?d+(.d+)?$/,
  English : /^[A-Za-z]+$/,
  Chinese :  /^[u0391-uFFE5]+$/,
  UnSafe : /^(([A-Z]*|[a-z]*|d*|[-_~!@#$%^&*.()[]{}<>?\/'"]*)|.{0,5})$|s/,
  IsSafe : function(str){return !this.UnSafe.test(str);},
  SafeString : "this.IsSafe(value)",
  Limit : "this.limit(value.length,getAttribute('min'),  getAttribute('max'))",
  LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))",
  Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))",
  Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value",
  Range : "getAttribute('min') < value && value < getAttribute('max')",
  Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))",
  Custom : "this.Exec(value, getAttribute('regexp'))",
  Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))",
  ErrorItem : [document.forms[0]],
  ErrorMessage : ["以下原因导致提交失败：tttt"],
  Validate : function(theForm, mode){
    var obj = theForm || event.srcElement;
    var count = obj.elements.length;
    this.ErrorMessage.length = 1;
    this.ErrorItem.length = 1;
    this.ErrorItem[0] = obj;
    for(var i=0;i<count;i++){
      with(obj.elements[i]){
        var _dataType = getAttribute("dataType");
        if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined")  continue;
        this.ClearState(obj.elements[i]);
        if(getAttribute("require") == "false" && value == "") continue;
        switch(_dataType){
          case "Date" :
          case "Repeat" :
          case "Range" :
          case "Compare" :
          case "Custom" :
          case "Group" : 
          case "Limit" :
          case "LimitB" :
          case "SafeString" :
            if(!eval(this[_dataType]))  {
              this.AddError(i, getAttribute("msg"));
            }
            break;
          default :
            if(!this[_dataType].test(value)){
              this.AddError(i, getAttribute("msg"));
            }
            break;
        }
      }
    }
    if(this.ErrorMessage.length > 1){
      mode = mode || 1;
      var errCount = this.ErrorItem.length;
      switch(mode){
      case 2 :
        for(var i=1;i<errCount;i++)
          this.ErrorItem[i].style.color = "red";
      case 1 :
        alert(this.ErrorMessage.join("n"));
        this.ErrorItem[1].focus();
        break;
      case 3 :
        for(var i=1;i<errCount;i++){
        try{
          var span = document.createElement("SPAN");
          span.id = "__ErrorMessagePanel";
          span.style.color = "red";
          this.ErrorItem[i].parentNode.appendChild(span);
          span.innerHTML = this.ErrorMessage[i].replace(/d+:/,"*");
          }
          catch(e){alert(e.description);}
        }
        this.ErrorItem[1].focus();
        break;
      default :
        alert(this.ErrorMessage.join("n"));
        break;
      }
      return false;
    }
    return true;
  },
  limit : function(len,min, max){
    min = min || 0;
    max = max || Number.MAX_VALUE;
    return min <= len && len <= max;
  },
  LenB : function(str){
    return str.replace(/[^x00-xff]/g,"**").length;
  },
  ClearState : function(elem){
    with(elem){
      if(style.color == "red")
        style.color = "";
      var lastNode = parentNode.childNodes[parentNode.childNodes.length-1];
      if(lastNode.id == "__ErrorMessagePanel")
        parentNode.removeChild(lastNode);
    }
  },
  AddError : function(index, str){
    this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index];
    this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str;
  },
  Exec : function(op, reg){
    return new RegExp(reg,"g").test(op);
  },
  compare : function(op1,operator,op2){
    switch (operator) {
      case "NotEqual":
        return (op1 != op2);
      case "GreaterThan":
        return (op1 > op2);
      case "GreaterThanEqual":
        return (op1 >= op2);
      case "LessThan":
        return (op1 < op2);
      case "LessThanEqual":
        return (op1 <= op2);
      default:
        return (op1 == op2);            
    }
  },
  MustChecked : function(name, min, max){
    var groups = document.getElementsByName(name);
    var hasChecked = 0;
    min = min || 1;
    max = max || groups.length;
    for(var i=groups.length-1;i>=0;i--)
      if(groups[i].checked) hasChecked++;
    return min <= hasChecked && hasChecked <= max;
  },
  IsDate : function(op, formatString){
    formatString = formatString || "ymd";
    var m, year, month, day;
    switch(formatString){
      case "ymd" :
        m = op.match(new RegExp("^((\d{4})|(\d{2}))([-./])(\d{1,2})\4(\d{1,2})$"));
        if(m == null ) return false;
        day = m[6];
        month = m[5]--;
        year =  (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10));
        break;
      case "dmy" :
        m = op.match(new RegExp("^(\d{1,2})([-./])(\d{1,2})\2((\d{4})|(\d{2}))$"));
        if(m == null ) return false;
        day = m[1];
        month = m[3]--;
        year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));
        break;
      default :
        break;
    }
    if(!parseInt(month)) return false;
    month = month==12 ?0:month;
    var date = new Date(year, month, day);
        return (typeof(date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate());
    function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;}
  }
 }
</script>

运行代码

复制代码

十一漂亮的脚本日历

<Script LANGUAGE="JavaScript">
 var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一", "十二");
 var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);
 var days = new Array("日","一", "二", "三","四", "五", "六");
 var classTemp;
 var today=new getToday();
 var year=today.year;
 var month=today.month;
 var newCal; 
 function getDays(month, year) {
  if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) ||(0 == year % 400) ? 29 : 28;
  else return daysInMonth[month];
 }
 function getToday() {
  this.now = new Date();
  this.year = this.now.getFullYear();
  this.month = this.now.getMonth();
  this.day = this.now.getDate();
 }
 function Calendar() {
  newCal = new Date(year,month,1);
  today = new getToday();   
  var day = -1;
  var startDay = newCal.getDay();
  var endDay=getDays(newCal.getMonth(), newCal.getFullYear());
  var daily = 0;
  if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth()))
  {
   day = today.day;
  }
  var caltable = document.all.caltable.tBodies.calendar;
  var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());
  for (var intWeek = 0; intWeek < caltable.rows.length;intWeek++)
   for (var intDay = 0;intDay < caltable.rows[intWeek].cells.length;intDay++)
   {
    var cell = caltable.rows[intWeek].cells[intDay];
    var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1);         
    if ((intDay == startDay) && (0 == daily)){ daily = 1;}
    var daytemp=daily<10?("0"+daily):(daily);
    var d="<"+newCal.getFullYear()+"-"+montemp+"-"+daytemp+">";
    if(day==daily) cell.className="DayNow";
    else if(intDay==6) cell.className = "DaySat";
    else if (intDay==0) cell.className ="DaySun";
    else cell.className="Day";
    if ((daily > 0) && (daily <= intDaysInMonth))
    {
     cell.innerText = daily;
     daily++;
    } else
    {
     cell.className="CalendarTD";
     cell.innerText = "";
    }
  }
  document.all.year.value=year;
  document.all.month.value=month+1;
 }
 function subMonth()
 {
  if ((month-1)<0)
  {
   month=11;
   year=year-1;
  } else
  {
   month=month-1;
  }
  Calendar();
 }
 function addMonth()
 {
  if((month+1)>11)
  {
   month=0;
   year=year+1;
  } else
  {
   month=month+1;
  }
  Calendar();
 }
 function setDate() 
 {
  if (document.all.month.value<1||document.all.month.value>12)
  {
   alert("月的有效范围在1-12之间!");
   return;
  }
  year=Math.ceil(document.all.year.value);
  month=Math.ceil(document.all.month.value-1);
  Calendar();
 }
</Script>
<Script>
function buttonOver()
{
 var obj = window.event.srcElement;
 obj.runtimeStyle.cssText = "background-color:#FFFFFF";
// obj.className="Hover";
}
function buttonOut()
{
 var obj = window.event.srcElement;
 window.setTimeout(function(){obj.runtimeStyle.cssText = "";},300);
}
</Script>
<Style>
Input {font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000;}
.Calendar {font-family: verdana;text-decoration: none;width: 170;background-color: #C0D0E8;font-size: 9pt;border:0px dotted #1C6FA5;}
.CalendarTD {font-family: verdana;font-size: 7pt;color: #000000;background-color:#f6f6f6;height: 20px;width:11%;text-align: center;}
.Title {font-family: verdana;font-size: 11pt;font-weight: normal;height: 24px;text-align: center;color: #333333;text-decoration: none;background-color: #A4B9D7;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-bottom-style:1px;border-top-color: #999999;border-right-color: #999999;border-bottom-color: #999999;border-left-color: #999999;}
.Day {font-family: verdana;font-size: 7pt;color:#243F65;background-color: #E5E9F2;height: 20px;width:11%;text-align: center;}
.DaySat {font-family: verdana;font-size: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}
.DaySun {font-family: verdana;font-size: 7pt;color: #FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}
.DayNow {font-family: verdana;font-size: 7pt;font-weight: bold;color: #000000;background-color: #FFFFFF;height: 20px;text-align: center;}
.DayTitle {font-family: verdana;font-size: 9pt;color: #000000;background-color: #C0D0E8;height: 20px;width:11%;text-align: center;}
.DaySatTitle {font-family: verdana;font-size: 9pt;color:#FF0000;text-decoration: none;background-color:#C0D0E8;text-align: center;height: 20px;width: 12%;}
.DaySunTitle {font-family: verdana;font-size: 9pt;color: #FF0000;text-decoration: none;background-color: #C0D0E8;text-align: center;height: 20px;width: 12%;}
.DayButton {font-family: Webdings;font-size: 9pt;font-weight: bold;color: #243F65;cursor:hand;text-decoration: none;}
</Style>
<table border="0" cellpadding="0" cellspacing="1" class="Calendar" id="caltable">
<thead>
     <tr align="center" valign="middle"> 
  <td colspan="7" class="Title">
   <a href="javaScript:subMonth();" title="上一月" Class="DayButton">3</a> <input name="year" type="text" size="4" maxlength="4" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"  onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 年 <input name="month" type="text" size="1" maxlength="2" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"  onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 月 <a href="JavaScript:addMonth();" title="下一月" Class="DayButton">4</a>
  </td>
 </tr>
 <tr align="center" valign="middle"> 
  <Script LANGUAGE="JavaScript">  
   document.write("<TD class=DaySunTitle id=diary >" + days[0] + "</TD>"); 
   for (var intLoop = 1; intLoop < days.length-1;intLoop++) 
    document.write("<TD class=DayTitle id=diary>" + days[intLoop] + "</TD>"); 
    document.write("<TD class=DaySatTitle id=diary>" + days[intLoop] + "</TD>"); 
  </Script>
 </TR> 
</thead>
<TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()">
 <Script LANGUAGE="JavaScript">
  for (var intWeeks = 0; intWeeks < 6; intWeeks++)
  {
   document.write("<TR style='cursor:hand'>");
   for (var intDays = 0; intDays < days.length;intDays++) document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>");
   document.write("</TR>");
  } 
 </Script>
</TBODY>
</TABLE>
<Script  LANGUAGE="JavaScript">
 Calendar();
</Script>

运行代码

复制代码

十二很酷的效果,表格被选中回变颜色

运行代码

复制代码

十三弹出提示的效果

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>cao888---提示</title>
</head>
<body              >
<script language=javascript>
var cao_x,cao_y;
function cao888() 
{
this.display=display; 
}
function display() 
{
  document.write("<table align=center><tr><td><button style='width:100px;height:30px;font-size:12px;border:1px solid #A4B3C8;background-color:green;' type=button onclick=document.getElementById('cao1').style.display='block' onfocus=this.blur()>CAO留言</button></td></tr></table>");
  document.write("<div  id='cao1' style='font-size:12px;position:absolute;display:none;text-align:center;overflow:visible'>");
  document.write("<div style='position:absolute;top:expression((body.clientHeight-300)/2);left:expression((body.clientWidth-200)/2);width:200px;height:180px;background-color:#dbdbdb;border:1px solid #cccccc;'>");
  document.write("<table width=200 height=20 bgcolor=green onmousedown='cao_x=event.x-parentNode.style.pixelLeft;cao_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='caoMove(this.parentNode)' style='cursor:move;'>");
  document.write("<tr align=center>");
  document.write("<td align=left>提示:CAO888</td>");
  document.write("</tr>");
  document.write("</table>");
  document.write("<span style= cursor:hand onclick=this.parentNode.parentNode.style.display='none';><img src='http://pic1.blueidea.com/bbs/topic5.gif'><br>CAO呀,错误了...<br>[确定]</span>");
  document.write("  </div>");
  document.write("</div>");
}
function caoMove(obj)  //实现层的拖移
{
  if(event.button==1)
  {
    var caoX=obj.clientLeft;
    var caoY=obj.clientTop;
    obj.style.pixelLeft=caoX+(event.x-cao_x);
    obj.style.pixelTop=caoY+(event.y-cao_y);
  }
}
</script>
<script language=javascript>
var mycao=new cao888();
mycao.display();
</script>
</body>
</html>

运行代码

复制代码

十四图片之间的切换

运行代码

复制代码

十五 DIV_圆边圆角的实现

运行代码

复制代码

十六跳动的菜单

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>模仿as效果的导航菜单</title>
<style type="text/css">
a:link,a:visited    { text-decoration: none; color: #666666 }
a:hover            { text-decoration: underline }
#hor1 {
    position:absolute;
    left:320px;
    top:20px;
    width:220px;
    height:20px;
    z-index:1;
    background-color: #999900;
}
#hor2 {
    position:absolute;
    left:320px;
    top:40px;
    width:220px;
    height:20px;
    z-index:2;
    background-color: #FFCC00;
}
#hor3 {
    position:absolute;
    left:320px;
    top:60px;
    width:220px;
    height:20px;
    z-index:3;
    background-color: #99CC00;
}
#board1 {
    position:absolute;
    left:320px;
    top:40px;
    width:220px;
    height:120px;
    z-index:-100;
    background-color: #333333;
    visibility: hidden;
}
body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: bold;
}
body {
    background-color: #666666;
}
#board2 {
    position:absolute;
    left:320px;
    top:60px;
    width:220px;
    height:120px;
    z-index:-90;
    background-color: #333333;
    visibility: hidden;
}
#board3 {
    position:absolute;
    width:220px;
    height:120px;
    z-index:-80;
    left: 320px;
    top: 80px;
    background-color: #333333;
    visibility: hidden;
}
#hor4 {
    position:absolute;
    left:320px;
    top:80px;
    width:220px;
    height:20px;
    z-index:4;
    background-color: #99CCCC;
}
#board4 {
    position:absolute;
    left:320px;
    top:100px;
    width:220px;
    height:120px;
    z-index:-70;
    background-color: #333333;
    visibility: hidden;
}
</style>
<script type="text/javascript">
lastNo=0
function re(menu_no){
if(lastNo!=menu_no){
cur=menu_no+1
lastNo=menu_no
rest()
}else{
cur=100
}
document.getElementById("board"+menu_no).style.visibility="visible"
}
function rest(){
for(i=1;i<=4;i++){
document.getElementById("hor"+i).style.top=20*i;
document.getElementById("board"+i).style.visibility="hidden"
}
menu_num=4;
 act=1
 height=120+20
 speed=0;
 posY=0;
}
function huke(){
if(act==1&&cur<100){
speed=(height-posY)*0.69+speed*0.6
posY+=speed
for(i=cur;i<=menu_num;i++){
document.getElementById("hor"+i).style.top=posY+(i-2)*20
}
if(Math.abs(height-posY)<0.5){
for(i=cur;i<=menu_num;i++){
document.getElementById("hor"+i).style.top=height+(i-2)*20
}
act=0
}
setTimeout("huke()",50)
}
}
</script>
</head>
<body           >
<div id="hor1" onclick="re(1);huke()">News</div>
<div id="hor2" onclick="re(2);huke()">Populor</div>
<div id="hor3" onclick="re(3);huke()">Sports</div>
<div id="hor4" onclick="re(4);huke()">Woman</div>
<div id="board1">1.由AS而想起Javascript<br />2.用Jscript写ASP有没有先天性的不足？<br />3.没有了。</div>
<div id="board2">1.xhtml+css真的来了吗？<br />2.Flash取代传统网站<br />3.Flash何时才能连接数据库？</div>
<div id="board3">1.程序员与小姐的10个相同。<br />2.中国的程序员与中国的足球？</div>
<div id="board4">1.二十一世纪最缺的是什么?人才<br />
<a href="http://www.gamvan.com" target="_blank">http://www.gamvan.com</a>
<a href="http://www.gamvan.com" target="_blank">http://www.gamvan.com</a></div>
</body>
</html>

运行代码

复制代码

十七客户端静态页面玩分页

<!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>
* {
  font-size:10.2pt;
  font-family:tahoma;
  line-height:150%;
}
.divContent
{
  border:1px solid red;
  background-color:#FFD2D3;
  width:500px;
  word-break:break-all;
  margin:10px 0px 10px;
  padding:10px;
}
</style>
</HEAD>
<BODY>
header
<div id="divPagenation"></div>
<div id="divContent"></div>
footer
<SCRIPT LANGUAGE="JavaScript">
s="<p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p>";
function DHTMLpagenation(content) { with (this)
{
  // client static html file pagenation
  this.content=content;
  this.contentLength=content.length;
  this.pageSizeCount;
  this.perpageLength=100; //default perpage byte length.
  this.currentPage=1;
  //this.regularExp=/.+[?&]{1}page=(d+)/;
  this.regularExp=/d+/;
  this.divDisplayContent;
  this.contentStyle=null;
  this.strDisplayContent="";
  this.divDisplayPagenation;
  this.strDisplayPagenation="";
  
  arguments.length==2?perpageLength=arguments[1]:'';
  try {
    divExecuteTime=document.createElement("DIV");
    document.body.appendChild(divExecuteTime);
  }
  catch(e)
  {
  }
  if(document.getElementById("divContent"))
  {
    divDisplayContent=document.getElementById("divContent");
  }
  else
  {
    try
    {
      divDisplayContent=document.createElement("DIV");
      divDisplayContent.id="divContent";
      document.body.appendChild(divDisplayContent);
    }
    catch(e)
    {
      return false;
    }
  }
  if(document.getElementById("divPagenation"))
  {
    divDisplayPagenation=document.getElementById("divPagenation");
  }
  else
  {
    try
    {
      divDisplayPagenation=document.createElement("DIV");
      divDisplayPagenation.id="divPagenation";
      document.body.appendChild(divDisplayPagenation);
    }
    catch(e)
    {
      return false;
    }
  }
  DHTMLpagenation.initialize();
  return this;
  
}};
DHTMLpagenation.initialize=function() { with (this)
{
  divDisplayContent.className=contentStyle!=null?contentStyle:"divContent";
  if(contentLength<=perpageLength)
  {
    strDisplayContent=content;
    divDisplayContent.innerHTML=strDisplayContent;
    return null;
  }
  pageSizeCount=Math.ceil((contentLength/perpageLength));
  DHTMLpagenation.goto(currentPage);
  DHTMLpagenation.displayContent();
}};
DHTMLpagenation.displayPage=function() { with (this)
{
  strDisplayPagenation="分页：";
  if(currentPage&&currentPage!=1)
    strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.previous()">上一页</a>  ';
  else
    strDisplayPagenation+="上一页  ";
  for(var i=1;i<=pageSizeCount;i++)
  {
    if(i!=currentPage)
      strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');">'+i+'</a>  ';
    else
      strDisplayPagenation+=i+"  ";
  }
  if(currentPage&&currentPage!=pageSizeCount)
    strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一页</a>  ';
  else
    strDisplayPagenation+="下一页  ";
  strDisplayPagenation+="共 " + pageSizeCount + " 页，每页" + perpageLength + " 字符，调整字符数：<input type='text' value='"+perpageLength+"' id='ctlPerpageLength'><input type='button' value='确定' onclick='DHTMLpagenation.change(document.getElementById("ctlPerpageLength").value);'>";
  divDisplayPagenation.innerHTML=strDisplayPagenation;
}};
DHTMLpagenation.previous=function() { with(this)
{
  DHTMLpagenation.goto(currentPage-1);
}};
DHTMLpagenation.next=function() { with(this)
{
  DHTMLpagenation.goto(currentPage+1);
}};
DHTMLpagenation.goto=function(iCurrentPage) { with (this)
{
  startime=new Date();
  if(regularExp.test(iCurrentPage))
  {
    currentPage=iCurrentPage;
    strDisplayContent=content.substr((currentPage-1)*perpageLength,perpageLength);
  }
  else
  {
    alert("page parameter error!");
  }
  DHTMLpagenation.displayPage();
  DHTMLpagenation.displayContent();
}};
DHTMLpagenation.displayContent=function() { with (this)
{
  divDisplayContent.innerHTML=strDisplayContent;
}};
DHTMLpagenation.change=function(iPerpageLength) { with(this)
{
  if(regularExp.test(iPerpageLength))
  {
    DHTMLpagenation.perpageLength=iPerpageLength;
    DHTMLpagenation.currentPage=1;
    DHTMLpagenation.initialize();
  }
  else
  {
    alert("请输入数字");
  }
}};
// method
// DHTMLpagenation(strContent,perpageLength)
DHTMLpagenation(s,100);
</SCRIPT>
</BODY>
</HTML>

运行代码

复制代码

十八 js实现层移动

<html>
<head>
<title>DRAG the DIV</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
*{font-size:12px}
.dragTable{
  font-size:12px;
  border-top:1px solid #3366cc;
  margin-bottom: 10px;
  width:100%;
  background-color:#FFFFFF;
}
td{vertical-align:top;}
.dragTR{
  cursor:move;
  color:#7787cc;
  background-color:#e5eef9;
  height:20px;
  padding-left:5px;
  font-weight:bold;
}
#parentTable{
  border-collapse:collapse;
  letter-spacing:25px;
}
</style>
<script defer>
/****JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11:09 2006-2-9******/
  var Drag={dragged:false,
    ao:null,
    tdiv:null,
dragStart:function(){
  Drag.ao=event.srcElement;
  if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){
    Drag.ao=Drag.ao.offsetParent;
    Drag.ao.style.zIndex=100;
  }else
    return;
  Drag.dragged=true;
  Drag.tdiv=document.createElement("div");
  Drag.tdiv.innerHTML=Drag.ao.outerHTML;
  Drag.ao.style.border="1px dashed red";
  Drag.tdiv.style.display="block";
  Drag.tdiv.style.position="absolute";
  Drag.tdiv.style.filter="alpha(opacity=70)";
  Drag.tdiv.style.cursor="move";
  Drag.tdiv.style.border="1px solid #000000";
  Drag.tdiv.style.width=Drag.ao.offsetWidth;
  Drag.tdiv.style.height=Drag.ao.offsetHeight;
  Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
  Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
  document.body.appendChild(Drag.tdiv);
  Drag.lastX=event.clientX;
  Drag.lastY=event.clientY;
  Drag.lastLeft=Drag.tdiv.style.left;
  Drag.lastTop=Drag.tdiv.style.top;
},
 draging:function(){//重要:判断MOUSE的位置
  if(!Drag.dragged||Drag.ao==null)return;
  var tX=event.clientX;
  var tY=event.clientY;
  Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
  Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
  for(var i=0;i<parentTable.cells.length;i++){
    var parentCell=Drag.getInfo(parentTable.cells[i]);
    if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
      var subTables=parentTable.cells[i].getElementsByTagName("table");
      if(subTables.length==0){
        if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
          parentTable.cells[i].appendChild(Drag.ao);
        }
        break;
      }
      for(var j=0;j<subTables.length;j++){
        var subTable=Drag.getInfo(subTables[j]);
        if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){
          parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
          break;
        }else{
          parentTable.cells[i].appendChild(Drag.ao);
        }  
      }
    }
  }
}
,
 dragEnd:function(){
  if(!Drag.dragged)return;
  Drag.dragged=false;
  Drag.mm=Drag.repos(150,15);
  Drag.ao.style.borderWidth="0px";
  Drag.ao.style.borderTop="1px solid #3366cc";
  Drag.tdiv.style.borderWidth="0px";
  Drag.ao.style.zIndex=1;
},
getInfo:function(o){//取得坐标
  var to=new Object();
  to.left=to.right=to.top=to.bottom=0;
  var twidth=o.offsetWidth;
  var theight=o.offsetHeight;
  while(o!=document.body){
    to.left+=o.offsetLeft;
    to.top+=o.offsetTop;
    o=o.offsetParent;
  }
    to.right=to.left+twidth;
    to.bottom=to.top+theight;
  return to;
},
repos:function(aa,ab){
  var f=Drag.tdiv.filters.alpha.opacity;
  var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
  var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
  var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
  var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
  var kf=f/ab;
  return setInterval(function(){if(ab<1){
              clearInterval(Drag.mm);
              Drag.tdiv.removeNode(true);
              Drag.ao=null;
              return;
            }
          ab--;
          tl-=kl;
          tt-=kt;
          f-=kf;
          Drag.tdiv.style.left=parseInt(tl)+"px";
          Drag.tdiv.style.top=parseInt(tt)+"px";
          Drag.tdiv.filters.alpha.opacity=f;
        }
,aa/ab)
},
 inint:function(){//初始化
  for(var i=0;i<parentTable.cells.length;i++){
    var subTables=parentTable.cells[i].getElementsByTagName("table");
    for(var j=0;j<subTables.length;j++){
      if(subTables[j].className!="dragTable")break;
      subTables[j].rows[0].className="dragTR";
      subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);
    }
  }
  document.onmousemove=Drag.draging;
  document.onmouseup=Drag.dragEnd;
}
//end of Object Drag
}
Drag.inint();
function _show(str){
  var w=window.open('','');
  var d=w.document;
  d.open();
  str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"="$1"$2");
  str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");
  str=str.replace(/r/g,"<br />n");
  d.write(str);
}
</script>
</head>
<body        >
<table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable">
<tr >
  <td width="25%" valgin="top">
    <table border=0 class="dragTable" cellspacing="0">
      <tr>
        <td><b>GMAIL</b></td>
      </tr>
      <tr>
        <td>暂时无法显示GMAIL内容</td>
      <tr>
    </table><table border=0 class="dragTable" cellspacing="0">
      <tr>
        <td>新浪体育</td>
      </tr>
      <tr>
        <td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步
 印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角 美加施冷箭</td>
      <tr>
    </table>
    <table border=0 class="dragTable" cellspacing="0">
      <tr>
        <td>焦点</td>
      </tr>
      <tr>
        <td>京广线中断4小时20临客返汉晚点 中国新闻网-湖北分社 - 所有 235 相关报道 »哈马斯已有总理人选 
                解放日报报业集团 - 所有 489 相关报道 »陈水扁是两岸关系麻烦制造者 武汉晨报 - 所有 179 相关报道 »</td>
      <tr>
    </table>
  </td>
  <td width="25%">
    <table border=0 class="dragTable" cellspacing="0">
      <tr>
        <td>中关村在线</td>
      </tr>
      <tr>
        <td>新年行情速递 双敏板卡低价推荐 终于等到了，映泰6600GT一降降一百 罗技G15游戏键盘热力促销，代购价仅529元 </td>
      <tr>
    </table></td>
  <td width="25%">
    <table border=0 class="dragTable" cellspacing="0">
      <tr>
        <td>网易商业</td>
      </tr>
      <tr>
        <td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
      <tr>
    </table>    <table border=0 class="dragTable" cellspacing="0">
      <tr>
        <td>黑可天下</td>
      </tr>
      <tr>
        <td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
      <tr>
    </table>
  </td>
</tr>
</table>
<input type="button" value="SHOW" onClick="_show(document.documentElement.innerHTML)" />
</body>
</html>

运行代码

复制代码

十九漂亮的表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Tables</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
/* CSS Document */
body {
  font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  color: #4f6b72;
  background: #E6EAE9;
}
a {
  color: #c75f3e;
}
#mytable {
  width: 700px;
  padding: 0;
  margin: 0;
}
caption {
  padding: 0 0 5px 0;
  width: 700px;   
  font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  text-align: right;
}
th {
  font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  color: #4f6b72;
  border-right: 1px solid #C1DAD7;
  border-bottom: 1px solid #C1DAD7;
  border-top: 1px solid #C1DAD7;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: left;
  padding: 6px 6px 6px 12px;
  background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}
th.nobg {
  border-top: 0;
  border-left: 0;
  border-right: 1px solid #C1DAD7;
  background: none;
}
td {
  border-right: 1px solid #C1DAD7;
  border-bottom: 1px solid #C1DAD7;
  background: #fff;
  font-size:11px;
  padding: 6px 6px 6px 12px;
  color: #4f6b72;
}
td.alt {
  background: #F5FAFA;
  color: #797268;
}
th.spec {
  border-left: 1px solid #C1DAD7;
  border-top: 0;
  background: #fff url(images/bullet1.gif) no-repeat;
  font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
  border-left: 1px solid #C1DAD7;
  border-top: 0;
  background: #f5fafa url(images/bullet2.gif) no-repeat;
  font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  color: #797268;
}
/*---------for IE 5.x bug*/
html>body td{ font-size:11px;}
</style>
<body       >
<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
<caption> </caption>
  <tr>
    <th scope="col" abbr="Configurations" class="nobg">Configurations</th>
    <th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
    <th scope="col" abbr="Dual 2">Dual 2GHz</th>
  <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>
  </tr>
  <tr>
    <th scope="row" abbr="Model" class="spec">lipeng</th>
    <td>M9454LL/A</td>
    <td>M9455LL/A</td>
    <td>M9457LL/A</td>
  </tr>
  <tr>
    <th scope="row" abbr="G5 Processor" class="specalt">mapabc</th>
    <td class="alt">Dual 1.8GHz PowerPC G5</td>
    <td class="alt">Dual 2GHz PowerPC G5</td>
    <td class="alt">Dual 2.5GHz PowerPC G5</td>
  </tr>
  <tr>
    <th scope="row" abbr="Frontside bus" class="spec">地图名片</th>
    <td>900MHz per processor</td>
    <td>1GHz per processor</td>
    <td>1.25GHz per processor</td>
  </tr>
  <tr>
    <th scope="row" abbr="L2 Cache" class="specalt">图秀卡</th>
    <td class="alt">512K per processor</td>
    <td class="alt">512K per processor</td>
    <td class="alt">512K per processor</td>
  </tr>
</table>
</body>
</html>

运行代码

复制代码

二十经典的带阴影的可拖动的浮动层

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyPixbot</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v4.01
  //Copyright 1998 Macromedia, Inc. All rights reserved.
  var i,j,aLayer,retVal,curDrag=null,curLeft,curTop,IE=document.all,NS4=document.layers;
  var NS6=(!IE&&document.getElementById), NS=(NS4||NS6); if (!IE && !NS) return false;
  retVal = true; if(IE && event) event.returnValue = true;
  if (MM_dragLayer.arguments.length > 1) {
    curDrag = MM_findObj(objName); if (!curDrag) return false;
    if (!document.allLayers) { document.allLayers = new Array();
      with (document) if (NS4) { for (i=0; i<layers.length; i++) allLayers[i]=layers[i];
        for (i=0; i<allLayers.length; i++) if (allLayers[i].document && allLayers[i].document.layers)
          with (allLayers[i].document) for (j=0; j<layers.length; j++) allLayers[allLayers.length]=layers[j];
      } else {
        if (NS6) { var spns = getElementsByTagName("span"); var all = getElementsByTagName("div"); 
          for (i=0;i<spns.length;i++) if (spns[i].style&&spns[i].style.position) allLayers[allLayers.length]=spns[i];}
        for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i]; 
    } }
    curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
    curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
    curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
    curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
    curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
    curDrag.MM_oldZ = (NS4)?curDrag.zIndex:curDrag.style.zIndex;
    curLeft= (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft; 
    if (String(curLeft)=="NaN") curLeft=0; curDrag.MM_startL = curLeft;
    curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop; 
    if (String(curTop)=="NaN") curTop=0; curDrag.MM_startT = curTop;
    curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop-cU;
    curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop+cD;
    curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
    document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
    if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
  } else {
    var theEvent = ((NS)?objName.type:event.type);
    if (theEvent == 'mousedown') {
      var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
      var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
      var maxDragZ=null; document.MM_maxZ = 0;
      for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
        var aLayerZ = (NS4)?aLayer.zIndex:parseInt(aLayer.style.zIndex);
        if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
        var isVisible = (((NS4)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
        if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
          var parentL=0; var parentT=0;
          if (NS6) { parentLayer = aLayer.parentNode;
            while (parentLayer != null && parentLayer.style.position) {             
              parentL += parseInt(parentLayer.offsetLeft); parentT += parseInt(parentLayer.offsetTop);
              parentLayer = parentLayer.parentNode;
          } } else if (IE) { parentLayer = aLayer.parentElement;       
            while (parentLayer != null && parentLayer.style.position) {
              parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
              parentLayer = parentLayer.parentElement; } }
          var tmpX=mouseX-(((NS4)?pageX:((NS6)?parseInt(style.left):style.pixelLeft)+parentL)+MM_hLeft);
          var tmpY=mouseY-(((NS4)?pageY:((NS6)?parseInt(style.top):style.pixelTop) +parentT)+MM_hTop);
          if (String(tmpX)=="NaN") tmpX=0; if (String(tmpY)=="NaN") tmpY=0;
          var tmpW = MM_hWidth;  if (tmpW <= 0) tmpW += ((NS4)?clip.width :offsetWidth);
          var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS4)?clip.height:offsetHeight);
          if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
              || maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
      if (curDrag) {
        document.onmousemove = MM_dragLayer; if (NS4) document.captureEvents(Event.MOUSEMOVE);
        curLeft = (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
        curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
        if (String(curLeft)=="NaN") curLeft=0; if (String(curTop)=="NaN") curTop=0;
        MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
        document.MM_curDrag = curDrag;  curDrag.MM_SNAPPED=false;
        if(curDrag.MM_toFront) {
          eval('curDrag.'+((NS4)?'':'style.')+'zIndex=document.MM_maxZ+1');
          if (!curDrag.MM_dropBack) document.MM_maxZ++; }
        retVal = false; if(!NS4&&!NS6) event.returnValue = false;
    } } else if (theEvent == 'mousemove') {
      if (document.MM_curDrag) with (document.MM_curDrag) {
        var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
        var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
        newLeft = mouseX-MM_oldX; newTop  = mouseY-MM_oldY;
        if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
        if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
        if (MM_bT!=null) newTop  = Math.max(newTop ,MM_bT);
        if (MM_bB!=null) newTop  = Math.min(newTop ,MM_bB);
        MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
        if (NS4) {left = newLeft; top = newTop;}
        else if (NS6){style.left = newLeft; style.top = newTop;}
        else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
        if (MM_dragJS) eval(MM_dragJS);
        retVal = false; if(!NS) event.returnValue = false;
    } } else if (theEvent == 'mouseup') {
      document.onmousemove = null;
      if (NS) document.releaseEvents(Event.MOUSEMOVE);
      if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
      if (document.MM_curDrag) with (document.MM_curDrag) {
        if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
            (Math.pow(MM_targL-((NS4)?left:(NS6)?parseInt(style.left):style.pixelLeft),2)+
             Math.pow(MM_targT-((NS4)?top:(NS6)?parseInt(style.top):style.pixelTop),2))<=MM_tol) {
          if (NS4) {left = MM_targL; top = MM_targT;}
          else if (NS6) {style.left = MM_targL; style.top = MM_targT;}
          else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
          MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }
        if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
        if(MM_dropBack) {if (NS4) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
        retVal = false; if(!NS) event.returnValue = false; }
      document.MM_curDrag = null;
    }
    if (NS) document.routeEvent(objName);
  } return retVal;
}
function loadwin(obj){
  with(MM_findObj(obj))with(style){
    filters[0].apply();
    display='';
    filters[0].play();
  }
}
function cs(captionBG,bodyBG,tableBG){
oldBody=document.body;
  with(oldBody){
    var newBody=cloneNode();
    style.filter='blendtrans(duration=1)';
    filters[0].apply();
    with(document.styleSheets[0]){
      with(rules[0].style){backgroundColor=captionBG;}
      with(rules[1].style){backgroundColor=bodyBG;}
      with(rules[2].style){backgroundColor=tableBG}
    }
    filters[0].play();
    setTimeout(function(){
        if(oldBody!=null){
          oldBody.applyElement(newBody, "inside")
          oldBody.swapNode(newBody);
          oldBody.removeNode(true);
          }
        },1500);
  }
}
</script>
<style type="text/css">
.caption {
  font-size: 9px;
  color: #FFFFFF;
  background-color: #00CCFF;
  padding-left: 5px;
  cursor: default;
  font-family: "Verdana", "Arial";
  border: 1px inset;
}
body {
  background-color: #f6f6f6;
  border: 1px inset;
  overflow: hidden;
}
table {
  background-color: #eeeeee;
}
td {
  font-family: "Verdana", "Arial";
  font-size: 9px;
  border: 0px;
}
.win {
  filter:BlendTrans(duration=1) DropShadow(Color=#cccccc, OffX=3, OffY=3) alpha(opacity=90)
}
a {
  text-decoration: none;
  color: #003399;
}
a:hover {
  color: #FF0000;
}
input {
  font-family: "Verdana", "Arial";
  font-size: 9px;
  border-width: 1px;
}
.statusbar {
  font-family: "Tahoma", "Verdana";
  font-size: 9px;
  color: #999999;
  padding-left: 3px;
}
.button {
  border: 1px outset;
  text-align: center;
}
.navframe {
  padding: 5px;
}
</style>
</head>
<body      >
<div id="assist" style="position:absolute; left:15px; top:68px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('assist','',0,0,150,18,true,false,-1,-1,-1,-1,15,68,100,'',false,'')">
    <table width="180" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td class="caption">SeekAssist</td>
            <td width="14" align="center"><a href="#" onclick="with(MM_findObj('assistwin').style)display=display=='none'?'':'none'">%</a></td>
            <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('assist','','hide')">X</a></td>
        </tr>
        <tr id="assistwin">
            <td height="100" colspan="3" bordercolor="#eeeeee"> </td>
        </tr>
  </table>
        <br>
</div>
<script>loadwin('assist')</script>
<div id="rank" style="position:absolute; left:15px; top:194px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('rank','',0,0,150,18,true,false,-1,-1,-1,-1,15,194,100,'',false,'')">
    <table width="180" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td class="caption">SeekRank</td>
            <td width="14" align="center"><a href="#" onclick="with(MM_findObj('rankwin').style)display=display=='none'?'':'none'">%</a></td>
            <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('assist','','inherit','rank','','hide')">X</a></td>
        </tr>
        <tr id="rankwin">
            <td height="100" colspan="3" bordercolor="#eeeeee"> </td>
        </tr>
  </table>
    <br>
</div>
<script>setTimeout("loadwin('rank')",500)</script>
<div id="mycolor" style="position:absolute; left:15px; top:320px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('mycolor','',0,0,150,18,true,false,-1,-1,-1,-1,15,320,100,'',false,'')">
    <table width="180" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td class="caption">MyColor</td>
            <td width="14" align="center"><a href="#" onclick="with(MM_findObj('mycolorwin').style)display=display=='none'?'':'none'">%</a></td>
            <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('mycolor','','hide')">X</a></td>
        </tr>
        <tr id="mycolorwin">
            <td height="100" colspan="3" bordercolor="#eeeeee"><table width="100%" border="0" cellspacing="0" cellpadding="2">
                <tr>
                    <td align="center"><a href="#" onclick="cs('#00CCFF','#f6f6f6','#eeeeee')">Default</a></td>
                </tr>
                <tr>
                    <td align="center"><a href="#" onclick="cs('red','#eeccee','#eeddee')">StyleSheet#1</a></td>
                </tr>
                <tr>
                    <td align="center"><a href="#" onclick="cs('#99ccff','#eeeeee','#ccddff')">StyleSheet#2</a></td>
                </tr>
                <tr>
                    <td align="center"><a href="#" onclick="cs('#ff9999','#ffffff','#ffeeff')">StyleSheet#3</a></td>
                </tr>
                <tr>
                    <td align="center"><a href="#" onclick="cs('skyblue','#eeeeee','#99ddff')">StyleSheet#4</a></td>
                </tr>
                <tr>
                    <td align="center"><a href="#" onclick="cs('#009900','#eeffee','#ddffdd')">StyleSheet#5</a></td>
                </tr>
            </table></td>
        </tr>
  </table>
    <br>
</div>
<script>setTimeout("loadwin('mycolor')",1000)</script>
<div id="results" style="position:absolute; left:204px; top:68px; width:575px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('results','',0,0,400,18,true,false,-1,-1,-1,-1,204,68,50,'',false,'')">
    <table width="570" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td class="caption">Results</td>
                        <td width="12" class="button"><a href="#" onClick="with(MM_findObj('resultswin').style)display=display=='none'?'':'none'">%</a></td>
                        <td width="12" class="button"><a href="#" onClick="MM_showHideLayers('results','','inherit')">X</a></td>
                    </tr>
            </table></td>
        </tr>
        <tr>
            <td height="20" bordercolor="#eeeeee"><input name="url" type="text" value="http://www.google.com/search?q=ezlee" size="100">
            <a href="#" onclick="mainframe.location=url.value">Search</a></td>
        </tr>
        <tr id="resultswin">
            <td height="318" valign="top" class="navframe"><aiframe name="mainframe" id="mainframe" src="http://www.google.com/search?q=ezlee" width="100%" height="100%" frameborder="0" scrolling="auto"><font color="#FF0000">Welcome!</font></aiframe></td>
        </tr>
        <tr>
            <td height="14" class="statusbar">Ready!</td>
            </tr>
  </table>
    <br>
</div>
<script>setTimeout("loadwin('results')",2000)</script>
</body>
</html>

运行代码

复制代码

二十一凹陷文字

运行代码

复制代码

二十二漂亮的仿flash菜单

运行代码

复制代码

JS做CTRL+ENTER 提交

运行代码

复制代码

accesskey 提交

运行代码

复制代码

新闻切换技术

<!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=gb2312" />
<title>新闻切换技术</title>
<style type="text/css">
body { text-align: center; margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
table,td,tr,th{font-size:12px;}
a:link {color: #000; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #c00; text-decoration:underline;}
a:active {color: #000;}
.focusPic{margin:0 auto; width:244px;}
.focusPic .pic{margin:0 auto; width:240px; height:180px; padding:2px 0 0;}
.focusPic .adPic{margin:0 auto 5px; width:240px; height:29px; overflow:hidden;background:url(http://tech.163.com/newimg/adpic.gif);}
.focusPic .adPic .text{float:right; padding:9px 4px 0 0; width:140px;}
.focusPic .adPic .text a{color:#1f3a87;}
.focusPic .adPic .text a:hover{color:#bc2931;}
.focusPic h2{ float:left; width:232px;padding:4px 0 3px 12px; font-size:14px; text-align:left;}
.focusPic p{float:left; width:226px;line-height:160%; margin:0; text-align:left;padding:0 0 10px 12px;}
.focusPic p img {margin:0px 0 2px;}
.focusPic .more{ margin:0 auto; width:240px; }
.focusPic .more .textNum{float:right; margin:0 8px 0 0;padding:0 0 4px;}
.focusPic .more .textNum .text{float:left; font-weight:bold; padding:7px 6px 0 0; color:#666;}
.focusPic .more .textNum .num{float:left; width:113px; height:19px;}
.focusPic .more .textNum .bg1{ background:url(http://tech.163.com/newimg/num1.gif);}
.focusPic .more .textNum .bg2{ background:url(http://tech.163.com/newimg/num2.gif);}
.focusPic .more .textNum .bg3{ background:url(http://tech.163.com/newimg/num3.gif);}
.focusPic .more .textNum .bg4{ background:url(http://tech.163.com/newimg/num4.gif);}
.focusPic .more .textNum .num ul{ float:left; width:113px;}
.focusPic .more .textNum .num li{float:left; width:28px; font-weight:bold;display:block; color:#fff; list-style-type:none; padding:6px 0 0;}
.focusPic .more .textNum .num li a{color:#fff; padding:0 5px; }
.focusPic .more .textNum .num li a:visited{color:#fff;}
.focusPic .more .textNum .num li a:hover{color:#ff0;}
</style>
</head>
<body   >
 <script language="JavaScript" type="text/javascript">
var nn;
nn=1;
setTimeout('change_img()',6000);
function change_img()
{
 if(nn>4) nn=1
 setTimeout('setFocus1('+nn+')',6000);
 nn++;
 tt=setTimeout('change_img()',6000);
}
function setFocus1(i)
{
 selectLayer1(i);
}
function selectLayer1(i)
{
 switch(i)
 {
 case 1:
 document.getElementById("focusPic1").style.display="block";
 document.getElementById("focusPic2").style.display="none";
 document.getElementById("focusPic3").style.display="none";
 document.getElementById("focusPic4").style.display="none";
 document.getElementById("focusPic1nav").style.display="block";
 document.getElementById("focusPic2nav").style.display="none";
 document.getElementById("focusPic3nav").style.display="none";
 document.getElementById("focusPic4nav").style.display="none";
 break;
 case 2:
 document.getElementById("focusPic1").style.display="none";
 document.getElementById("focusPic2").style.display="block";
 document.getElementById("focusPic3").style.display="none";
 document.getElementById("focusPic4").style.display="none";
 document.getElementById("focusPic1nav").style.display="none";
 document.getElementById("focusPic2nav").style.display="block";
 document.getElementById("focusPic3nav").style.display="none";
 document.getElementById("focusPic4nav").style.display="none";
 break;
 case 3:
 document.getElementById("focusPic1").style.display="none";
 document.getElementById("focusPic2").style.display="none";
 document.getElementById("focusPic3").style.display="block";
 document.getElementById("focusPic4").style.display="none";
 document.getElementById("focusPic1nav").style.display="none";
 document.getElementById("focusPic2nav").style.display="none";
 document.getElementById("focusPic3nav").style.display="block";
 document.getElementById("focusPic4nav").style.display="none";
 break;
 case 4:
 document.getElementById("focusPic1").style.display="none";
 document.getElementById("focusPic2").style.display="none";
 document.getElementById("focusPic3").style.display="none";
 document.getElementById("focusPic4").style.display="block";
 document.getElementById("focusPic1nav").style.display="none";
 document.getElementById("focusPic2nav").style.display="none";
 document.getElementById("focusPic3nav").style.display="none";
 document.getElementById("focusPic4nav").style.display="block";
 break;
 }
}
</script>
 <div class="focusPic">
 <div id="focusPic1" style="display:block ;">
 <div class="pic"> <a href="http://tech.163.com/special/000915SN/soft2005.html"><img src="http://cimg.163.com/tech/2006/1/18/2006011810122068706.jpg" alt="网易学院05年软件评选结果" width="240" height="180" border="0" /></a> </div>
 <h2><a href="http://tech.163.com/special/000915SN/soft2005.html">网易学院05年软件评选结果</a></h2>
 <p>经过大家的热情投票和我们的辛劳整理，网易学院2005年年度软件评选结果终于出炉啦。点击进入查看……<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a href="http://tech.163.com/special/000915SN/soft2005.html" class="cDRed">详细</a></p>
 </div>
 <div id="focusPic2" style="display: none ;">
 <div class="pic"> <a href="http://tech.163.com/discover/"><img src="http://cimg.163.com/tech/2006/1/17/200601171557008cee7.jpg" alt="颠覆丛林动物生存法则" width="240" height="180" border="0" /></a> </div>
 <h2><a href="http://tech.163.com/discover/">颠覆丛林动物生存法则</a></h2>
 <p>群居动物的这种行为颠覆了我们通常认为的，在动物世界通行的 “丛林法则”，动物不都自私，不都是弱肉强食的。<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a href="http://tech.163.com/discover/" class="cDRed">详细</a></p>
 </div>
 <div id="focusPic3" style="display: none ;">
 <div class="pic"> <a href="http://tech.163.com/special/00091MNJ/itobserve015.html"><img src="http://cimg.163.com/tech/2006/1/17/2006011711483290a60.jpg" alt="WAPI并非贸易阴谋" width="240" height="180" border="0" /></a> </div>
 <h2><a href="http://tech.163.com/special/00091MNJ/itobserve015.html">WAPI并非贸易阴谋</a></h2>
 <p>近日国家做出决定：“将向其他的国内及国外企业公布该算法”。事实证明中国WAPI标准并非是贸易阴谋。<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a href="http://tech.163.com/special/00091MNJ/itobserve015.html" class="cDRed">详细</a></p>
 </div>
 <div id="focusPic4" style="display: none ;">
 <div class="pic"> <a href="http://tech.163.com/special/00091OSI/horizons.html"><img src="http://cimg.163.com/tech/2006/1/17/200601171002503f251.jpg" alt="新视野号探测冥王星特别专题" width="240" height="180" border="0" /></a> </div>
 <h2><a href="http://tech.163.com/special/00091OSI/horizons.html">新视野号探测冥王星特别专题</a></h2>
 <p>美国宇航局将于北京时间18日凌晨2时24分发射新视野号探测器，造访这颗人类唯一尚未探测过的行星-冥王星。<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a href="http://tech.163.com/special/00091OSI/horizons.html" class="cDRed">详细</a></p>
 </div>
 <div class="more">
 <div class="textNum">
 <div class="text">> 更多头图新闻</div>
 <div class="num bg1" id="focusPic1nav" style="display: block;">
 <ul>
 <li>1</li>
 <li><a href="javascript:setFocus1(2);" target="_self">2</a></li>
 <li><a href="javascript:setFocus1(3);" target="_self">3</a></li>
 <li><a href="javascript:setFocus1(4);" target="_self">4</a></li>
 </ul>
 </div>
 <div class="num bg2" id="focusPic2nav" style="display: none;">
 <ul>
 <li><a href="javascript:setFocus1(1);" target="_self">1</a></li>
 <li>2</li>
 <li><a href="javascript:setFocus1(3);" target="_self">3</a></li>
 <li><a href="javascript:setFocus1(4);" target="_self">4</a></li>
 </ul>
 </div>
 <div class="num bg3" id="focusPic3nav" style="display: none;">
 <ul>
 <li><a href="javascript:setFocus1(1);" target="_self">1</a></li>
 <li><a href="javascript:setFocus1(2);" target="_self">2</a></li>
 <li>3</li>
 <li><a href="javascript:setFocus1(4);" target="_self">4</a></li>
 </ul>
 </div>
 <div class="num bg4" id="focusPic4nav" style="display: none;">
 <ul>
 <li><a href="javascript:setFocus1(1);" target="_self">1</a></li>
 <li><a href="javascript:setFocus1(2);" target="_self">2</a></li>
 <li><a href="javascript:setFocus1(3);" target="_self">3</a></li>
 <li>4</li>
 </ul>
 </div>
 </div>
 </div>
 </div>
</body>
</html>

运行代码

复制代码

给大家封装个选项卡js

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>这一技客</title>
<script type="text/javascript">
/*
  选项卡封装
  这一技客
  2008-2-4
*/
opCard = function()
{
  this.bind = new Array();
  this.index = 0;    //默认显示哪个选项卡，从0开始
  
  this.style = new Array();    //["","",""]
  this.overStyle = false;    //选项是否有over, out变换样式事件，样式为this.style[2]
  this.overChange = false;    //内容是否用over, out直接激活
  this.menu = false;        //菜单类型
  this.nesting = [false,false,"",""];    //是否嵌套，后面2个参数是指定menu,info的子集深度所用id
  
  this.auto = [false, 1000];    //自动滚动[true,2000]
  this.timerID = null;      //自动播放的
  this.menutimerID = null;    //菜单延时的
  
  this.creat = function(func)
  {
    var _arrMenu = document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]);
    var _arrInfo = document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]);
    var my = this, i;
    var argLen = arguments.length;
    var arrM = new Array();
    
    if(this.nesting[0] || this.nesting[1])  // 有选项卡嵌套
    {  // 过滤出需要的数据
      var arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu;
      var arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo;
    }
    else
    {
      var arrMenu = _arrMenu;
      var arrInfo = _arrInfo;
    }
    
    var l = arrMenu.length;
    if(l!=arrInfo.length){alert("菜单和内容必须拥有相同的数量n如果需要，你可以放一个空的在那占位。")}
    
    // 修正
    if(this.menu){this.auto=false;this.overChange=true;} //如果是菜单，则没有自动运行，有over, out直接激活
    
    // 循环添加各个事件等
    for(i=0;i<l;i++)
    {
      arrMenu[i].cName = arrMenu[i].className;
      arrMenu[i].className = (i!=this.index || this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]);    //加载样式，菜单的话统一样式
      
      if(arrMenu[i].getAttribute("skip")) // 需要跳过的容器
      {
        if(this.overStyle || this.overChange)  // 有over, out 改变样式 或者 激活
        {
          arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}
          arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}
        }
        arrMenu[i].onclick = function(){if(argLen==1){func()}}
        arrInfo[i].style.display = "none";
        continue;
      }
      
      if(i!=this.index || this.menu){arrInfo[i].style.display="none"};  //隐藏初始化，菜单的话全部隐藏
      arrMenu[i].index = i;  //记录自己激活值[序号]
      arrInfo[i].index = i;
      
      
      if(this.overChange)  //有鼠标over, out事件
      {
        arrMenu[i].onmouseover = function(){changeOption(this);my.menu?changeMenu(1):autoStop(this, 0);}
        arrMenu[i].onmouseout = function(){changeOption(this);my.menu?changeMenu(0):autoStop(this, 1);}
      }
      else  //onclick触发
      {
        arrMenu[i].onclick = function(){changeOption(this);autoStop(this, 0);if(argLen==1){func()}}
        if(this.overStyle)  // 有over, out 改变样式
        {
          arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}
          arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}
        }
        else  // 没有over, out 改变样式
        {
          if(this.auto[0])  // 有自动运行
          {
            arrMenu[i].onmouseover = function(){autoStop(this, 0);}
            arrMenu[i].onmouseout = function(){autoStop(this, 1);}
          }
        }
      }
      
      if(this.auto[0] || this.menu)  //arrinfo 控制自动播放
      {
        arrInfo[i].onmouseover = function(){my.menu?changeMenu(1):autoStop(this, 0);}
        arrInfo[i].onmouseout = function(){my.menu?changeMenu(0):autoStop(this, 1);}
      }
    }  //for结束
    
    if(this.auto[0])
    {
      this.timerID = setTimeout(autoMove,this.auto[1])
    }
    
    // 自动播放
    function autoMove()
    {
      var n;
      n = my.index + 1;
      if(n==l){n=0};
      while(arrMenu[n].getAttribute("skip"))    // 需要跳过的容器
      {
        n += 1;
        if(n==l){n=0};
      }
      changeOption(arrMenu[n]);
      my.timerID = setTimeout(autoMove,my.auto[1]);
    }
    
    // onmouseover时，自动播放停止。num：0为over，1为out。 obj暂时无用。 -_-!!
    function autoStop(obj, num)
    {
      if(!my.auto[0]){return;}
      //if(obj.index==my.index)
      num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]);
    }
    
    // 改变选项卡
    function changeOption(obj)
    {
      arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]);  //修改旧内容
      arrInfo[my.index].style.display = "none";  //隐藏旧内容
      
      obj.className = getClass(obj,my.style[1]);    //修改为新样式
      arrInfo[obj.index].style.display = "";  //显示新内容
      
      my.index = obj.index;  //更新当前选择的index
    }
    
    /*    
      只有onclick时，overStyle的onmouseover,onmouseout事件。用来预激活
      obj：目标对象。  num：1为over，0为out
    */
    function changeTitle(obj, num)
    {
      if(!my.overStyle){return;};
      if(obj.index!=my.index){obj.className = getClass(obj,my.style[num])}
    }
    
    /*    
      菜单类型时用
      obj：目标对象。  num：1为over，0为out
    */
    function changeMenu(num)
    {
      if(!my.menu){return;}
      num==0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID)
    }
    
    //关闭菜单
    function menuClose()
    {
      arrInfo[my.index].style.display = "none";
      arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]);
    }
    
    // 得到className（防止将原有样式覆盖）
    function getClass(o, s)
    {
      if(o.cName==""){return s}
      else{return o.cName + " " + s}
    }
    
    //嵌套情况下得到真正的子集
    function getChilds(arrObj, id, num)
    {
      var depth = 0;
      var firstObj = my.nesting[num]==""?arrObj[0]:document.getElementById(my.nesting[num]);    //得到第一个子集
      do  //计算深度
      {
        if(firstObj.parentNode.getAttribute("id")==id){break}else{depth+=1}
        firstObj = firstObj.parentNode;
      }
      while(firstObj.tagName.toLowerCase()!="body")  // body强制退出。
      
      var t;
      var arr = new Array();
      for(i=0;i<arrObj.length;i++)  //过滤出需要的数据
      {
        t = arrObj[i], d = 0;
        do
        {
          if(t.parentNode.getAttribute("id")==id && d == depth)
          {  
            arr.push(arrObj[i]);break;    //得到数据
          }
          else
          {
            if(d==depth){break};d+=1;
          }
          t = t.parentNode;
        }
        while(t.tagName.toLowerCase()!="body")  // body强制退出
      }
      return arr;
    }
  }
}
window.onload = function()
{
  var aa = new opCard();
  aa.bind = ["a1","div","b1","div"];
  aa.style = ["a1_0","a1_1","a1_0"];
  aa.index = 0;
  aa.nesting = [false,true,"",""]
  aa.creat();
  aa =null;
  
  // 默认的onclick中，第一个例子
  var bba = new opCard();
  bba.bind = ["a2","li","b2","div"];
  bba.style = ["style1","style2","style3"];
  bba.overStyle = true;
  bba.creat();
  bba = null;
  
  // 默认的onclick中，第二个例子
  var bbb = new opCard();
  bbb.bind = ["a3","li","b3","div"];
  bbb.style = ["style1","style2","style3"];
  bbb.overStyle = true;
  bbb.creat();
  bbb = null;
  
  // onmousover触发中的例子
  var cc = new opCard();
  cc.bind = ["a4","li","b4","div"];
  cc.style = ["style1","style2","style3"];
  cc.overStyle = true;
  cc.overChange = true;
  cc.creat();
  cc = null;
  
  //自动播放auto第一个例子
  var dd = new opCard();
  dd.bind = ["a5","li","b5","div"];
  dd.style = ["style1","style2","style3"];
  dd.auto = [true, 3000];
  dd.creat();
  dd = null;
  
  //自动播放auto第二个例子
  var ee = new opCard();
  ee.bind = ["a6","li","b6","div"];
  ee.style = ["style1","style2","style3"];
  ee.auto = [true, 2000];
  ee.overChange = true;
  ee.creat();
  ee = null;
  
  //自动播放auto第三个例子
  var ff = new opCard();
  ff.bind = ["a7","li","b7","div"];
  ff.style = ["style1","style2","style3"];
  ff.auto = [true, 1000];
  ff.overChange = true;
  ff.overStyle = true;
  ff.creat();
  ff = null;
  
  //菜单导航例子
  var gg = new opCard();
  gg.bind = ["a8","li","b8","div"];
  gg.style = ["style1","style2","style3"];
  gg.overStyle = true;
  gg.menu = true;
  gg.creat();
  gg = null;
  
  //其他应用
  var hh = new opCard();
  hh.bind = ["a9","li","a9","li"];
  hh.style = ["style4","style4","style4"];
  //hh.overStyle = true;
  hh.auto = [true, 1000];
  hh.creat();
  hh = null;
}
</script>
<style type="text/css">
body{font-size:12px; font-family:Verdana,"宋体";}
p,ul{margin:0px; padding:0px;}
td,div{font-size:12px}
.a1_0 {border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;}
.a1_1 {border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;}
.test{text-decoration:underline;}
#b1 div.s{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;}
#b1 div.s strong{color:#0066FF;}
/* */
.style1{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style2{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style3{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
#a2,#a3,#a4,#a5,#a6,#a7,#a8 {height:22px;}
#b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;}
#b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;}
#b8 div a{margin-right:20px;}
.style4{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="a1" width="140" valign="top" align="center">
    <div class="test">简单介绍</div>
    <div class="test">默认的onclick</div>
    <div class="test">onmousover触发</div>
    <div class="test">自动播放auto</div>
    <div class="test">菜单导航</div>
    <div class="test">关于嵌套</div>
    <div class="test">其他应用</div>
    <div class="test">一些说明</div>
    <div class="test">&nbsp;</div>
    <div class="test">&nbsp;</div>
    <div class="test">&nbsp;</div>
    <div class="test">&nbsp;</div>
  </td>
    <td id="b1" valign="top">
    <div class="s">
      封装了一个选项卡，不过已经不像选项卡了-_-!!!<br><br>
      现稍微说明下吧，如果不明白的话，旁边有几个例子可能说明起来更清楚些<br><br>
      <p>
      <strong>obj.bind = ["a1","td","b1","div"];</strong><br>
      绑定id="a1"下的td标签为菜单，绑定id="b1"下的div标签为内容，简单么？<br>
      td标签的数量和div标签的数量必须相同<br>
      （若不需要显示内容，只显示菜单话，可以这个在td标签上加&lt;td skip="true"&gt;）<br>
      如果id="a1"下的td标签有嵌套表格，这样的话，就不是所有的td都是菜单，这时候需要用下nesting<br><br>
      
      <strong>obj.nesting = [false,true,"",""];</strong><br>
      当标签tag有嵌套时，需要用到这个<br>
      比如选项卡内容是放在div容器里，而本身这个内容里也有div标签，这时就需要用到<br>
      菜单嵌套为false，内容嵌套为true，且会自动判断出内容标签，多数时候这样就可以了<br>
      判断方法为，认定getElementsByTagName后第一个标签为内容第一项，其他的就用这个第一项的深度来判断<br>
      但有些情况下，这样还是不行<br>
      我用后面2个参数做id来指定菜单或者内容的第一项nesting = [false,true,"","q2"];<br>
      这样就肯定不会错了（不明白的话看下例子就简单多了）<br><br>
      
      <strong>obj.index = 0;</strong><br>
      默认显示第几个选项卡，序号从0开始<br><br>
      
      <strong>obj.style = ["c1","c2","c3"]</strong><br>
      菜单加载的样式的className：<br>
      菜单未选中的className是c1<br>
      菜单选中的className是c2<br>
      菜单onmouseover的className是c3<br><br>
      
      <strong>obj.overStyle = false;</strong><br>
      选项卡是否有onmouseover, onmouseout变换样式事件[非激活选项卡内容]，对应的样式为style[2]<br><br>
      
      <strong>obj.overChange = false;</strong><br>
      选项卡内容是否用onmouseover, onmouseout直接激活<br><br>
      
      <strong>obj.menu = false;</strong><br>
      选项卡是菜单类型<br><br>
      <strong>obj.auto = [false, 1000];</strong><br>
      选项卡是否自动播放，播放速度（毫秒）<br><br>
      
      <strong>obj.creat();</strong><br>
      开始生成选项卡，需要onclick触发事件的话，可以obj.creat(函数名)<br>
      所有的都会触发
      </p>
    </div>
    <div class="s">
    
      <div id="a2">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
      </div>
      <div id="b2">
      <div>这个例子是用onclick触发的<br>并设置overStyle = true;<br>(over，out改变样式,但不激活)</div>
      <div>
        var bba = new opCard();<br>
        bba.bind = ["a2","li","b2","div"];<br>
        bba.style = ["style1","style2","style1"];<br>
        bba.overStyle = true;<br>
        bba.creat();<br>
        bba = null;
      </div>
      <div>33333</div>
      <div>4444444</div>
      </div><br>
    
      <div id="a3">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li skip="true">4</li>
      </ul>
      </div>
      <div id="b3">
      <div>
        这个例子是比上面增加skip="true"<br>即&lt;li skip="true"&gt;4&lt;/li&gt;<br>所以选项卡4是没有内容的<br>
        你可以为选项卡的文字直接加上链接，我这里就不加了
      </div>
      <div>222222</div>
      <div>33333</div>
      <div>4444444</div>
      </div>
    </div>
    <div class="s">
    
      <div id="a4">
      <ul>
        <li>1</li>
        <li>2</li>
        <li skip="true">3</li>
        <li>4</li>
      </ul>
      </div>
      <div id="b4">
      <div>这个例子是用onmouseover触发的<br>(over，out直接激活)<br>并且&lt;li skip="true"&gt;3&lt;/li&gt;[选项卡3不会被激活]<br>overStyle = true;</div>
      <div>
        var cc = new opCard();<br>
        cc.bind = ["a4","li","b4","div"];<br>
        cc.style = ["style1","style2","style1"];<br>
        cc.overStyle = true;<br>
        cc.overChange = true;<br>
        cc.creat();<br>
        cc = null;
      </div>
      <div>33333</div>
      <div>4444444</div>
      </div>
    </div>
    <div class="s">
    
      <div id="a5">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
      </div>
      <div id="b5">
      <div>1111111<br>我每3秒切换一个选项卡</div>
      <div>
        var ee = new opCard();<br>
        ee.bind = ["a6","li","b6","div"];<br>
        ee.style = ["style1","style2","style1"];<br>
        ee.auto = [true, 2000];<br>
        ee.overChange = true;<br>
        ee.creat();<br>
        ee = null;
      </div>
      <div>33333<br>我每3秒切换一个选项卡</div>
      <div>4444444<br>我每3秒切换一个选项卡</div>
      </div>
      <div>注：<strong>鼠标在选项卡任意位置都会使停止播放</strong><br><br>下面这个结合overChange一起</div>
      
      <div id="a6">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
      </div>
      <div id="b6">
      <div>1111111<br>我每2秒切换一个选项卡</div>
      <div>
        var dd = new opCard();<br>
        dd.bind = ["a5","li","b5","div"];<br>
        dd.style = ["style1","style2","style1"];<br>
        dd.auto = [true, 3000];<br>
        dd.creat();<br>
        dd = null;<br>
      </div>
      <div>33333<br>我每2秒切换一个选项卡</div>
      <div>4444444<br>我每2秒切换一个选项卡</div>
      </div>
      <div><br>下面这个再来个&lt;li skip="true"&gt;3&lt;/li&gt;，且overStyle=true;</div>
      
      <div id="a7">
      <ul>
        <li>1</li>
        <li>2</li>
        <li skip="true">3</li>
        <li>4</li>
      </ul>
      </div>
      <div id="b7">
      <div>1111111<br>我每1秒切换一个选项卡</div>
      <div>
        var ff = new opCard();<br>
        ff.bind = ["a7","li","b7","div"];<br>
        ff.style = ["style1","style2","style1"];<br>
        ff.auto = [true, 1000];<br>
        ff.overChange = true;<br>
        ff.overStyle = true;<br>
        ff.creat();<br>
        ff = null;
      </div>
      <div>33333<br>我每1秒切换一个选项卡</div>
      <div>4444444<br>我每1秒切换一个选项卡</div>
      </div>
    </div>
    
    <div class="s">
      <div id="a8">
      <ul>
        <li skip="true">首页</li>
        <li>新闻</li>
        <li>论坛</li>
        <li skip="true">联系我们</li>
      </ul>
      </div>
      <div id="b8">
      <div></div>
      <div><a href="#">国内新闻</a><a href="#">国际新闻</a><a href="#">娱乐新闻</a><a href="#">体育新闻</a></div>
      <div><a href="#">蓝色理想</a><a href="#">blue idea</a></div>
      <div></div>
      </div>
      <div><strong>注：菜单延时一秒关闭</strong><br>这里只是演示，实际可以设置下position什么的。-o-<br>多级菜单不知道能不能支持，没试过</div>
    </div>
    <div class="s">
      我见过的许多选项卡都不能用来嵌套<br>但还是有些时候会用到的<br>
      所以如您所见，这个演示本身就是一个嵌套，效果还不错
    </div>
    
    <div class="s">
      比如图片切换什么，不过我太懒了，不写了。。。<br>
      这个能干什么，我也不知道。。
      <div id="a9">
        <li>新年好啊</li>
        <li>快过年了</li>
        <li>天好冷啊</li>
        <li>大家去抢红包吧</li>
        <li>红包~！红包~！你在哪里啊？</li>
      </div>      
      
    </div>
    <div class="s">
      选项卡标题（或者菜单）必须和选项卡内容的数量相同，否则会出错<br>即使选项卡菜单skip="true"，内容也要放一个空的标签占位<br>
      其他好像暂时没发现什么<br><br>
      本来打算加入ajax的，但有些还没想好。<br>
      效率的话，应该还行，我这个演示放了几个选项卡，似乎还不错<br><br>
      写这个的目的就是以后弄选项卡只要处理样式就可以了，很多选项卡或者切换之类都是大同小异<br>
      本来是打算弄些特效在里面，考虑会增加不少代码，所以不加了，简洁点。<br><br>
      
      哦，还有选项卡是附加样式，不会取消原本设置的样式<br>
      如左边的下划线是原有的样式
    </div>
    <div class="s">啥都没有1</div>
    <div class="s">啥都没有2</div>
    <div class="s">啥都没有3</div>
    <div class="s">啥都没有4</div>
  </td>
  </tr>
</table>
</body>
</html>

运行代码

复制代码

显示左侧菜单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>New Page 28</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2800.1491" name=GENERATOR>
<META content=FrontPage.Editor.Document name=ProgId>
<STYLE>#ssm2 A {
 FONT-SIZE: 12px; COLOR: #808080; FONT-FAMILY: verdana; TEXT-DECORATION: none
}
#ssm2 A:hover {
 COLOR: #ccff33
}
body{background:url(http://www.infowe.com/images/infowe.gif) no-repeat right center fixed;}
</STYLE>
</HEAD>
<BODY>
<SCRIPT language=JavaScript1.2>
function MM_displayStatusMsg(msgStr) { 
 status=msgStr;
 document.MM_returnValue = true;
}
function highlight(x){
document.forms[x].elements[0].focus()
document.forms[x].elements[0].select()
}
function MM_jumpMenu(targ,selObj,restore){ 
 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
 if (restore) selObj.selectedIndex=0;
}
var NS
IE=document.all;
NS=document.layers;
hdrFontFamily="Verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#CCCCCC";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#CCCCCC";
linkTarget="_top";
YOffset=60;
staticYOffset=20;
menuBGColor="#CCCCCC";
menuIsStatic="no";
menuHeader="Main Index"
menuWidth=150; // Must be a multiple of 5!
staticMode="advanced"
barBGColor="#C0C0C0";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barText="MENU";
function moveOut() {
if (window.cancel) {
 cancel="";
}
if (window.moving2) {
 clearTimeout(moving2);
 moving2="";
}
if ((IE && ssm2.style.pixelLeft<0)||(NS && document.ssm2.left<0)) {
 if (IE) {ssm2.style.pixelLeft += (5%menuWidth);
}
if (NS) {
 document.ssm2.left += (5%menuWidth);
}
moving1 = setTimeout('moveOut()', 5)
}
else {
 clearTimeout(moving1)
 }
};
function moveBack() {
 cancel = moveBack1()
}
function moveBack1() {
 if (window.moving1) {
 clearTimeout(moving1)
}
if ((IE && ssm2.style.pixelLeft>(-menuWidth))||(NS && document.ssm2.left>(-150))) {
 if (IE) {ssm2.style.pixelLeft -= (5%menuWidth);
}
if (NS) {
 document.ssm2.left -= (5%menuWidth);
}
moving2 = setTimeout('moveBack1()', 5)}
 else {
 clearTimeout(moving2)
 }
};
lastY = 0;
function makeStatic(mode) {
if (IE) {winY = document.body.scrollTop;var NM=ssm2.style
}
if (NS) {winY = window.pageYOffset;var NM=document.ssm2
}
if (mode=="smooth") {
 if ((IE||NS) && winY!=lastY) {
 smooth = .2 * (winY - lastY);
 if(smooth > 0) smooth = Math.ceil(smooth);
 else smooth = Math.floor(smooth);
 if (IE) NM.pixelTop+=smooth;
 if (NS) NM.top+=smooth;
 lastY = lastY+smooth;
}
setTimeout('makeStatic("smooth")', 1)
}
else if (mode=="advanced") {
 if ((IE||NS) && winY>YOffset-staticYOffset) {
 if (IE) {NM.pixelTop=winY+staticYOffset
 }
if (NS) {NM.top=winY+staticYOffset
 }
}
else {
if (IE) {NM.pixelTop=YOffset
}
 if (NS) {NM.top=YOffset-7
 }
}
setTimeout('makeStatic("advanced")', 1)
 }
}
function init() {
if (IE) {
ssm2.style.pixelLeft = -menuWidth;
ssm2.style.visibility = "visible"
}
else if (NS) {
document.ssm2.left = -menuWidth;
document.ssm2.visibility = "show"
}
else {
alert('Choose either the "smooth" or "advanced" static modes!')
}
}
function MM_displayStatusMsg(msgStr) { 
 status=msgStr;
 document.MM_returnValue = true;
}
</SCRIPT>
<SCRIPT language=JavaScript1.2>
if (IE) {document.write('<DIV ID="ssm2" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : '+YOffset+'px ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()">')}
tempBar=""
for (i=0;i<barText.length;i++) {
tempBar+=barText.substring(i, i+1)+"<BR>"}
document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+16+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+menuWidth+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></font></td><td align="center" rowspan="100" width="16" bgcolor="'+barBGColor+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD></tr>')
function addItem(text, link, target) {
if (!target) {target=linkTarget}
document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=''+linkOverBGColor+''" onmouseout="bgColor=''+linkBGColor+''"><ILAYER><LAYER onmouseover="bgColor=''+linkOverBGColor+''" onmouseout="bgColor=''+linkBGColor+''" WIDTH="100%"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+link+'" target="'+target+'" CLASS="ssm2Items">'+text+'</A></FONT></LAYER></ILAYER></TD></TR>')}
function addHdr(text) {
document.write('<tr><td bgcolor="'+hdrBGColor+'" WIDTH="140"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></font></td></tr>')}
//Only edit the script between HERE
addItem('偶和叶子', 'http://vip.aou.cn/csqf/about.htm', '');
addItem('聆听心海', 'http://vip.aou.cn/csqf/linting.htm', '');
addItem('风言风语', 'http://vip.aou.cn/csqf/fyfy.htm', '');
addItem('风行风影', 'http://vip.aou.cn/csqf/fxfy.htm', '');
addItem('雁过留声', 'http://csqf.etp21.com/', '_blank');
addHdr('WELCOME TO');
addItem('经广俱乐部', 'http://dj973.tz315.net', '_blank');
// and HERE! No more!
document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial"> </font></td></TR></table>')
if (IE) {document.write('</DIV>')}
if (NS) {document.write('</LAYER>')}
if ((IE||NS) && (menuIsStatic=="yes"&&staticMode)) {makeStatic(staticMode);}
</SCRIPT>
<SCRIPT>
window.onload=init
</SCRIPT>
<p style="height:1000px;"></p>
</BODY></HTML>

运行代码

复制代码

采用CSS和JS下拉菜单

运行代码

复制代码

修改鼠标右键显示方式的代码

运行代码

复制代码

网易娱乐头图新闻代码

<title>51du.cn-代码演示专用页面</title>
<style type="text/css">
/* 全局CSS定义 */
body { text-align: center; margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
table,td,tr,th{font-size:12px;}
/* 链接颜色 */
a:link {color: #000; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #c00; text-decoration:underline;}
a:active {color: #000;}
/* 颜色属性 [定义规则，小写c加颜色名称] */
.cRed,a.cRed:link,a.cRed:visited{ color:Red; }
.cBlue,a.cBlue:link,a.cBlue:visited{color:#1f3a87;}
a.cBlue:hover{color:#bc2931;}
.cDRed,a.cDRed:link,a.cDRed:visited{ color:#c00;}
.cGray,a.cGray:link,a.cGray:visited{ color: #4F544D;}
.cDGray,a.cDGray:link,a.cDGray:visited{ color: #666;}
.cWhite,a.cWhite:link,a.cWhite:visited{ color:#fff;}
.cBlack,a.cBlack:link,a.cBlack:visited{color:#000;}
a.cBlack:hover{color:#bc2931;}
/* 头图 */
.col{margin: 20 0 0 0;float:center; width:252px;border:1px solid #006BB6;}
.focusPic{margin:0 auto; width:252px;}
.focusPic .pic{margin:0 auto; width:250px; height:191px; padding:5px 0 0; background:url(http://cimg2.163.com/ent/newimg/focus3_bg.gif) no-repeat;}
.focusPic .pic img{margin:6px 0 0 0;}
.focusPic .pic h3 {text-align:left; padding:1px 0 0 12px;}
.focusPic .pic h3 img {margin:0px; }
.focusPic .pic .flashBlank {margin:0 auto; width:100%; height:6px; font-size:1px; }
.focusPic .pic h5 {text-align:left; padding:0px 0 0 12px !important;padding:5px 0 0 12px;}
.focusPic .pic h5 img {margin:0px; }
.focusPic h2{ float:left; width:236px;padding:4px 0 3px 12px; font-size:14px; text-align:left;}
.focusPic p{float:left; width:236px;line-height:160%; margin:0; text-align:left;padding:0 0 10px 12px; height:57px;}
.focusPic .more{ margin:0 auto; width:250px; }
.focusPic .more .textNum{float:right; margin:0 8px 0 0;padding:0 0 4px;}
.focusPic .more .textNum .text{float:left; font-weight:bold; padding:7px 6px 0 0; color:#666;}
.focusPic .more .textNum .num{float:left; width:113px; height:19px;}
.focusPic .more .textNum .bg1{ background:url(http://ent.163.com/newimg/num1.gif);}
.focusPic .more .textNum .bg2{ background:url(http://ent.163.com/newimg/num2.gif);}
.focusPic .more .textNum .bg3{ background:url(http://ent.163.com/newimg/num3.gif);}
.focusPic .more .textNum .bg4{ background:url(http://ent.163.com/newimg/num4.gif);}
.focusPic .more .textNum .num ul{ float:left; width:113px;}
.focusPic .more .textNum .num li{float:left; width:28px; font-weight:bold;display:block; color:#fff; list-style-type:none; padding:6px 0 0;}
.focusPic .more .textNum .num li a{color:#fff; padding:0 5px; }
.focusPic .more .textNum .num li a:visited{color:#fff;}
.focusPic .more .textNum .num li a:hover{color:#ff0;}
</style>
<div class="col">

<script language="javascript">
var nn;
nn=1;
setTimeout('change_img()',6000);
function change_img()
{
 if(nn>4) nn=1
 setTimeout('setFocus1('+nn+')',6000);
 nn++;
 tt=setTimeout('change_img()',6000);
}
function setFocus1(i)
{
 selectLayer1(i);
}
function selectLayer1(i)
{
 switch(i)
 {
 case 1:
 document.getElementById("focusPic1").style.display="block";
 document.getElementById("focusPic2").style.display="none";
 document.getElementById("focusPic3").style.display="none";
 document.getElementById("focusPic4").style.display="none";
 document.getElementById("focusPic1nav").style.display="block";
 document.getElementById("focusPic2nav").style.display="none";
 document.getElementById("focusPic3nav").style.display="none";
 document.getElementById("focusPic4nav").style.display="none";
 break;
 case 2:
 document.getElementById("focusPic1").style.display="none";
 document.getElementById("focusPic2").style.display="block";
 document.getElementById("focusPic3").style.display="none";
 document.getElementById("focusPic4").style.display="none";
 document.getElementById("focusPic1nav").style.display="none";
 document.getElementById("focusPic2nav").style.display="block";
 document.getElementById("focusPic3nav").style.display="none";
 document.getElementById("focusPic4nav").style.display="none";
 break;
 case 3:
 document.getElementById("focusPic1").style.display="none";
 document.getElementById("focusPic2").style.display="none";
 document.getElementById("focusPic3").style.display="block";
 document.getElementById("focusPic4").style.display="none";
 document.getElementById("focusPic1nav").style.display="none";
 document.getElementById("focusPic2nav").style.display="none";
 document.getElementById("focusPic3nav").style.display="block";
 document.getElementById("focusPic4nav").style.display="none";
 break;
 case 4:
 document.getElementById("focusPic1").style.display="none";
 document.getElementById("focusPic2").style.display="none";
 document.getElementById("focusPic3").style.display="none";
 document.getElementById("focusPic4").style.display="block";
 document.getElementById("focusPic1nav").style.display="none";
 document.getElementById("focusPic2nav").style.display="none";
 document.getElementById("focusPic3nav").style.display="none";
 document.getElementById("focusPic4nav").style.display="block";
 break;
 }
}
</script>
<div class="focusPic">
<div id="focusPic1" style="display: block;">
        <div class="pic"> <a href="http://ent.163.com/06/0410/07/2EB5MT7000031H2L.html"><img src="http://cimg2.163.com/ent/2006/4/10/200604100850175803c.jpg" alt="章子怡黑衣蒙头上吴彦祖保姆车" width="228" height="150" border="0" /></a> 
<h3><a href="http://adclient.163.com/event.ng/Type=click&FlightID=54129&AdID=56109&TargetID=515&Values=31
,43,51,60,72,78,85,91,100,110,312,330,332,364,594,702,733,734&Redirect=http://www.eiser.net/j_163_enter_spo1.htm"><img src="http://cimg2.163.com/ent/newimg/focus2_sony.gif" width="104" height="21" alt="" /></a></h3>
        </div>
<h2><a href="http://ent.163.com/06/0410/07/2EB5MT7000031H2L.html">章子怡黑衣蒙头上吴彦祖保姆车</a></h2>
<p>　　章子怡日前和霍启山闹分手，前晚(4月8日)在香港又被媒体跟拍到她和吴彦祖一起玩乐、还一上车就遮遮掩掩 <img src="http://cimg2.163.com/ent/newimg/i4.gif" alt="详细" width="3" height="13" /> <a href="http://ent.163.com/06/0410/07/2EB5MT7000031H2L.html" class="cDRed">详细</a></p>
</div>
<div id="focusPic2" style="display: none;">
        <div class="pic"> <a href="http://ent.163.com/06/0410/13/2EBQ6RK000031NKO.html"><img src="http://cimg2.163.com/ent/2006/4/10/2006041016571088ffc.jpg" alt="刘晓庆重演武则天造型曝光" width="228" height="150" border="0" /></a> 
<h3><a href="http://adclient.163.com/event.ng/Type=click&FlightID=54129&AdID=56109&TargetID=515&Values=31
,43,51,60,72,78,85,91,100,110,312,330,332,364,594,702,733,734&Redirect=http://www.eiser.net/j_163_enter_spo1.htm"><img src="http://cimg2.163.com/ent/newimg/focus2_sony.gif" width="104" height="21" alt="" /></a></h3>
        </div>
<h2><a href="http://ent.163.com/06/0410/13/2EBQ6RK000031NKO.html">刘晓庆重演武则天造型曝光</a></h2>
<p>　　《日月凌空》正紧张拍摄,刘晓庆再次扮演武则天,记者通过特殊渠道获得了两张被称为剧组顶级机密的造型照。 <img src="http://cimg2.163.com/ent/newimg/i4.gif" alt="详细" width="3" height="13" /> <a href="http://ent.163.com/06/0410/13/2EBQ6RK000031NKO.html" class="cDRed">详细</a></p>
</div>
<div id="focusPic3" style="display: none;">
        <div class="pic"> <a href="http://adclient.163.com/event.ng/Type=click&FlightID=55136&AdID=57068&TargetID=515&Values=31,43,51,60,72,78,81,90,100,110,312,330,332,364,582,733,734&Redirect=http://ent.163.com/special/00031SST/FQ.html"><img src="http://cimg2.163.com/ent/2006/4/7/20060407101802517a6.jpg" alt="赢飞利浦768手机" width="228" height="150" border="0" /></a> 
<h3><a href="http://adclient.163.com/event.ng/Type=click&FlightID=54129&AdID=56109&TargetID=515&Values=31
,43,51,60,72,78,85,91,100,110,312,330,332,364,594,702,733,734&Redirect=http://www.eiser.net/j_163_enter_spo1.htm"><img src="http://cimg2.163.com/ent/newimg/focus2_sony.gif" width="104" height="21" alt="" /></a></h3>
        </div>
<h2><a href="http://adclient.163.com/event.ng/Type=click&FlightID=55136&AdID=57068&TargetID=515&Values=31,43,51,60,72,78,81,90,100,110,312,330,332,364,582,733,734&Redirect=http://ent.163.com/special/00031SST/FQ.html">赢飞利浦768手机</a></h2>
<p>　　参加飞利浦手机娱乐关键字专题活动，赢取飞利浦768手机，活动正火热进行中 <img src="http://cimg2.163.com/ent/newimg/i4.gif" alt="详细" width="3" height="13" /> <a href="http://adclient.163.com/event.ng/Type=click&FlightID=55136&AdID=57068&TargetID=515&Values=31,43,51,60,72,78,81,90,100,110,312,330,332,364,582,733,734&Redirect=http://ent.163.com/special/00031SST/FQ.html" class="cDRed">详细</a></p>
</div>
<div id="focusPic4" style="display: none;">
        <div class="pic"><div class="clear flashBlank">　</div> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="228" height="150">
<param name="movie" value="http://cimg3.163.com/ent/2006/0403/pepsi228150.swf" />
<param name="quality" value="high" />
<embed src="http://cimg3.163.com/ent/2006/0403/pepsi228150.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="228" height="150"></embed>
</object> 
<h5><a href="http://adclient.163.com/event.ng/Type=click&FlightID=54129&AdID=56109&TargetID=515&Values=31
,43,51,60,72,78,85,91,100,110,312,330,332,364,594,702,733,734&Redirect=http://http://www.eiser.net/j_163_enter_spo1.htm"><img src="http://cimg2.163.com/ent/newimg/focus2_sony.gif" width="104" height="21" alt="" /></a></h5>
        </div>
<h2><a href="http://adclient.163.com/event.ng/Type=click&FlightID=54561&AdID=56510&TargetID=515&Values=31,43,51,60,72,78,84,91,100,110,312,330,332,364,586,702,733,734&Redirect=http://pepsi.163.com/">中国无名小子挑战球星贝克汉姆</a></h2>
<p>　　两个中国无名小子将会亲身与贝克汉姆、罗纳尔迪尼奥、亨利等世界顶级球星面对面。 <img src="http://cimg2.163.com/ent/newimg/i4.gif" alt="详细" width="3" height="13" /> <a href="http://adclient.163.com/event.ng/Type=click&FlightID=54561&AdID=56510&TargetID=515&Values=31,43,51,60,72,78,84,91,100,110,312,330,332,364,586,702,733,734&Redirect=http://pepsi.163.com/" class="cDRed">详细</a></p>
</div>
<div class="more">
<div class="textNum">
<div class="text">&gt; 更多头图新闻</div>
<div class="num bg1" id="focusPic1nav" style="display: block;">
<ul>
<li>1</li><li><a href="javascript:setFocus1(2);" target="_self">2</a></li><li><a href="javascript:setFocus1(3);" target="_self">3</a></li><li><a href="javascript:setFocus1(4);" target="_self">4</a></li>
</ul>
</div>
<div class="num bg2" id="focusPic2nav" style="display: none;">
<ul>
<li><a href="javascript:setFocus1(1);" target="_self">1</a></li><li>2</li><li><a href="javascript:setFocus1(3);" target="_self">3</a></li><li><a href="javascript:setFocus1(4);" target="_self">4</a></li>
</ul>
</div>
<div class="num bg3" id="focusPic3nav" style="display: none;">
<ul>
<li><a href="javascript:setFocus1(1);" target="_self">1</a></li><li><a href="javascript:setFocus1(2);" target="_self">2</a></li><li>3</li><li><a href="javascript:setFocus1(4);" target="_self">4</a></li>
</ul>
</div>
<div class="num bg4" id="focusPic4nav" style="display: none;">
<ul>
<li><a href="javascript:setFocus1(1);" target="_self">1</a></li><li><a href="javascript:setFocus1(2);" target="_self">2</a></li><li><a href="javascript:setFocus1(3);" target="_self">3</a></li><li>4</li>
</ul>
</div>
</div>
</div>
</div>

运行代码

复制代码