JavaScript经典效果集锦(转)

最新推荐文章于 2017-06-11 23:05:00 发布
最新推荐文章于 2017-06-11 23:05:00 发布
阅读量1k 收藏
点赞数
文章标签： javascript xhtml 操作系统 ViewUI
原文链接：http://www.cnblogs.com/fengju/archive/2008/05/12/6174142.html
版权

JavaScript经典效果集锦(转)

转自：蓝色理想

申请加精，只有这样本帖子才不会沉下去，感觉这个帖子对大家很有用的!

一 实用且必用的小脚本代码:

脚本1：进入主页以后自动播放声音
复制内容到剪贴板
代码:
<embed src="pnm://10.13.31.90/~kayvin/mihunji.rm" hidden=true autostart=true loop=true>
脚本2：进入主页后自动最大话,省的去在自己单击了
复制内容到剪贴板
代码:
<script>
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
</script>
脚本3：显示现在时间的脚本
复制内容到剪贴板
代码:
<script language=vbscript>document.write now</script>
脚本4：显示最后修改时间的脚本
复制内容到剪贴板
代码:
<script>document.write(document.lastModified)</script>
脚本5：设为首页,加为收藏，加入频道,启动outlook发信
复制内容到剪贴板
代码:
<a style="cursor:hand"　
onclick="this.style.behavior="url(#default#homepage)";
this.setHomePage(http://10.13.31.90/~kayvin/);">">设为首页</a>

<a style="cursor:hand"
onclick="window.external.AddFavorite(location.href,document.title);">加入收藏</a>

<a href=javascript:window.external.addChannel("typhoon.cdf")>加入频道</a>

<a href="mailto:kayvin@sohu.com">与我联系</a>
脚本6：状态栏动态显示现在时间
复制内容到剪贴板
代码:
<script>
function see(){
window.setTimeout("see()",1000);
today = new Date();
self.status = today.toString();
}
</script>
<body onload=see()>
脚本7：关闭窗口的脚本
复制内容到剪贴板
代码:
<a href=javascript:close()>[关闭窗口]</a>
脚本8：按下F12键,直接返回首页
复制内容到剪贴板
代码:
<script>function look(){
if(event.keyCode==123){document.location.href=http://10.13.31.90/~kayvin/}
}
if(document.onkeydown==null)
{document.onkeydown=look}
</script>
脚本9：后退,刷新,前进
复制内容到剪贴板
代码:
<input type=button value=后退 onclick=history.go(-1)>

<input type=button value=刷新 onclick=history.go(-0)>

<input type=button value=前进 onclick=history.go(+1)>
脚本10：设定时间弹出窗口,4000=4秒,当然你可以自定义
复制内容到剪贴板
代码:
<script>function l()
{
window.open(" 10.13.31.90/~kayvin/ ","name","width=500,height=150,border=0")
}
setTimeout("l()",4000)

</script>
二 鼠标旁边的提示信息,类似与163登录后的页面提示效果：
复制内容到剪贴板
代码:
<a href="#" 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>
三 如果文字过长,则将过长的部分变成省略号显示：
复制内容到剪贴板
代码:
<DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;
            overflow: hidden; text-overflow:ellipsis">
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>
</DIV>
四 滚动的图片
复制内容到剪贴板
代码:
<script language="javascript">
imgArr=new Array()
imgArr[0]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
imgArr[1]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
imgArr[2]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
imgArr[3]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"
imgArr[4]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"

var moveStep=4        //步长，单位：pixel
var moveRelax=100    //移动时间间隔，单位：ms

ns4=(document.layers)?true:false

var displayImgAmount=4    //视区窗口可显示个数
var divWidth=220    //每块图片占位宽
var divHeight=145    //每块图片占位高

var startDnum=0
var nextDnum=startDnum+displayImgAmount
var timeID
var outHover=false

var startDivClipLeft
var nextDivClipRight

function initDivPlace(){
    if (ns4){
        for (i=0;i<displayImgAmount;i++){
            eval("document.divOuter.document.divAds"+i+".left="+divWidth*i)
        }
        for (i=displayImgAmount;i<imgArr.length;i++){
            eval("document.divOuter.document.divAds"+i+".left="+divWidth*displayImgAmount)
        }
    }else{
        for (i=0;i<displayImgAmount;i++){
            eval("document.all.divAds"+i+".style.left="+divWidth*i)
        }
        for (i=displayImgAmount;i<imgArr.length;i++){
            eval("document.all.divAds"+i+".style.left="+divWidth*displayImgAmount)
        }
    }
}

function mvStart(){
    timeID=setTimeout(moveLeftDiv,moveRelax)
}

function mvStop(){
    clearTimeout(timeID)
}

function moveLeftDiv(){
    if (ns4){
        for (i=0;i<=displayImgAmount;i++){
            eval("document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left=document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left-moveStep")
        }

        startDivClipLeft=parseInt(eval("document.divOuter.document.divAds"+startDnum+".clip.left"))
        nextDivClipRight=parseInt(eval("document.divOuter.document.divAds"+nextDnum+".clip.right"))

        if (startDivClipLeft+moveStep>divWidth){
            eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+divWidth)
            
            eval("document.divOuter.document.divAds"+startDnum+".left="+divWidth*displayImgAmount)
            eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".left=document.divOuter.document.divAds"+nextDnum+".left+"+divWidth)
            eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".clip.left=0")
            
            
            startDnum=(++startDnum)%imgArr.length
            nextDnum=(startDnum+displayImgAmount)%imgArr.length
            
            startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
            nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
        }else{
            eval("document.divOuter.document.divAds"+nextDnum+".clip.left=0")
            startDivClipLeft+=moveStep
            nextDivClipRight+=moveStep
        }
        eval("document.divOuter.document.divAds"+startDnum+".clip.left="+startDivClipLeft)
        eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+nextDivClipRight)
    }else{
        for (i=0;i<=displayImgAmount;i++){
            eval("document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.left=document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.pixelLeft-moveStep")
        }
   
        startDivClipLeft=parseInt(eval("document.all.divAds"+startDnum+".currentStyle.clipLeft"))
        nextDivClipRight=parseInt(eval("document.all.divAds"+nextDnum+".currentStyle.clipRight"))
   
        if (startDivClipLeft+moveStep>divWidth){
            eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+divWidth+","+divHeight+",0"+")'")
            
            eval("document.all.divAds"+startDnum+".style.left="+divWidth*displayImgAmount)
            eval("document.all.divAds"+parseInt((nextDnum+1)%imgArr.length)+".style.left=document.all.divAds"+nextDnum+".style.pixelLeft+"+divWidth)
            
            startDnum=(++startDnum)%imgArr.length
            nextDnum=(startDnum+displayImgAmount)%imgArr.length
            
            startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
            nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
        }else{
            startDivClipLeft+=moveStep
            nextDivClipRight+=moveStep
        }
        eval("document.all.divAds"+startDnum+".style.clip='rect(0,"+divWidth+","+divHeight+","+startDivClipLeft+")'")
        eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+nextDivClipRight+","+divHeight+",0)'")
    }

    if (outHover){
        mvStop()
    }else{
        mvStart()
    }
   
   
}

function writeDivs(){
    if (ns4){
        document.write("<ilayer name=divOuter width=750 height="+divHeight+">")
        
        for (i=0;i<imgArr.length;i++){
            document.write("<layer name=divAds"+i+">")
            document.write(imgArr[i]+" ")
            document.write("</layer>")
        }
        document.write("</ilayer>")
        document.close()
        for (i=displayImgAmount;i<imgArr.length;i++){
            eval("document.divOuter.document.divAds"+i+".clip.right=0")
        }
    }else{
        document.write("<div id=divOuter style='position:relative' width=750 height="+divHeight+">")
        
        for (i=0;i<imgArr.length;i++){
            document.write("<div id=divAds"+i+" style='position:absolute;clip:rect(0,"+divWidth+","+divHeight+",0)'>")
            document.write(imgArr[i]+" ")
            document.write("</div>")
        }
        document.write("</div>")
        for (i=displayImgAmount;i<imgArr.length;i++){
            eval("document.all.divAds"+i+".style.clip='rect(0,0,"+divHeight+",0)'")
        }
    }
}
</script>
<BODY onload=javascript:mvStart()>
<SCRIPT language=javascript>writeDivs();initDivPlace();</SCRIPT>
五 接收键盘指令的脚本:
复制内容到剪贴板
代码:
<SCRIPT language="JavaScript">
<!--
var hotkey=97
var destination="http://www.wyev.com"
if (document.layers)
document.captureEvents(Event.KEYPRESS)
function backhome(e){
if (document.layers){
if (e.which==hotkey)
window.location=destination
}
else if (document.all){
if (event.keyCode==hotkey)
window.location=destination
}
}
document.onkeypress=backhome
//-->
</SCRIPT>


onkeydown="javascript:onenter();"

function onenter(){
if(event.keyCode==13){
alert("回车");
}
}
六 让你的文本链接渐隐渐显:
复制内容到剪贴板
代码:
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<script language="javascript" type="text/javascript">


startColor = "#671700"; // 定义链接颜色
endColor = "#D8D1C5";  // 定义要渐变到最后的颜色

stepIn = 17;
stepOut = 23;

/*
定义是否让所有的文本链接自动渐变，true为是，false为否
*/
autoFade = true;  

/*
在这里定义css样式里的类class：fade，如果为true，那么你要将要渐变的链接上加上此fade样式
*/
sloppyClass = false;

hexa = new makearray(16);
for(var i = 0; i < 10; i++)
    hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

document.onmouseover = domouseover;
document.onmouseout = domouseout;

startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());

var fadeId = new Array();

function dehexize(Color){
var colorArr = new makearray(3);
for (i=1; i<7; i++){
  for (j=0; j<16; j++){
   if (Color.charAt(i) == hexa[j]){
    if (i%2 !=0)
     colorArr[Math.floor((i-1)/2)]=eval(j)*16;
    else
     colorArr[Math.floor((i-1)/2)]+=eval(j);
   }
  }
}
return colorArr;
}

function domouseover() {
  if(document.all){
   var srcElement = event.srcElement;
   if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
        fade(startColor,endColor,srcElement.uniqueID,stepIn);      
   }
}

function domouseout() {
  if (document.all){
   var srcElement = event.srcElement;
    if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
        fade(endColor,startColor,srcElement.uniqueID,stepOut);
    }
}

function makearray(n) {
    this.length = n;
    for(var i = 1; i <= n; i++)
        this[i] = 0;
    return this;
}

function hex(i) {
    if (i < 0)
        return "00";
    else if (i > 255)
        return "ff";
    else
       return "" + hexa[Math.floor(i/16)] + hexa[i%16];}

function setColor(r, g, b, element) {
      var hr = hex(r); var hg = hex(g); var hb = hex(b);
      element.style.color = "#"+hr+hg+hb;
}

function fade(s,e, element,step){
var sr = s[0]; var sg = s[1]; var sb = s[2];
var er = e[0]; var eg = e[1]; var eb = e[2];

if (fadeId[0] != null && fade[0] != element){
  setColor(sr,sg,sb,eval(fadeId[0]));
  var i = 1;
  while(i < fadeId.length){
   clearTimeout(fadeId[i]);
   i++;
   }
  }
  
    for(var i = 0; i <= step; i++) {
     fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
   step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
   ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
  }
fadeId[0] = element;
}

</script>

</BODY>
</HTML>
<A HREF="">让你的文本链接渐隐渐显</A>
七 类似与QQ的好友/黑名单之类的树型菜单_极品:
复制内容到剪贴板
代码:
<!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="">
</HEAD>

<BODY>
<script>
if (!document.getElementById)
    document.getElementById = function() { return null; }

function initializeMenu(menuId, actuatorId) {
    var menu = document.getElementById(menuId);
    var actuator = document.getElementById(actuatorId);

    if (menu == null || actuator == null) return;

    //if (window.opera) return; // I'm too tired

    actuator.parentNode.style.backgroundImage = "url(/images/plus.gif)";
    actuator.onclick = function() {
        var display = menu.style.display;
        this.parentNode.style.backgroundImage =
            (display == "block") ? "url(/images/plus.gif)" : "url(/images/minus.gif)";
        menu.style.display = (display == "block") ? "none" : "block";

        return false;
    }
}
window.onload = function() {
            initializeMenu("productsMenu", "productsActuator");
            initializeMenu("newPhonesMenu", "newPhonesActuator");
            initializeMenu("compareMenu", "compareActuator");
        }
</script>
<style>
body {
  font-family: verdana, helvetica, arial, sans-serif;
}

#mainMenu {
  background-color: #EEE;
  border: 1px solid #CCC;
  color: #000;
  width: 203px;
}

#menuList {
  margin: 0px;
  padding: 10px 0px 10px 15px;
}

li.menubar {
  background: url(/images/plus.gif) no-repeat 0em 0.3em;
  font-size: 12px;
  line-height: 1.5em;
  list-style: none outside;
}

.menu, .submenu {
  display: none;
  margin-left: 15px;
  padding: 0px;
}

.menu li, .submenu li {
  background: url(/images/square.gif) no-repeat 0em 0.3em;
  list-style: none outside;
}

a.actuator {
  background-color: transparent;
  color: #000;
  font-size: 12px;
  padding-left: 15px;
  text-decoration: none;
}

a.actuator:hover {
  text-decoration: underline;
}

.menu li a, .submenu li a {
  background-color: transparent;
  color: #000;
  font-size: 12px;
  padding-left: 15px;
  text-decoration: none;
}

.menu li a:hover, submenu li a:hover {
  /*border-bottom: 1px dashed #000;*/
  text-decoration: underline;
}

span.key {
  text-decoration: underline;
}
</style>
</head>
<body>
<div id="mainMenu">
      <ul id="menuList">
        <li class="menubar">
          <a href="#" id="productsActuator" class="actuator">图秀地带收藏夹</a>
          <ul id="productsMenu" class="menu">
            <li>
              <a href="#" id="newPhonesActuator" class="actuator">我的好友</a>
              <ul id="newPhonesMenu" class="submenu">
                <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li>
                <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li>
                <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li>
                <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li>
              </ul>
            </li>
            <li>
              <a href="#" id="compareActuator" class="actuator">陌生人</a>
              <ul id="compareMenu" class="submenu">
                <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li>
                <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li>
                <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li>
                <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</BODY>
</HTML>
八 很多的脚本翻页:
复制内容到剪贴板
代码:
<!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
----------------------
Author : Lapuasi
E-Mail : lapuasi@gmail.com
Web : http://www.lapuasi.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 == '' || 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">&laquo;</span>';
                                strHtml += '<span title="Prev Page">&#8249;</span>';
                        } else {
                                strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&laquo;</a></span>';
                                strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#8249;</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">&#8250;</span>';
                                strHtml += '<span title="Last Page">&raquo;</span>';
                        } else {
                                strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#8250;</a></span>';
                                strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&raquo;</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">&laquo;</span>';
                                strHtml += '<span title="Prev Page">&#8249;</span>';
                        } else {
                                strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&laquo;</a></span>';
                                strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#8249;</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">&#8250;</span>';
                                strHtml += '<span title="Last Page">&raquo;</span>';
                        } else {
                                strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#8250;</a></span>';
                                strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&raquo;</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">&laquo;</span>';
                                strHtml += '<span title="Prev Page">&#8249;</span>';
                        } else {
                                strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&laquo;</a></span>';
                                strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#8249;</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">&#8250;</span>';
                                strHtml += '<span title="Last Page">&raquo;</span>';
                        } else {
                                strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#8250;</a></span>';
                                strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&raquo;</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 == '' || args == null) {
                args += '?' + this.argName + '=' + page;
        } else if (args.substr(args.length - 1,1) == '?' || 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 || key == 46 || (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://mc.mapabc.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}/-))?(/(0/d{2,3}/)|0/d{2,3}-)?[1-9]/d{6,7}$/,
        Mobile : /^((/(/d{3}/))|(/d{3}/-))?13/d{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 : ["以下原因导致提交失败：/t/t/t/t"],
        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>
[ 本帖最后由 forest 于 2006-5-17 10:22 编辑 ]
成功就是成为最好的你自己!
QQ
UID
491 
帖子
2913 
精华
34 
积分
7838 
开源币
325  
阅读权限
100 
来自
河南南阳 
在线时间
1870 小时 
注册时间
2005-10-19 
最后登录
2008-5-12 

查看个人网站

查看详细资料

引用 使用道具 报告 回复 TOP

forest

木林森

名誉版主

Rank: 8Rank: 8

第一颗象牙第二颗象牙第三颗象牙
2# 大 中 小 发表于 2006-5-15 21:52  只看该作者

JavaScript经典效果集锦之二

十一 漂亮的脚本日历：
复制内容到剪贴板
代码:
<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>
十二 进入,退出页面的各种效果:
进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">
这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23:
　　0 矩形缩小
　　1 矩形扩大
　　2 圆形缩小
　　3 圆形扩大
　　4 下到上刷新
　　5 上到下刷新
　　6 左到右刷新
　　7 右到左刷新
　　8 竖百叶窗
　　9 横百叶窗
　　10 错位横百叶窗
　　11 错位竖百叶窗
　　12 点扩散
　　13 左右到中间刷新
　　14 中间到左右刷新
　　15 中间到上下
　　16 上下到中间
　　17 右下到左上
　　18 右上到左下
　　19 左上到右下
　　20 左下到右上
　　21 横条
　　22 竖条
　　23 以上22种随机选择一种

十三 很酷的效果,表格被选中回变颜色:
复制内容到剪贴板
代码:
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<html>
<head>
</head>
<title>Mapabc地图无限</title>

<script language="JavaScript">
        var searchResult=new Array();//鼠标滑过时显示背景色
                function borderize(what,color,color2)
                {
                        what.style.borderColor=color
                        what.style.backgroundColor=color2
                }

                function borderize_on(e){
                        if (document.all)
                                source3=event.srcElement
                        else if (document.getElementById)
                                source3=e.target
                        if (source3.className=="zuo22"){
                                borderize(source3,"#999999","#F6F6F8")
                        }
                        else{
                                while(source3.tagName!="TABLE"){
                                        source3=document.getElementById? source3.parentNode : source3.parentElement
                                        if (source3.className=="zuo22")
                                                borderize(source3,"#999999","#F6F6F8")
                                }
                        }
                }

                function borderize_off(e){

                        if (document.all)
                                source4=event.srcElement
                        else if (document.getElementById)
                                source4=e.target
                        if (source4.className=="zuo22")
                                borderize(source4,"white","white")
                        else{
                                while(source4.tagName!="TABLE"){
                                        source4=document.getElementById? source4.parentNode : source4.parentElement
                                        if (source4.className=="zuo22")
                                                borderize(source4,"white","white")
                                }
                        }
                }                
</script>

<body >
                <table width="96%" border="0" onMouseOver="borderize_on(event)" onMouseOut="borderize_off(event)" class="zuo22" onclick="javascript:clickfun('123')">
                        <TR>
                                <TD>把鼠标移过来</TD>
                                <TD>把鼠标移过来</TD>
                        </TR>
<TR>
                                <TD>把鼠标移过来</TD>
                                <TD>把鼠标移过来</TD>
                        </TR>
<TR>
                                <TD>把鼠标移过来</TD>
                                <TD>把鼠标移过来</TD>
                        </TR>
<TR>
                                <TD>把鼠标移过来</TD>
                                <TD>把鼠标移过来</TD>
                        </TR>
                </table>

</body>
</html>
十四 弹出提示的效果：
复制内容到剪贴板
代码:
<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>
十五 图片之间的切换：
复制内容到剪贴板
代码:
<script language=JavaScript>
<!--
var imgUrl=new Array();
var imgLink=new Array();
var adNum=0;
var jumpUrl="http://sports.tom.com/";

imgLink[1]="http://sports.tom.com/gnzt/2005yg/";
imgLink[2]="http://sports.tom.com/zhty/";


imgUrl[1]="http://img.sports.tom.com/img/assets/200509/050927071818sportsgnzt200592701.jpg";
imgUrl[2]="http://img.sports.tom.com/img/assets/200509/050927075953zt20050926107.jpg";

var imgPre=new Array();
var j=0;
for (i=1;i<=imgUrl.length-1;i++) {
        if(imgLink[i]!="") {j++;}
        else {break;}
}
function playTran(){
        if (document.all)
                imgInit.filters.revealTrans.play();
}
var key=0;
function nextAd(){
        if(adNum<j)adNum++ ;
        else adNum=1;
        if( key==0 ){key=1;}
        else if (document.all){
                imgInit.filters.revealTrans.Transition=6;
                imgInit.filters.revealTrans.apply();
                playTran();
        }
        document.images.imgInit.src=imgUrl[adNum];
        jumpUrl=imgLink[adNum];
        theTimer=setTimeout("nextAd()", 7000);
}
function goUrl(){       
        jumpTarget='_blank';
        if (jumpUrl != ''){
                if (jumpTarget != '') window.open(jumpUrl,jumpTarget);
                else location.href=jumpUrl;
        }
}
//-->
</script>

<a href="javascript:goUrl()"><img style="FILTER:
revealTrans(duration=2,transition=6);border:1 solid black" src="javascript:nextAd()" width=300
border=0 name=imgInit height="210"></a>
</body>
</html>
十六 DIV_圆边圆角的实现：
复制内容到剪贴板
代码:
<html xmlns:v>
<head>
<style>
v/:*{behavior: url(#default#VML);}
</style>
</head>
<body>
<v:roundRect style="position:absolute;left:20px;top:50px;width:200px;height:140px;" FillColor="#AAEAFA" Filled="T" />
</body>
十七 跳动的菜单：
复制内容到剪贴板
代码:
<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">
<!-- saved from url=(0047)http://nnyc.vicp.net:4099/schoolstation/te.aspx -->
<HTML><HEAD><TITLE>te</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2800.1528" name=GENERATOR>
<META content=C# name=CODE_LANGUAGE>
<META content=JavaScript name=vs_defaultClientScript>
<META content=http://schemas.microsoft.com/intellisense/ie5
name=vs_targetSchema><LINK href="te.files/mycss.css" type=text/css
rel=stylesheet></HEAD>
<BODY background=te.files/qback1.gif><!-- MUST CALL INTEGRATORWEB METHOD _DIRECTLY_ AFTER DEFINING THE IX OBJECT -->
<FORM id=Form1 name=Form1 action=te.aspx method=post> &nbsp;
<TABLE id=Table1 style="POSITION: static" borderColor=#cccccc cellSpacing=0
cellPadding=0 width=500 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD style="LINE-HEIGHT: 1.5em; HEIGHT: 35px" borderColor=#ffffff
background=te.files/titledown.gif colSpan=2><FONT face=宋体></FONT></TD></TR>
<TR>
<TD
style="PADDING-LEFT: 15px; COLOR: #660033; LINE-HEIGHT: 1.5em; PADDING-TOP: 10px"
vAlign=top borderColor=#ffffff align=left
background=te.files/bg1.gif><FONT face=宋体>友善提醒：<BR>1、如果别的程
序（如qq）或者其他网页正在使用摄像头,请先关闭相关程序，否则本</FONT><FONT
face=宋体>网页对摄像头的功能不能使用。<BR>2、本网页必须使用一个插件ezvidc60.ocx，如果你未安装，请<A
href="http://nnyc.vicp.net:4099/schoolstation/source/ezvid.rar">下载安装</A>,(把下载的文件ezvid.rar解压到一个目录后，双击执行ezvid.bat即可)。如果您认为这会威胁到您计算机的安全，请关闭本页。</FONT></FONT></TD>
<TD style="HEIGHT: 222px" borderColor=#ffffff align=middle>
<OBJECT id=Form1_vd height=240 width=320
classid=CLSid:DF6D6569-5B0C-11D3-9396-008029E9B3A6 name=Form1_vd
VIEWASTEXT>
<PARAM NAME="_ExtentX" VALUE="8467">
<PARAM NAME="_ExtentY" VALUE="6350">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="CenterVideo" VALUE="-1">
<PARAM NAME="BackColor" VALUE="-2147483643">
<PARAM NAME="BorderStyle" VALUE="1">
<PARAM NAME="VideoBorder" VALUE="1">
<PARAM NAME="DriverIndex" VALUE="0">
<PARAM NAME="Preview" VALUE="-1">
<PARAM NAME="PreviewRate" VALUE="15">
<PARAM NAME="Overlay" VALUE="0">
<PARAM NAME="StretchPreview" VALUE="0">
<PARAM NAME="CancelKey" VALUE="0">
<PARAM NAME="CaptureRate" VALUE="66666">
<PARAM NAME="MakeUserConfirmCapture" VALUE="-1">
<PARAM NAME="PercentDropForError" VALUE="10">
<PARAM NAME="CaptureViaBackgroundThread" VALUE="0">
<PARAM NAME="IndexSize" VALUE="27000">
<PARAM NAME="CaptureAudio" VALUE="0">
<PARAM NAME="AbortLeftMouse" VALUE="-1">
<PARAM NAME="AbortRightMouse" VALUE="-1">
<PARAM NAME="TimeLimitEnabled" VALUE="0">
<PARAM NAME="TimeLimit" VALUE="30">
<PARAM NAME="StreamMaster" VALUE="0">
<PARAM NAME="YieldEventEnabled" VALUE="0">
<PARAM NAME="FrameEventEnabled" VALUE="0">
<PARAM NAME="VideoStreamEventEnabled" VALUE="0">
<PARAM NAME="WaveStreamEventEnabled" VALUE="0">
<PARAM NAME="UsePreciseCaptureControls" VALUE="0">
<embed src="8467" width="320" height="240" _extentx="8467" _extenty="6350" autosize="-1" centervideo="-1" backcolor="-2147483643" borderstyle="1" videoborder="1" driverindex="0" preview="-1" previewrate="15" overlay="0" stretchpreview="0" cancelkey="0" capturerate="66666" makeuserconfirmcapture="-1" percentdropforerror="10" captureviabackgroundthread="0" indexsize="27000" captureaudio="0" abortleftmouse="-1" abortrightmouse="-1" timelimitenabled="0" timelimit="30" streammaster="0" yieldeventenabled="0" frameeventenabled="0" videostreameventenabled="0" wavestreameventenabled="0" useprecisecapturecontrols="0">
</embed>
</OBJECT></TD></TR>
<TR>
<TD style="HEIGHT: 36px" align=middle background=te.files/title.gif
colSpan=2><FONT
face=宋体><INPUT onclick=catchone(); type=button value=照相></FONT></TD></TR></TBODY></TABLE></FORM>
<SCRIPT language=javascript>
    function catchone()
    {
        Form1.Form1_vd.SaveDIB("c://hosngcapture.dib");
        alert("图像存放在 c://hosngcapture.dib");
    }

    </SCRIPT>
</BODY></HTML>


===================================================================================


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0047)http://nnyc.vicp.net:4099/schoolstation/te.aspx -->
<HTML><HEAD><TITLE>te</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2800.1528" name=GENERATOR>
<META content=C# name=CODE_LANGUAGE>
<META content=JavaScript name=vs_defaultClientScript>
<META content=http://schemas.microsoft.com/intellisense/ie5
name=vs_targetSchema><LINK href="te.files/mycss.css" type=text/css
rel=stylesheet></HEAD>
<BODY background=te.files/qback1.gif><!-- MUST CALL INTEGRATORWEB METHOD _DIRECTLY_ AFTER DEFINING THE IX OBJECT -->
<FORM id=Form1 name=Form1 action=te.aspx method=post> &nbsp;
<TABLE id=Table1 style="POSITION: static" borderColor=#cccccc cellSpacing=0
cellPadding=0 width=500 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD style="LINE-HEIGHT: 1.5em; HEIGHT: 35px" borderColor=#ffffff
background=te.files/titledown.gif colSpan=2><FONT face=宋体></FONT></TD></TR>
<TR>
<TD
style="PADDING-LEFT: 15px; COLOR: #660033; LINE-HEIGHT: 1.5em; PADDING-TOP: 10px"
vAlign=top borderColor=#ffffff align=left
background=te.files/bg1.gif><FONT face=宋体>友善提醒：<BR>1、如果别的程
序（如qq）或者其他网页正在使用摄像头,请先关闭相关程序，否则本</FONT><FONT
face=宋体>网页对摄像头的功能不能使用。<BR>2、本网页必须使用一个插件ezvidc60.ocx，如果你未安装，请<A
href="http://nnyc.vicp.net:4099/schoolstation/source/ezvid.rar">下载安装</A>,(把下载的文件ezvid.rar解压到一个目录后，双击执行ezvid.bat即可)。如果您认为这会威胁到您计算机的安全，请关闭本页。</FONT></FONT></TD>
<TD style="HEIGHT: 222px" borderColor=#ffffff align=middle>
<OBJECT id=Form1_vd height=240 width=320
classid=CLSid:DF6D6569-5B0C-11D3-9396-008029E9B3A6 name=Form1_vd
VIEWASTEXT>
<PARAM NAME="_ExtentX" VALUE="8467">
<PARAM NAME="_ExtentY" VALUE="6350">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="CenterVideo" VALUE="-1">
<PARAM NAME="BackColor" VALUE="-2147483643">
<PARAM NAME="BorderStyle" VALUE="1">
<PARAM NAME="VideoBorder" VALUE="1">
<PARAM NAME="DriverIndex" VALUE="0">
<PARAM NAME="Preview" VALUE="-1">
<PARAM NAME="PreviewRate" VALUE="15">
<PARAM NAME="Overlay" VALUE="0">
<PARAM NAME="StretchPreview" VALUE="0">
<PARAM NAME="CancelKey" VALUE="0">
<PARAM NAME="CaptureRate" VALUE="66666">
<PARAM NAME="MakeUserConfirmCapture" VALUE="-1">
<PARAM NAME="PercentDropForError" VALUE="10">
<PARAM NAME="CaptureViaBackgroundThread" VALUE="0">
<PARAM NAME="IndexSize" VALUE="27000">
<PARAM NAME="CaptureAudio" VALUE="0">
<PARAM NAME="AbortLeftMouse" VALUE="-1">
<PARAM NAME="AbortRightMouse" VALUE="-1">
<PARAM NAME="TimeLimitEnabled" VALUE="0">
<PARAM NAME="TimeLimit" VALUE="30">
<PARAM NAME="StreamMaster" VALUE="0">
<PARAM NAME="YieldEventEnabled" VALUE="0">
<PARAM NAME="FrameEventEnabled" VALUE="0">
<PARAM NAME="VideoStreamEventEnabled" VALUE="0">
<PARAM NAME="WaveStreamEventEnabled" VALUE="0">
<PARAM NAME="UsePreciseCaptureControls" VALUE="0">
<embed src="8467" width="320" height="240" _extentx="8467" _extenty="6350" autosize="-1" centervideo="-1" backcolor="-2147483643" borderstyle="1" videoborder="1" driverindex="0" preview="-1" previewrate="15" overlay="0" stretchpreview="0" cancelkey="0" capturerate="66666" makeuserconfirmcapture="-1" percentdropforerror="10" captureviabackgroundthread="0" indexsize="27000" captureaudio="0" abortleftmouse="-1" abortrightmouse="-1" timelimitenabled="0" timelimit="30" streammaster="0" yieldeventenabled="0" frameeventenabled="0" videostreameventenabled="0" wavestreameventenabled="0" useprecisecapturecontrols="0">
</embed>
</OBJECT></TD></TR>
<TR>
<TD style="HEIGHT: 36px" align=middle background=te.files/title.gif
colSpan=2><FONT
face=宋体><INPUT onclick=catchone(); type=button value=照相></FONT></TD></TR></TBODY></TABLE></FORM>
<SCRIPT language=javascript>
    function catchone()
    {
        Form1.Form1_vd.SaveDIB("c://hosngcapture.dib");
        alert("图像存放在 c://hosngcapture.dib");
    }

    </SCRIPT>
</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>&nbsp;&nbsp;';
        else
                strDisplayPagenation+="上一页&nbsp;&nbsp;";

        for(var i=1;i<=pageSizeCount;i++)
        {
                if(i!=currentPage)
                        strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');">'+i+'</a>&nbsp;&nbsp;';
                else
                        strDisplayPagenation+=i+"&nbsp;&nbsp;";
        }

        if(currentPage&&currentPage!=pageSizeCount)
                strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一页</a>&nbsp;&nbsp;';
        else
                strDisplayPagenation+="下一页&nbsp;&nbsp;";

        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>
二十 类似与google个性页面的好东东:
复制内容到剪贴板
代码:
<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;'>&lt;$2&gt;</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万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步<br/> 印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角 美加施冷箭</td>
                        <tr>
                </table>
                <table border=0 class="dragTable" cellspacing="0">
                        <tr>
                                <td>焦点</td>
                        </tr>
                        <tr>
                                <td>京广线中断4小时20临客返汉晚点 中国新闻网-湖北分社 - 所有 235 相关报道 &raquo;哈马斯已有总理人选
                解放日报报业集团 - 所有 489 相关报道 &raquo;陈水扁是两岸关系麻烦制造者 武汉晨报 - 所有 179 相关报道 &raquo;</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>
[ 本帖最后由 forest 于 2006-5-15 22:20 编辑 ]
成功就是成为最好的你自己!
QQ
UID
491 
帖子
2913 
精华
34 
积分
7838 
开源币
325  
阅读权限
100 
来自
河南南阳 
在线时间
1870 小时 
注册时间
2005-10-19 
最后登录
2008-5-12 

查看个人网站

查看详细资料

引用 使用道具 报告 回复 TOP

forest

木林森

名誉版主

Rank: 8Rank: 8

第一颗象牙第二颗象牙第三颗象牙
3# 大 中 小 发表于 2006-5-15 22:06  只看该作者

JavaScript经典效果集锦之三

二十一 漂亮的表格：
复制内容到剪贴板
代码:
<!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>&nbsp;</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">&nbsp;</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">&nbsp;</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>
二十三 运行代码的代码
复制内容到剪贴板
代码:
<script>
function Preview()
{
  var TestWin=open('');
  TestWin.document.write(code.value);

}
</script>

<textarea id=code cols=60 rows=15></textarea>
<br>
<button onclick=Preview() >运行</button>
二十四 凹陷文字
复制内容到剪贴板
代码:
<div style="width:300px;padding:20px;overflow:hidden;word-wrap:break-word;word-break:break:all;

font-size:12px; line-height:18px; background-color:#eeeeee;">
<font disabled>
怎么样，我凹下去了吧？<br>
你不想试试吗？<br>
<a href="http://www.lenvo.cn/">www.lenvo.cn</a></font>
</div>
二十五 漂亮的仿flash菜单
复制内容到剪贴板
代码:
<style>
/* 先把这个 xmenu 的样式放到css里 */
.xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px

solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;}
</style>

<script>
/*
http://lexrus.blueidea.com

这是把事件动作绑定到菜单上的函数
*/
function attachXMenu(objid){
        var tds=objid.getElementsByTagName('td');
        for(var i=0;i<tds.length;i++){
                with(tds[i]){
                        onmouseover=function(){
                                with(this){
                                        filters[0].apply();
                                        style.background='#66CCFF'; //这是鼠标移上去时的背景颜色
                                        style.border='1px solid #ffffff'; //边框
                                        style.color='black'; //文字颜色
                                        filters[0].play();
                                }
                        }
                        onmouseout=function(){
                                with(this){
                                        filters[0].apply();
                                        style.background='#336699'; //这是鼠标离开时的背景颜色
                                        style.border='1px solid #336699'; //边框
                                        style.color='#ffffff'; //文字颜色
                                        filters[0].play();
                                }
                        }
                }
        }
}
</script>

<!--菜单从这里开始, 注意要把class设置成和css里相同的, 还要为它设一个id-->
<table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4" border="0"

bgcolor="#336699" align="center">
        <tr>
                <td><a href="http://www.lenvo.cn/">www.lenvo.cn</a></td>
                <td>Name</td>
                <td>Is</td>
                <td>LeX</td>
                <td>Rus</td>
                <td>!!!</td>
        </tr>
</table>

<script>attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是

那个table的id</script>
<br><br><br><br>
<!--下面这个是竖排的-->
<table class="xmenu" id="xmenu1" width="100" cellpadding="1" cellspacing="4" border="0"

bgcolor="#336699" align="center">
        <tr><td>My</td></tr>
        <tr><td>Name</td></tr>
        <tr><td>Is</td></tr>
        <tr><td>LeX</td></tr>
        <tr><td>Rus</td></tr>
        <tr><td>!!!</td></tr>
</table>
<script>attachXMenu(xmenu1);</script>
二十六 自定义容器和字体大小
复制内容到剪贴板
代码:
<!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" xml:lang="en" lang="en">




<head>

<title>Home</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="The Man in Blue" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<style type="text/css" media="all">




body
{
        margin: 1em;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
}

body *
{
        margin: 0;
}

#content
{
        padding: 1em;
        background-color: #BBDDFF;
        background-image: url(column_bg.gif);
        background-repeat: repeat-y;
        background-position: 30em 0;
        text-align: left;
}

#content p
{
        margin-bottom: 1em;
}

#footer
{
        margin-top: 1em;
        padding: 1em;
        background-color: #0066CC;
        text-align: left;
}

#footer a
{
        color: #FFFFFF;
}

#header
{
        margin-bottom: 1em;
        padding: 1em;
        background-color: #0066CC;
        color: #FFFFFF;
        text-align: left;
}

#leftContent
{
        padding-right: 10em;
}

#options
{
        margin-bottom: 1em;
        text-align: right;
}

#options a
{
        color: #000000;
}

#rightContent
{
        float: right;
        width: 8em;
}

#widthContainer
{
        font-size: 0.8em;
        width: 40em;
        margin: auto;
}

.clearer
{
        clear: both;
}




</style>

<script type="text/javascript">
<!--




function scaleWidth()
{
        var optimalLineLength = "35em";
        var extraAccounting = "12em";
        var minimumTextHeight = "10px";
        var windowWidth = document.body.clientWidth;
        var optimalSize = windowWidth / (parseInt(optimalLineLength) + parseInt(extraAccounting));

        if (optimalSize >= parseInt(minimumTextHeight))
        {
                document.body.style.fontSize = optimalSize + "px";
        }
        else
        {
                document.body.style.fontSize = parseInt(minimumTextHeight) + "px";
        }

        return true;
}




function textSize(size)
{
        var theContainer = document.getElementById("widthContainer");
        var increment = 0.1
        var currentSize = parseFloat(document.getElementById("widthContainer").style.fontSize);

        if (!currentSize)
        {
                currentSize = 0.8;
        }

        if (size == "smaller")
        {
                theContainer.style.fontSize = (currentSize - increment) + "em";
        }
        else
        {
                theContainer.style.fontSize = (currentSize + increment) + "em";
        }

        return true;
}




-->
</script>

</head>




<body onload="scaleWidth();" onresize="scaleWidth();">
        <div id="widthContainer">
                <div id="options">

                        <a href="#" onclick="textSize('smaller'); return false;">Text smaller</a> |
                        <a href="#" onclick="textSize('bigger'); return false;">Text bigger</a>
                </div>
<!-- END options -->
                <div id="header">
                        <h1>Browser-width defined font size</h1>
                </div>
<!-- END header -->

                <div id="content">
                        <div id="rightContent">
                                <p>
                                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lobortis ullamcorper augue. Praesent vel felis vitae purus ornare pretium. Nullam porta sollicitudin lectus. Integer non arcu eu neque tincidunt tincidunt. Nullam sapien arcu, ullamcorper sed, hendrerit in, rutrum in, nibh. Aliquam sed enim. Cras rhoncus ullamcorper justo. Aenean quam dolor, consectetuer sed, dapibus quis, iaculis id, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lacinia velit ac elit. Etiam id nulla. Phasellus at arcu ac mauris hendrerit ullamcorper. Quisque posuere sodales risus. Sed nunc nibh, egestas a, blandit eget, facilisis vel, dolor. Cras metus urna, feugiat et, iaculis quis, lacinia a, elit. Etiam enim. Maecenas viverra, est non tincidunt euismod, diam urna volutpat mi, in luctus pede ante sit amet risus.
                                </p>
                        </div>
<!-- END rightContent -->
                        <div id="leftContent">
                                <p>
                                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lobortis ullamcorper augue. Praesent vel felis vitae purus ornare pretium. Nullam porta sollicitudin lectus. Integer non arcu eu neque tincidunt tincidunt. Nullam sapien arcu, ullamcorper sed, hendrerit in, rutrum in, nibh. Aliquam sed enim. Cras rhoncus ullamcorper justo. Aenean quam dolor, consectetuer sed, dapibus quis, iaculis id, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lacinia velit ac elit. Etiam id nulla. Phasellus at arcu ac mauris hendrerit ullamcorper. Quisque posuere sodales risus. Sed nunc nibh, egestas a, blandit eget, facilisis vel, dolor. Cras metus urna, feugiat et, iaculis quis, lacinia a, elit. Etiam enim. Maecenas viverra, est non tincidunt euismod, diam urna volutpat mi, in luctus pede ante sit amet risus.
                                </p>

                                <p>
                                        Nulla metus. Ut sodales, tortor nec sollicitudin convallis, diam diam vulputate ligula, lobortis tincidunt urna purus at urna. Pellentesque laoreet. Nulla et dolor. Praesent vestibulum quam convallis neque. Praesent sit amet odio a dui iaculis dignissim. In vel nunc a tellus vulputate pellentesque. Maecenas bibendum. Donec mi nibh, euismod in, iaculis a, eleifend et, enim. In eget lectus vitae pede nonummy elementum. Mauris accumsan, lacus ut euismod varius, odio neque egestas quam, non aliquam velit purus et purus. Vestibulum at elit nec felis suscipit pulvinar. Suspendisse at enim quis lacus mattis condimentum. Proin arcu arcu, imperdiet vitae, aliquam non, congue id, ipsum.
                                </p>
                                <p>
                                        Aliquam eu dolor nec risus luctus faucibus. Aenean condimentum, tortor in blandit cursus, dolor magna sagittis orci, vel vehicula dolor ante at lacus. Donec vel felis in enim aliquam molestie. Sed non velit id velit pulvinar consequat. Mauris luctus. Phasellus faucibus turpis nec purus. Mauris eget ante. Donec orci enim, luctus eu, posuere at, luctus quis, pede. In in lectus. Quisque blandit, ipsum eget tincidunt scelerisque, mauris ante accumsan erat, quis congue odio erat vitae diam. Donec ut felis fermentum sem viverra pulvinar. Sed neque lorem, adipiscing ut, placerat a, ornare et, dolor. Vestibulum pretium vehicula nibh. Etiam feugiat, ligula sed pulvinar fringilla, eros arcu placerat urna, nec eleifend nisl leo sit amet urna. Suspendisse quis augue ut nibh venenatis nonummy. Nunc ut augue. In fermentum, neque eget eleifend rutrum, nulla lorem fermentum massa, eu cursus lectus mi id libero.
                                </p>
                                <p>
                                        Nam congue ligula quis magna. Vivamus porttitor nunc non dui. Aliquam posuere dapibus tortor. Quisque facilisis, quam in semper luctus, lacus dolor gravida massa, ultrices consectetuer risus arcu nec nibh. Nulla facilisi. In a eros id eros lobortis ultrices. Vivamus sit amet neque eu magna venenatis nonummy. Pellentesque consequat. Etiam ut ipsum. Nulla consectetuer est vel quam.
                                </p>
                                <p>

                                        Integer eu diam vitae augue sollicitudin congue. Praesent vulputate pede vel velit. Maecenas dapibus tempus lacus. Quisque lectus metus, pretium ac, mollis nec, dignissim quis, mi. Aliquam purus risus, pharetra eget, condimentum ut, blandit sit amet, leo. Suspendisse iaculis purus sed tellus. Nunc sem justo, porttitor ut, pretium eu, hendrerit eu, nunc. Vivamus sit amet neque in est venenatis faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam rhoncus, eros id ultrices facilisis, pede ligula dignissim eros, sit amet tempus risus urna sed nibh. Sed massa eros, dapibus tristique, blandit et, molestie sed, enim. Phasellus leo. Integer vestibulum volutpat enim. Duis pulvinar ligula. Pellentesque luctus velit a justo. Quisque volutpat, diam quis varius commodo, neque elit dictum tortor, quis aliquet felis risus vitae wisi. Aliquam bibendum, elit ut gravida vehicula, orci turpis auctor dolor, nec tristique tortor dolor eget ipsum.
                                </p>
                        </div>
<!-- END leftContent -->
                        <div class="clearer">
                        </div>
                </div>
<!-- END content -->
                <div id="footer">
                        <a href="http://www.themaninblue.com/writing/perspective/2003/12/22/">Back to the explanation</a>

                </div>
        </div>
<!-- END widthContainer -->
</body>
</html>
[ 本帖最后由 forest 于 2006-5-15 22:16 编辑 ]
成功就是成为最好的你自己!
QQ
UID
491 
帖子
2913 
精华
34 
积分
7838 
开源币
325  
阅读权限
100 
来自
河南南阳 
在线时间
1870 小时 
注册时间
2005-10-19 
最后登录
2008-5-12 

查看个人网站

查看详细资料

引用 使用道具 报告 回复 TOP

forest

木林森

名誉版主

Rank: 8Rank: 8

第一颗象牙第二颗象牙第三颗象牙
4# 大 中 小 发表于 2006-5-15 22:15  只看该作者

JavaScript经典效果集锦之四

二十七 超级REAL视频播放器
复制内容到剪贴板
代码:
<object id="player" name="player" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"

width="339" height="227">
                          <param name="_ExtentX" value="9869">
<param name="_ExtentY" value="7726">
<param name="AUTOSTART" value="-1">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="-1">
<param name="SRC" value="http://entdown.163.com/ent/garbage/mv/1028/xuemv.rm">
<param name="CONTROLS" value="Imagewindow">
<param name="CONSOLE" value="clip1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
</object>
<br>
二十八 网站论坛上面快捷键提交表单的方法
复制内容到剪贴板
代码:
<script language=javascript>
ie = (document.all)? true:false
if (ie){
function ctlent(eventobject){if(event.ctrlKey &&

window.event.keyCode==13){this.document.form1.submit();}}
}
</script>

<form action="http://www.jluvip.com/index.html" method=POST name=form1>
<textarea cols=95 name=Content rows=12 wrap=virtual onkeydown=ctlent()>
Ctrl+Enter提交内容信息
</textarea>
<input type=Submit value="Submit" name=Submit>
</form>
二十九 accesskey 提交
复制内容到剪贴板
代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<form action="http://www.jluvip.com/index.html" method=POST name=form1>
<textarea ></textarea>
<br><input type=submit accessKey="S" value=提交(Alt+s)>
</form>
三十 新闻广告图片切换效果+描述
复制内容到剪贴板
代码:
<!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">&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>
</body>
</html>
成功就是成为最好的你自己!
QQ
UID
491 
帖子
2913 
精华
34 
积分
7838 
开源币
325  
阅读权限
100 
来自
河南南阳 
在线时间
1870 小时 
注册时间
2005-10-19 
最后登录
2008-5-12 

查看个人网站

查看详细资料

引用 使用道具 报告 回复 TOP

forest

木林森

名誉版主

Rank: 8Rank: 8

第一颗象牙第二颗象牙第三颗象牙
5# 大 中 小 发表于 2006-5-15 22:17  只看该作者

JavaScript经典效果集锦之五

三十一 菜单特效
复制内容到剪贴板
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0046)http://vip.aou.cn/csqf/new_page_3.htm -->
<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的下拉菜单
复制内容到剪贴板
代码:
<!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>nav</title>
<script language="javascript">
// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<style type="text/css">
<!--
body {
  font: normal 11px verdana;
  }

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 150px; /* Width of Menu Items */
  border-bottom: 1px solid #ccc;
  }
  
ul li {
  position: relative;
  }
  
li ul {
  position: absolute;
  left: 149px; /* Set 1px less than menu width */
  top: 0;
  display: none;
  }

/* Styles for Menu Items */
ul li a {
  display: block;
  text-decoration: none;
  color: #777;
  background: #fff; /* IE6 Bug */
  padding: 5px;
  border: 1px solid #ccc; /* IE6 Bug */
  border-bottom: 0;
  }
  
/* Holly Hack. IE Requirement /*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul { display: block; } /* The magic */
-->
</style>
</head>

<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>

</ul>
</body>
</html>
成功就是成为最好的你自己!

转载于:https://www.cnblogs.com/fengju/archive/2008/05/12/6174142.html

weixin_30455067
关注
JavaScript经典效果集锦
12-10
一 实用且必用的小脚本代码二 鼠标旁边的提示信息,类似与163登录后的页面提示效果三 如果文字过长,则将过长的部分变成省略号显示四 滚动的图片五 接收键盘指令的脚本六 让你的文本链接渐隐渐显七 类似与QQ的好友/黑名单之类的树型菜单—–推荐八 很多的脚本翻页——推荐九 DIV的透明层实现十 JSP页面自动生成html页面/或任何格式页面—–推荐 十一 超级强大的表单验证—–推荐十二 漂亮的脚本日历十三 进入,退出页面的各种效果!十四 很酷的效果,表格被选中回变颜色十五 弹出提示的效果十六 图片之间的切换十七 DIV_圆边圆角的实现十八 跳动的菜单十九 通过页面抓取照片二十 客户端静态页面玩分页
JavaScript经典效果集锦（一）
weixin_33696822的博客
12-29 117
绝大部分属于转载,有很多还是出自咱们蓝色的经典论坛. *****[第1页目录]*****一 实用且必用的小脚本代码二 鼠标旁边的提示信息,类似与163登录后的页面提示效果三 如果文字过长,则将过长的部分变成省略号显示四 滚动的图片五 接收键盘指令的脚本六 让你的文本链接渐隐渐显七 类似与QQ的好友/黑名单之类的树型菜单-----推荐八 很多的脚本翻页------推荐九 DIV的透明层实现十 JS...
JavaScript经典效果集锦(一)
专心学习
05-28 970
绝大部分属于转载,有很多还是出自咱们蓝色的经典论坛.*****[第1页目录]*****一 实用且必用的小脚本代码二 鼠标旁边的提示信息,类似与163登录后的页面提示效果三 如果文字过长,则将过长的部分变成省略号显示四 滚动的图片五 接收键盘指令的脚本六 让你的文本链接渐隐渐显七 类似与QQ的好友/黑名单之类的树型菜单-----推荐八 很多的脚本翻页------推荐九 DIV的透明层实现十 JS
javascript经典特效（二）
dczjn9698的博客
03-30 560
二十一 类似与google个性页面的好东东: View Code 二十二 漂亮的表格： View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http...
JavaScript 特效三大系列总结
diaozhu1028的博客
06-11 584
一. offset系列 1. offset系列的5个属性 1. offsetLeft : 用于获取元素到最近的定位父盒子的左侧距离 * 计算方式: 当前元素的左边框的左侧到定位父盒子的左边框右侧 * 如果父级盒子没有定位, 那么会接着往上找有定位的盒子 * 如果上级元素都没有定位,那么最后距离是与body的left值 2. offsetTop : ...
JavaScript经典效果收藏
龙的天空
06-18 849
 荧 光 效 果.荧 光 效 果span id="theText" style="width:100%">h1>font size="2">用户名:font>h1>span> script language="JavaScript">function SymError()...{  return true;}window.onerror = SymError;//-->script>scr
javascript经典效果示例
03-06
73个效果的实例 01:___CSS+JS滚动图片功能代码 02:___CSS使用图片完美修饰的全兼容圆角框 03:___CSS制作的类似相册浏览的功能 04:___CSS完成神奇创意的相框 05:___CSS实现自适应的图片背景边框 06:___CSS将图片自动变为圆角 07:___CSS强制等比例缩小图片 08:___Javascript仿Flash图片轮翻 09:___JavaScript图片滚动（绝对酷） 10:___JavaScript生成弹性透明的图片放大代码 11:___JavaScript由左向右的图片渐变过渡 12:___JavaScript动态控制图片透明度的变化 13:___JavaScript图片放大 14:___JavaScript图片特效 15:___JavaScript图片预加载代码，显示loading 16:___JavaScript改变图片透明度，鼠标放上渐渐显示 17:___JavaScript真正的鼠标放上动画加载大图的 18:___JS+CSS给图片加上鼠标滑过的方框 19:___JS卡通图片切换 20:___JS图片切换，带缩略图版 21:___JS图片滚动代码（无缝、平滑） 22:___Js图片连续左右滚动 23:___Js拖动特效，一串水晶球(很强大) 24:___JS放大镜,JavaScript图片放大代码 25:___JS点击小图预览大图（仿淘宝） 26:___亮丽的JS图片渐变导航 27:___从两侧向中间拼合的JavaScript图片切换效果 28:___仿265网站LOGO，会盯着你看的眼睛 29:___像弹簧一样抖动的横向图片滚动 30:___前后轮翻的JS图片幻灯切换 31:___动态的Loading文字，逐个变大 32:___可控的纵向图片滚动 33:___右下角随机显示的JS图片广告 34:___向上翻动的内容切换示例 35:___图片友情链接滚动,横向,带控制按钮 36:___图片围成环形滚动，有空间感 37:___图片型不规则菜单的CSs实现 38:___图片拖拉缩放效果（仿PHOTOSHOP） 39:___图片控制内容框的文字上下翻滚 40:___图片旋转构成3D圆环的展示特效 41:___图片点击后变灰色的CSs代码 42:___图片闪烁代码 43:___图片雷达效果，像光照一样 44:___在图片上单击获取图片原始大小 45:___大幅JS焦点图切换 46:___左右切换鼠标可控的无缝图片滚动代码 47:___平滑图片滚动 48:___很有意思的图片分裂复制效果 49:___按比例缩放图片，JavaScript代码 50:___最简的JavaScript鼠标经过切换图片 51:___有点炫的JavaScript立体图片展示 52:___根据鼠标放上切换内容制作的图片导航 53:___浮动的图片广告 54:___清爽简洁的图片交替导航效果 55:___用CSS实现图片的双边框效果 56:___禁止在图片上使用右键 57:___竖向图片滚动 58:___纯CSS代码实现的图片列表滚动 59:___纯CSS实现鼠标移上图片添加阴影效果 60:___经典的图片切换 61:___网站首页js幻灯片代码 62:___美化过的匀速图片滚动 63:___腾讯QQ网站的Js图片切换 64:___自写Js+CSS轮显效果 65:___自动播放——Js幻灯片缓冲效果 66:___规定区域的JS拖动展示效果 67:___超漂亮Js+css图片幻灯切换 68:___马赛克效果的JS图片切换代码 69:___鼠标放到图片上会滑出提示文字 70:___鼠标滑过,缩略图放大显示（纯CSS） 71:___鼠标移上图片，变换出大图片 72:___鼠标经过图片时显示半透明文字，边框变色 73:___鼠标经过图片由灰色变彩色
33个JavaScript经典效果
08-04
33个JavaScript经典效果 实用且必用的小脚本代码
经典 js 经典 js 经典 js
12-26
收藏了本人多年收藏的 感觉不错的很适用的...
JS+Jquery经典特效
12-27
JavaScript百例+jquery-easyui-1.1.2+jquery-easyui-1.2.1+Examples
js绝对经典特效集合01
04-08
js绝对经典特效集合01js绝对经典特效集合01
经典 js 特效（控件）代码
hch126163的专栏
11-30 502
<br />http://www.cnblogs.com/cloudgamer/default.html?OnlyTitle=1
10种经典js特效
12-11
适合于网页设计的10款漂亮js特效，总有一款适合你的网站开发。
Js 10大经典特效
07-09
Js 10大经典特效 十分经典的说~下载试试吧~！
原生JS经典案例特效
10-26
30多套JavaScript的案例库，动画效果。360度全景展示效果，back_评分，back_图片滚动播放，JS简易年历，slide上下滚动条，放大镜简单版，竖排导航，土豆右下角菜单悬浮效果，照片墙一多实例演示_files，back_瀑布流，back_购物车等等..........
JavaScript特效大全：经典实例展示
"JavaScript经典效果集锦" 这篇内容主要展示了JavaScript在网页交互中的各种经典应用，包括但不限于信息提示、页面操作、时间显示、设置主页、收藏、播放音乐、关闭窗口以及键盘事件响应等。以下是这些效果的详细...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值