Wed

04

Mar

2009

60、最简单的页面层

60、最简单的页面层

脚本说明:

把如下代码加入<body>区域中

<div id=sampleLayer style="position:absolute; top:20px; left:15px; width:100px; height:100px; background:#EEEEEE; border: 1px solid #919191; font-family:Verdana; font-size:8pt">这是个简单的层</div>

<script language=JavaScript>

var posX, posY;

var ie    = document.all?1:0;

var ns    = document.layers?1:0;

var dom   = document.getElementById?1:0;

var dhtml = new svetLayer("sampleLayer");

var path  = new Array(452,278,452,278,452,278,452,278,452,278,452,278,452,278,452,278,452,278,452,278,452,278,452,278,452,278);

var index = 0;

var trNum = 0;

function svetLayer(id)

       {

              this.name = dom?document.getElementById(id):ie?document.all[id]:ns?document.layers[id]:null;

              if (this.name !== null)

                     {

                            this.css    = (dom||ie)?this.name.style:this.name;

                            this.x      = dom?this.css.pixelLeft:ie?parseInt(this.css.left):this.css.left;

                            this.y      = dom?this.css.pixelTop:ie?parseInt(this.css.top):this.css.top;

                            this.moveTo = moveTo;

                            return this;

                     }

              else alert('Your layer does not exist');

       }

 

function moveTo(x,y)

       {

              if(dom||ie)

                     {

                            this.x=x;

                            this.y=y;

                            this.css.left=x;

                            this.css.top=y;

                     }

              else this.css.moveTo(x,y);

       }

function timeline()

       {

              if(trNum < (path.length-1))

                     {

                            dhtml.moveTo(path[trNum],path[trNum+1])

                            trNum += 2;

                            setTimeout('timeline()',10);

                     }

              else trNum=0;

       }

window.onload=timeline;

</script>

 

0 Comments

Wed

04

Mar

2009

59、页面中的文字编辑

59、页面中的文字编辑

脚本说明:

第一步:把如下代码加入<body>区域中

<style type="text/css">

SELECT

{

 BACKGROUND: #eeeeee;

 FONT: 8pt verdana,arial,sans-serif

}

.Gen

{

 POSITION: relative

}

TABLE

{

 POSITION: relative

}

.heading

{

 BACKGROUND: #eeeeee;

 Color: #000000

}

.Composition

{

 BACKGROUND-COLOR: menu;

 POSITION: relative

}

.yToolbar

{

 BACKGROUND-COLOR: menu;

 BORDER-BOTTOM: buttonshadow   1px solid;

 BORDER-LEFT: buttonhighlight 1px solid;

 BORDER-RIGHT: buttonshadow 1px solid;

 BORDER-TOP:    buttonhighlight      1px solid;

 HEIGHT: 27px;

 LEFT: 0px;

 POSITION: relative;

 TOP: 0px

}

.Btn

{

 BACKGROUND-COLOR: menu;

 BORDER-BOTTOM: buttonface 1px solid;

 BORDER-LEFT: buttonface 1px solid;

 BORDER-RIGHT: buttonface 1px solid;

 BORDER-TOP:    buttonface 1px solid;

 HEIGHT: 23px;

 POSITION: absolute;

 TOP: 1px;

 WIDTH: 23px

}

.Ico

{

 HEIGHT: 22px;

 LEFT: -1px;

 POSITION: absolute;

 TOP: -1px;

 WIDTH: 22px

}

.TBSep

{

 BORDER-LEFT: buttonshadow 1px solid;

 BORDER-RIGHT: buttonhighlight 1px solid;

 FONT-SIZE: 0px;

 HEIGHT: 22px;

 POSITION: absolute;

 TOP: 1px;

 WIDTH: 1px

}

.TBGen

{

 FONT: 8pt verdana,arial,sans-serif;

 HEIGHT: 22px;

 POSITION: absolute;

 TOP: 2px

}

.TBHandle

{

 BACKGROUND-COLOR: menu;

 BORDER-LEFT: buttonhighlight 1px solid;

 BORDER-RIGHT: buttonshadow 1px solid;

 BORDER-TOP:    buttonhighlight      1px solid;

 FONT-SIZE: 1px;

 HEIGHT: 22px;

 POSITION: absolute;

 TOP: 1px;

 WIDTH: 3px

}

.BtnMouseOverUp

{

 BACKGROUND-COLOR: buttonface;

 BORDER-BOTTOM: buttonshadow   1px solid;

 BORDER-LEFT: buttonhighlight 1px solid;

 BORDER-RIGHT: buttonshadow 1px solid;

 BORDER-TOP:    buttonhighlight      1px solid;

 HEIGHT: 23px;

 POSITION: absolute;

 TOP: 1px;

 WIDTH: 24px

}

.BtnMouseOverDown

{

 BACKGROUND-COLOR: buttonface;

 BORDER-BOTTOM: buttonhighlight 1px solid;

 BORDER-LEFT: buttonshadow 1px solid;

 BORDER-RIGHT: buttonhighlight 1px solid;

 BORDER-TOP:    buttonshadow 1px solid;

 HEIGHT: 23px;

 POSITION: absolute;

 TOP: 1px;

 WIDTH: 24px

}

.BtnDown

{

 BACKGROUND-COLOR: gainsboro;

 BORDER-BOTTOM: buttonhighlight 1px solid;

 BORDER-LEFT: buttonshadow 1px solid;

 BORDER-RIGHT: buttonhighlight 1px solid;

 BORDER-TOP:    buttonshadow 1px solid;

 HEIGHT: 23px;

 POSITION: absolute;

 TOP: 1px;

 WIDTH: 24px

}

.IcoDown

{

 HEIGHT: 23px;

 LEFT: 0px;

 POSITION: absolute;

 TOP: 0px;

 WIDTH: 24px

}

.IcoDownPressed

{

 LEFT: 1px;

 POSITION: absolute;

 TOP: 1px

}

BODY

{

 BORDER-BOTTOM: 0px;

 BORDER-LEFT: 0px;

 BORDER-RIGHT: 0px;

 BORDER-TOP:    0px;

 MARGIN: 3px

}

 

</STYLE>

<div class="yToolbar" ID="ExtToolbar">

 <div class="TBHandle"></div>

 

 <div class="Btn" TITLE="删除" LANGUAGE="javascript" onclick="format1('cut');">

 <img class="Ico" src="delete.gif">

 </div>

 <div class="Btn" TITLE="剪切" LANGUAGE="javascript" onclick="format1('cut');">

 <img class="Ico" src="cut.gif">

 </div>

 <div class="Btn" TITLE="复制" LANGUAGE="javascript" onclick="format1('copy');">

 <img class="Ico" src="copy.gif">

 </div>

 <div class="Btn" TITLE="粘贴" LANGUAGE="javascript" onclick="format1('paste');">

 <img class="Ico" src="paste.gif">

 </div>

 <div class="Btn" TITLE="撤消" LANGUAGE="javascript" onclick="format1('undo');">

 <img class="Ico" src="undo.gif">

 </div>

 <div class="Btn" TITLE="恢复" LANGUAGE="javascript" onclick="format1('redo');">

 <img class="Ico" src="redo.gif">

 </div>

 

 <div class="TBSep"></div>

 

 <div class="Btn" TITLE="插入图片" LANGUAGE="javascript" onclick="UserDialog('InsertImage');">

 <img class="Ico" src="img.gif">

 </div>

 <div class="Btn" TITLE="插入超级连接" LANGUAGE="javascript" onclick="UserDialog('CreateLink')">

 <img class="Ico" src="wlink.gif">

 </div>

 

 <div class="TBSep"></div>

 

 

</div> 

 

<div class="yToolbar"> 

 <div class="TBHandle"></div> 

 <select ID="FontName"      class="TBGen" TITLE="字体名" LANGUAGE="javascript" onchange="format('fontname',this[this.selectedIndex].value);"> 

 <option class="heading">字体

 <option value="宋体">宋体

 <option value="黑体">黑体

 <option value="楷体_GB2312">楷体

 <option value="仿宋_GB2312">仿宋

 <option value="隶书">隶书

 <option value="幼圆">幼圆

  <option value="Arial">Arial

 <option value="Arial Black">Arial Black

 <option value="Arial Narrow">Arial Narrow

 <option value="Bradley Hand     ITC">Bradley Hand ITC

 <option value="Brush Script       MT">Brush Script MT

 <option value="Century Gothic">Century Gothic

 <option value="Comic Sans MS">Comic Sans MS

 <option value="Courier">Courier

 <option value="Courier New">Courier New

 <option value="MS Sans Serif">MS Sans Serif

 <option value="Script">Script

 <option value="System">System

 <option value="Times New Roman">Times New Roman

 <option value="Viner Hand ITC">Viner Hand ITC

 <option value="Verdana">Verdana

 <option value="Wide   Latin">Wide Latin

 <option value="Wingdings">Wingdings

 </select>

 <select ID="FontSize" class="TBGen" TITLE="字号大小" LANGUAGE="javascript" onchange="format('fontsize',this[this.selectedIndex].value);"> 

 <option class="heading">字号

 <option value="7">一号

 <option value="6">二号

 <option value="5">三号

 <option value="4">四号

 <option value="3">五号

 <option value="2">六号

 <option value="1">七号

 </select>

 

 <div class="TBSep"></div>

 

 <div class="Btn" TITLE="加粗" LANGUAGE="javascript" onclick="format('bold');">

 <img class="Ico" src="bold.gif">

 </div>

 <div class="Btn" TITLE="斜体" LANGUAGE="javascript" onclick="format('italic');">

 <img class="Ico" src="italic.gif">

 </div>

 <div class="Btn" TITLE="下划线" LANGUAGE="javascript" onclick="format('underline');">

 <img class="Ico" src="under.gif">

 </div>

 

 <div class="TBSep"></div>

 

 <div class="Btn" TITLE="左对齐" NAME="Justify" LANGUAGE="javascript" onclick="format('justifyleft');">

 <img class="Ico" src="aleft.gif">

 </div>

 <div class="Btn" TITLE="居中" NAME="Justify" LANGUAGE="javascript" onclick="format('justifycenter');">

 <img class="Ico" src="center.gif">

 </div>

 <div class="Btn" TITLE="右对齐" NAME="Justify" LANGUAGE="javascript" onclick="format('justifyright');">

 <img class="Ico" src="aright.gif">

 </div>

 

 <div class="TBSep"></div>

 

 <div class="Btn" TITLE="编号" LANGUAGE="javascript" onclick="format('insertorderedlist');">

 <img class="Ico" src="numlist.gif">

 </div>

 <div class="Btn" TITLE="项目符号" LANGUAGE="javascript" onclick="format('insertunorderedlist');">

 <img class="Ico" src="bullist.gif">

 </div>

 <div class="Btn" TITLE="减少缩进量" LANGUAGE="javascript" onclick="format('outdent');">

 <img class="Ico" src="deindent.gif">

 </div>

 <div class="Btn" TITLE="增加缩进量" LANGUAGE="javascript" onclick="format('indent');">

 <img class="Ico" src="inindent.gif"   >

 </div>

 

 <div class="TBSep"></div>

 

 <div class="Btn" TITLE="字体颜色" LANGUAGE="javascript" onclick="foreColor();">

 <img class="Ico" src="fgcolor.gif" >

 </div>

 

</div>

<div>

<IFRAME      class="Composition" ID="Composition" MARGINHEIGHT="1" MARGINWIDTH="1" width="100%" height="267">

</IFRAME>

</div>

<script    LANGUAGE="Javascript">

SEP_PADDING = 5

HANDLE_PADDING = 7

 

var yToolbars =      new Array();

 

var YInitialized = false;

 

function document.onreadystatechange()

{

 if (YInitialized) return;

 YInitialized = true;

 

 var i, s, curr;

 

 for (i=0; i<document.body.all.length; i++)

 {

 curr=document.body.all[i];

 if (curr.className == "yToolbar")

 {

 InitTB(curr);

 yToolbars[yToolbars.length] = curr;

 }

 }

 

 DoLayout();

 window.onresize = DoLayout;

 

 Composition.document.open()

 Composition.document.write("<head><style type=\"text/css\">body {font-size: 10.8pt} P{margin-top: 0;margin-bottom: 0}</style><meta http-equiv=Content-Type content=\"text/html; charset=gb2312\"></head><BODY bgcolor=\"#FFFFFF\" MONOSPACE></body>");

 Composition.document.close()

 Composition.document.designMode="On"

// setTimeout("Composition.focus();",0);

}

 

function InitBtn(btn)

{

 btn.onmouseover = BtnMouseOver;

 btn.onmouseout = BtnMouseOut;

 btn.onmousedown = BtnMouseDown;

 btn.onmouseup     = BtnMouseUp;

 btn.ondragstart = YCancelEvent;

 btn.onselectstart = YCancelEvent;

 btn.onselect = YCancelEvent;

 btn.YUSERONCLICK = btn.onclick;

 btn.onclick = YCancelEvent;

 btn.YINITIALIZED = true;

 return true;

}

 

function InitTB(y)

{

 y.TBWidth = 0;

 

 if (!       PopulateTB(y)) return false;

 

 y.style.posWidth = y.TBWidth;

 

 return true;

}

 

 

function YCancelEvent()

{

 event.returnValue=false;

 event.cancelBubble=true;

 return false;

}

 

function BtnMouseOver()

{

 if (event.srcElement.tagName != "IMG") return       false;

 var image = event.srcElement;

 var element =       image.parentElement;

 

 if (image.className == "Ico")    element.className = "BtnMouseOverUp";

 else if (image.className == "IcoDown") element.className = "BtnMouseOverDown";

 

 event.cancelBubble = true;

}

 

function BtnMouseOut()

{

 if (event.srcElement.tagName != "IMG") {

 event.cancelBubble = true;

 return false;

 }

 

 var image = event.srcElement;

 var element =       image.parentElement;

 yRaisedElement = null;

 

 element.className = "Btn";

 image.className = "Ico";

 

 event.cancelBubble = true;

}

 

function BtnMouseDown()

{

 if (event.srcElement.tagName != "IMG") {

 event.cancelBubble = true;

 event.returnValue=false;

 return false;

 }

 

 var image = event.srcElement;

 var element =       image.parentElement;

 

 element.className = "BtnMouseOverDown";

 image.className = "IcoDown";

 

 event.cancelBubble = true;

 event.returnValue=false;

 return false;

}

 

function BtnMouseUp()

{

 if (event.srcElement.tagName != "IMG") {

 event.cancelBubble = true;

 return false;

 }

 

 var image = event.srcElement;

 var element =       image.parentElement;

 

 if (element.YUSERONCLICK) eval(element.YUSERONCLICK +  "anonymous()");

 

 element.className = "BtnMouseOverUp";

 image.className = "Ico";

 

 event.cancelBubble = true;

 return false;

}

 

function PopulateTB(y)

{

 var i, elements, element;

 

 elements = y.children;

 for (i=0; i<elements.length; i++) {

 element = elements[i];

 if (element.tagName    == "SCRIPT" || element.tagName == "!") continue;

 

 switch (element.className) {

 case "Btn":

 if (element.YINITIALIZED == null)  {

              if (! InitBtn(element))

                     return false;

 }

 

 element.style.posLeft = y.TBWidth;

 y.TBWidth    += element.offsetWidth + 1;

 break;

 

 case "TBGen":

 element.style.posLeft = y.TBWidth;

 y.TBWidth    += element.offsetWidth + 1;

 break;

 

 case "TBSep":

 element.style.posLeft = y.TBWidth     + 2;

 y.TBWidth    += SEP_PADDING;

 break;

 

 case "TBHandle":

 element.style.posLeft = 2;

 y.TBWidth    += element.offsetWidth + HANDLE_PADDING;

 break;

 

 default:

 return false;

 }

 }

 

 y.TBWidth += 1;

 return true;

}

 

function DebugObject(obj)

{

 var msg = "";

 for (var i in   TB) {

 ans=prompt(i+"="+TB[i]+"\n");

 if (! ans) break;

 }

}

 

function LayoutTBs()

{

 NumTBs = yToolbars.length;

 

 if (NumTBs ==    0) return;

 

 var i;

 var ScrWid = (document.body.offsetWidth) - 6;

 var TotalLen = ScrWid;

 for (i = 0 ; i < NumTBs ; i++) {

 TB = yToolbars[i];

 if (TB.TBWidth > TotalLen) TotalLen = TB.TBWidth;

 }

 

 var PrevTB;

 var LastStart = 0;

 var RelTop = 0;

 var LastWid, CurrWid;

 

 var TB = yToolbars[0];

 TB.style.posTop = 0;

 TB.style.posLeft = 0;

 

 var Start = TB.TBWidth;

 for (i = 1 ; i < yToolbars.length ; i++) {

 PrevTB = TB;

 TB = yToolbars[i];

 CurrWid = TB.TBWidth;

 

 if ((Start + CurrWid) > ScrWid) {

 Start = 0;

 LastWid =     TotalLen - LastStart;

 }

 else {

 LastWid =     PrevTB.TBWidth;

 RelTop -=     TB.offsetHeight;

 }

 

 TB.style.posTop = RelTop;

 TB.style.posLeft = Start;

 PrevTB.style.width = LastWid;

 

 LastStart =    Start;

 Start += CurrWid;

 }

 

 TB.style.width = TotalLen - LastStart;

 

 i--;

 TB = yToolbars[i];

 var TBInd = TB.sourceIndex;

 var A     = TB.document.all;

 var item;

 for (i in A) {

 item = A.item(i);

 if (! item)     continue;

 if (! item.style) continue;

 if (item.sourceIndex <= TBInd) continue;

 if (item.style.position == "absolute") continue;

 item.style.posTop =      RelTop;

 }

}

 

function DoLayout()

{

 LayoutTBs();

}

 

function validateMode()

{

 if (!       bTextMode) return true;

 alert("请取消“使用 HTML 语法书写”选项再使用系统编辑功能!");

 Composition.focus();

 return false;

}

 

function format1(what,opt)

{

 if (opt=="removeFormat")

 {

 what=opt;

 opt=null;

 }

 

 if (opt==null) Composition.document.execCommand(what);

 else Composition.document.execCommand(what,"",opt);

 

 pureText = false;

 Composition.focus();

}

 

function format(what,opt)

{

 if (!validateMode()) return;

 

 format1(what,opt);

}

 

function setMode(newMode)

{

 bTextMode = newMode;

 var cont;

 if (bTextMode) {

 cleanHtml();

 cleanHtml();

 

 cont=Composition.document.body.innerHTML;

 Composition.document.body.innerText=cont;

 } else {

 cont=Composition.document.body.innerText;

 Composition.document.body.innerHTML=cont;

 }

 

 Composition.focus();

}

 

function getEl(sTag,start)

{

 while     ((start!=null) && (start.tagName!=sTag)) start = start.parentElement;

 return start;

}

 

function UserDialog(what)

{

 if (!validateMode()) return;

 

 Composition.document.execCommand(what, true);

 

 pureText = false;

 Composition.focus();

}

 

function foreColor()

{

 if (!       validateMode())     return;

 var arr = showModalDialog("color.htm", "", "dialogWidth:18.5em; dialogHeight:17.5em; status:0");

 if (arr != null) format('forecolor', arr);

 else Composition.focus();

}

 

function cleanHtml()

{

 var fonts = Composition.document.body.all.tags("FONT");

 var curr;

 for (var i = fonts.length - 1; i >= 0; i--) {

 curr = fonts[i];

 if (curr.style.backgroundColor == "#ffffff") curr.outerHTML   = curr.innerHTML;

 }

}

 

function getPureHtml()

{

 var str = "";

 var paras = Composition.document.body.all.tags("P");

 if (paras.length > 0)     {

 for (var i=paras.length-1; i >= 0; i--) str    = paras[i].innerHTML + "\n" + str;

 } else {

 str  = Composition.document.body.innerHTML;

 }

 return str;

}

 

var bLoad=false

var pureText=true

var bodyTag="<head><style type=\"text/css\">body {font-size:10.8pt} P {margin-top: 0;margin-bottom: 0}</style><meta http-equiv=Content-Type content=\"text/html; charset=gb2312\"></head><BODY bgcolor=\"#FFFFFF\" MONOSPACE>"

var bTextMode=false

 

public_description=new Editor

 

function Editor()

{

 this.put_HtmlMode=setMode;

 this.put_value=putText;

 this.get_value=getText;

}

 

function getText()

{

       if (bTextMode)

              return Composition.document.body.innerText;

       else

       {

              cleanHtml();

              cleanHtml();

              return Composition.document.body.innerHTML;

       }

}

 

function putText(v)

{

       if (bTextMode)

              Composition.document.body.innerText = v;

       else

              Composition.document.body.innerHTML = v;

}

 

function InitDocument()

{

       Composition.document.open();

       Composition.document.write(bodyTag);

       Composition.document.close();

//     Composition.focus();

//     setTimeout("Composition.focus()",0);

 

       bLoad=true;

}

 

</script>

 

 

 

第二步:把<body>中的内容改为:

<body  onload="InitDocument();" STYLE="margin:0pt;padding:0pt">

0 Comments

Wed

04

Mar

2009

58、打开页面等待效果演示

58、打开页面等待效果演示

脚本说明:

把如下代码加入<body>区域中

<table align="center"><tr><td>

<div style="font-size:8pt;padding:2px;border:solid black 1px">

<span id="progress1">   </span>

<span id="progress2">   </span>

<span id="progress3">   </span>

<span id="progress4">   </span>

<span id="progress5">   </span>

<span id="progress6">   </span>

<span id="progress7">   </span>

<span id="progress8">   </span>

<span id="progress9">   </span>

</div>

</td></tr></table>

<script language="javascript">

var progressEnd = 9;            // set to number of progress <span>'s.

var progressColor = 'blue';     // set to progress bar color

var progressInterval = 1000;  // set to time between updates (milli-seconds)

 

var progressAt = progressEnd;

var progressTimer;

function progress_clear() {

       for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent';

       progressAt = 0;

}

function progress_update() {

       progressAt++;

       if (progressAt > progressEnd) progress_clear();

       else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor;

       progressTimer = setTimeout('progress_update()',progressInterval);

}

function progress_stop() {

       clearTimeout(progressTimer);

       progress_clear();

}

progress_update();         // start progress bar

</script>

0 Comments

Wed

04

Mar

2009

57、严格居中的层

57、严格居中的层

脚本说明:

把如下代码加入<body>区域中

  <DIV id=L1  style="HEIGHT: 107px; LEFT: 341px; POSITION: absolute; TOP: 585px; WIDTH: 205px; Z-INDEX: 1">

  <TABLE bgColor=#ffffff border=1 borderColorDark=#ffffff borderColorLight=#000000 cellPadding=0 cellSpacing=0 width="100%">

                    <TR>

                      <TD height=1 width=178>::网页特效代码::</TD>

                      <TD align=middle onclick="L1.style.visibility='hidden'"

                      style="CURSOR: hand" width=21>х</TD></TR>

                    <TR vAlign=top>

                      <TD colSpan=2

                        height=91>欢迎光临本站!<BR><BR>本站域名:<BR>http://www.7stk.com

                      </TD></TR></TABLE></DIV>

<SCRIPT LANGUAGE="JavaScript">

function moveit() //这个函数用于把层放到浏览器中间

{

L1.style.left=((document.body.offsetWidth-parseFloat (L1.style.width))/2)+document.body.scrollLeft;

L1.style.top=((document.body.offsetHeight-parseFloat (L1.style.height))/2)+document.body.scrollTop;

}

window.onload=moveit; //网面打开时时执行moveit()

window.onresize=moveit; //当调整浏览器大小时执行moveit()

window.onscroll=moveit; //当拉动滚动条时执行moveit()

</SCRIPT>

 

0 Comments

Wed

04

Mar

2009

56、隐藏层的打开关闭

56、隐藏层的打开关闭

脚本说明:

把如下代码加入<body>区域中

<script language=javascript>

ie4=(document.all)?true:false;

ns4=(document.layers)?true:false;

 

function toExit(){

var args=toExit.arguments;

var visible=args[0];

if(ns4){

              theObj=eval("document.layers[\'"+args[1]+"\']");

              if(theObj)theObj.visibility=visible;

              }

else if(ie4){

              if(visible=='show')visible='visible';

              if(visible=='hide')visible='hidden';

              theObj=eval("document.all[\'"+args[1]+"\']");

              if(theObj)theObj.style.visibility=visible;

              }

 

}    

 

</script>

<div id=boysoft

style="HEIGHT: 80px; LEFT: 309px; POSITION: absolute; TOP: 150px; VISIBILITY: hidden; WIDTH: 180px; Z-INDEX: 1">

<table bgcolor=#356f66 border=1 cellpadding=0 cellspacing=0 height=80

  width=180>

  <tbody>

                      <tr>

                        <td height=65 width="100%">

                          <table border=0 cellpadding=0 cellspacing=0 height=80 width="99%">

                            <tbody>

                            <tr>

                              <td height=57> <font

            color=#ffffff>你看,这是一个隐藏的层,不过现在你可以看到了。<b></b></font></td>

                            </tr>

                            <tr align="center">

                              <td height=23 width="100%"><a

            href="javascript:toExit('hide','boysoft')"><font color=white>关闭此窗口</font></a></td>

                            </tr>

                            </tbody>

                          </table>

                        </td>

                      </tr>

                      </tbody>

                    </table>

                  </div>

<a href="javascript:toExit('show','boysoft')"><font color="#0000FF">打开隐藏层</font></a>

 

0 Comments

Wed

04

Mar

2009

55、每次关闭效果不同的层

55、每次关闭效果不同的层

脚本说明:

把如下代码加入<body>区域中

<SCRIPT language=JavaScript1.2>

<!--

var x =0

var y=0

drag = 0

move = 0

window.document.onmousemove = mouseMove

window.document.onmousedown = mouseDown

window.document.onmouseup = mouseUp

window.document.ondragstart = mouseStop

function mouseUp() {

move = 0

}

function mouseDown() {

if (drag) {

clickleft = window.event.x - parseInt(dragObj.style.left)

clicktop = window.event.y - parseInt(dragObj.style.top)

dragObj.style.zIndex += 1

move = 1

}

}

function mouseMove() {

if (move) {

dragObj.style.left = window.event.x - clickleft

dragObj.style.top = window.event.y - clicktop

}

}

function mouseStop() {

window.event.returnValue = false

}

function Show(divid) {

divid.filters.revealTrans.apply();

divid.style.visibility = "visible";

divid.filters.revealTrans.play();

}

function Hide(divid) {

divid.filters.revealTrans.apply();

divid.style.visibility = "hidden";

divid.filters.revealTrans.play();

}

//-->

</SCRIPT>

 <DIV id=READ style="FILTER: revealTrans(transition=23,duration=0.5) blendTrans(duration=0.5); LEFT: 100px; POSITION: absolute; TOP: 75px; WIDTH: 600px; Z-INDEX: 10">

<center>

<table width="90%" border=1 cellpadding="0" cellspacing="0" bordercolorlight="#5E9BF7" bordercolordark="#FFFFFF" >

<tr bgcolor="#ffedc8">

<td colspan="1"><DIV onmouseout=drag=0 onmouseover="dragObj=READ; drag=1;move=0">标题栏 </div></td>

<td width=1%><A href="javascript:void(Hide(READ))"></A></td></tr>

<tr>

<td colspan="4" bgcolor=#cccccc>

<table width=100% border=0 cellspacing=4>

<tr>

<td>

<font color=Blue>一个可以拖动和关闭的层,有意思的是它每次关闭的效果都不一样。不信的话,你自己试试吧

</td></tr></table></td></tr>

</table>

</div>

0 Comments

Wed

04

Mar

2009

54、在页面中打开页面

54、在页面中打开页面

脚本说明:

把如下代码加入<body>区域中:

<form name="jumpy">

<select name="example" size="1" onChange="gone()">

<option value="http://www.sina.com.cn" selected>新浪网</option>

<option value="http://www.163.com">网易</option>

<option value="http://www.google.com">Google搜索</option>

<option value="http://www.sohu.com">搜狐</option>

</select>

 

<input type="button" name="test" value="Go!"

onClick="gone()">

</form>

 

<script language="javascript">

<!--

 

var displaymode=0

//if displaymode=0, configure inline frame attributes (ie: dimensions, intial document shown

var iframecode='<iframe id="external" style="width:85%;height:400px" src="http://www.cctv.com"></iframe>'

 

/////NO NEED TO EDIT BELOW HERE////////////

 

if (displaymode==0)

document.write(iframecode)

 

function gone(){

var selectedurl=document.jumpy.example.options[document.jumpy.example.selectedIndex].value

if (document.getElementById&&displaymode==0)

document.getElementById("external").src=selectedurl

else if (document.all&&displaymode==0)

document.all.external.src=selectedurl

else{

if (!window.win2||win2.closed)

win2=window.open(selectedurl)

//else if win2 already exists

else{

win2.location=selectedurl

win2.focus()

}

}

}

//-->

</script>

 

0 Comments

Wed

04

Mar

2009

53、文字显示整块变化

53、文字显示整块变化

脚本说明:

把如下代码加入<body>区域中

<script language=JavaScript>

//Define Image Prefixes

var tab1Pre = "tab_atw_nbadaily_";

var tab2Pre = "tab_atw_espn_";

var tab3Pre = "tab_atw_yahoo_";

var tab4Pre = "";

 

//checks browser and sets up layers accordingly

if (document.layers) {

       layerRef="document.layers.";

}

 

function showLayer(layerName){

       if(document.layers){

              eval(layerRef+layerName+'.visibility="visible"');

       }else{

              eval('document.getElementById('+ "'" + layerName + "'" +').style.visibility = "visible"');

       }

}

     

function hideLayer(layerName){

        if(document.layers){

              eval(layerRef+layerName+'.visibility="hidden"');

       }else{

              eval('document.getElementById('+ "'" + layerName + "'" +').style.visibility = "hidden"');       

       }

}

 

var activeImgName = "img1";

var loaded = false;

 

if (document.images) {

    img1off = new Image();img1off.src = tab1Pre + "off.gif";

    img2off = new Image();img2off.src = tab2Pre + "off.gif";

    img3off = new Image();img3off.src = tab3Pre + "off.gif";

    //img4off = new Image();img4off.src = "/media/nbav2/" + tab4Pre + "off.gif";

    img1on = new Image();img1on.src = tab1Pre + "on.gif";

    img2on = new Image();img2on.src = tab2Pre + "on.gif";

    img3on = new Image();img3on.src = tab3Pre + "on.gif";

    //img4on = new Image();img4on.src = "/media/nbav2/" + tab4Pre + "on.gif";

}

 

function updateTabs(imgName) {

       if(imgName == activeImgName)

              return;

             

       if (document.images) {

              document[imgName].src = eval(imgName+"on.src");

        document[activeImgName].src = eval(activeImgName+"off.src");

              activeImgName = imgName;

    }

}

</script>

<style>

#one {     Z-INDEX: 2; VISIBILITY: visible; WIDTH: 235px; POSITION: absolute}

#two {    Z-INDEX: 3; VISIBILITY: hidden; WIDTH: 235px; POSITION: absolute}

#three {   Z-INDEX: 4; VISIBILITY: hidden; WIDTH: 235px; POSITION: absolute}

.p9 {font-size: 9pt;}

td {font-size: 9pt;}

body {font-size: 9pt;}

.nine1 {font-size: 9pt; line-height:13pt}

.nine {font-size: 9pt; line-height:14pt}

.p10{font-size: 10.5pt;}

.ten {font-size: 10.5pt; line-height:15pt}

A {text-decoration: none;}

A:hover{color: #FF0000; text-decoration: underline;}

-->

</style>

<table cellspacing=0 align=center border=0>

        <tbody>

        <tr>

          <td>

            <table cellspacing=0 cellpadding=0 border=0>

              <tbody>

              <tr>

                <td width=80><a 

                  href="javascript:updateTabs('img1');showLayer('one'); hideLayer('two'); hideLayer('three');"><img

                  src="sto/005.jpg" width=80 border=0

                  name=img1></a></td>

                <td width=80><a 

                  href="javascript:updateTabs('img2');showLayer('two'); hideLayer('one'); hideLayer('three');"><img

                  src="sto/005.jpg" width=80 border=0

                  name=img2></a></td>

                <td width=80><a 

                  href="javascript:updateTabs('img3'); showLayer('three'); hideLayer('two'); hideLayer('one');"><img

                  src="sto/005.jpg" width=80 border=0

                  name=img3></a></td>

              </tr>

              </tbody>

            </table>

          </td>

        </tr>

        <tr>

          <td valign=top width=235 bgcolor=#efefe7 height=120>

            <div id=one>

              <table>

                <tbody>

                <tr>

                  <td  valign=top ><img height=12

                  src="sto/005.jpg" width=8></td>

                  <td  valign=top class="gray">欢迎你的光临网页特效代码</td>

                </tr>

                <tr>

                  <td  valign=top ><img height=12

                  src="sto/005.jpg" width=8></td>

                  <td  valign=top class="gray">欢迎你的光临网页特效代码

                  </td>

                </tr>

                <tr>

                  <td  valign=top ><img height=12

                  src="sto/005.jpg" width=8></td>

                  <td  valign=top class="gray">欢迎你的光临网页特效代码 </td>

                </tr>

                <tr>

                  <td  valign=top ><img height=12

                  src="sto/005.jpg" width=8></td>

                  <td  valign=top class="gray">欢迎你的光临网页特效代码

                  </td>

                </tr>

                <tr>

                  <td  valign=top ><img height=12

                  src="sto/005.jpg" width=8></td>

                  <td  valign=top class="gray">欢迎你的光临网页特效代码</td>

                </tr>

                <tr>

                  <td  valign=top ><img height=12

                  src="sto/005.jpg" width=8></td>

                  <td  valign=top class="gray">欢迎你的光临网页特效代码</td>

                </tr>

                </tbody>

              </table>

            </div>

            <div id=two>

              <table>

                <tbody>

                <tr>

                  <td  valign=top ><img height=12

                  src="sto/005.jpg" width=8></td>

                  <td  valign=top class="gray">欢迎你的光临网页特效代码1</td>

                </tr>

                <tr>

                  <td  valign=top ><img height=12

                  src="sto/005.jpg" width=8></td>

                  <td  valign=top class="gray">欢迎你的光临网页特效代码1</td>

                </tr>

                <tr>

                  <td  valign=top ><img height=12

                  src="sto/005.jpg" width=8></td>

                  <td  valign=top class="gray">欢迎你的光临网页特效代码1

                  </td>

                </tr>

                <tr>

                  <td  valign=top ><img height=12

                  src="sto/005.jpg" width=8></td>

                  <td  valign=top class="gray">欢迎你的光临网页特效代码1 </td>

                </tr>

                <tr>

                  <td  valign=top ><img height=12

                  src="sto/005.jpg" width=8></td>

                  <td  valign=top class="gray">欢迎你的光临网页特效代码1</td>

                </tr>

                <tr>

                  <td  valign=top ><img height=12

                  src="sto/005.jpg" width=8></td>

                  <td  valign=top class="gray">欢迎你的光临网页特效代码1<br>

                  </td>

                </tr>

                </tbody>

              </table>

            </div>

            <div id=three>

              <table>

                <tbody>

                <tr>

                  <td  valign=top ><img height=12

                  src="sto/005.jpg" width=8></td>

                  <td  valign=top class="gray">欢迎你的光临网页特效代码2

                  </td>

                </tr>

                <tr>

                  <td  valign=top ><img height=12

                  src="sto/005.jpg" width=8></td>

                  <td  valign=top class="gray">欢迎你的光临网页特效代码2

                  </td>

                </tr>

                <tr>

                  <td  valign=top ><img height=12

                  src="sto/005.jpg" width=8></td>

                  <td  valign=top class="gray">欢迎你的光临网页特效代码2</td>

                </tr>

                <tr>

                  <td  valign=top ><img height=12

                  src="sto/005.jpg" width=8></td>

                  <td  valign=top class="gray">欢迎你的光临网页特效代码2 </td>

                </tr>

                <tr>

                  <td  valign=top ><img height=12

                  src="sto/005.jpg" width=8></td>

                  <td  valign=top class="gray">欢迎你的光临网页特效代码2</td>

                </tr>

                <tr>

                  <td  valign=top ><img height=12

                  src="sto/005.jpg" width=8></td>

                  <td  valign=top class="gray">欢迎你的光临网页特效代码2 </td>

                </tr>

                </tbody>

              </table>

            </div>

          </td>

        </tr>

        </tbody>

      </table>

 

0 Comments

Wed

04

Mar

2009

52、导航菜单显示文字

52、导航菜单显示文字

脚本说明:

第一步:把如下代码加入<body>区域中

<script>

var Num=5;  //这里是增加选项卡的数目

var carNum=2+Num

function document.onselectstart()

{

var obj=event.srcElement

 if(obj.tagName=="SPAN")

 {

 return false;

 }

}

function document.onmousedown()

{

 var obj=event.srcElement

 var pobj=obj.parentElement.id;

 if(obj.className=="span")

 {

  for(i=1;i<carNum;i++)

  {

   if(pobj==("btn"+i))

   {

    document.all("td"+i).style.backgroundColor="menu"

    document.all("btn"+i).style.height=20

    content(i)

   }

   else

   {

    document.all("td"+i).style.backgroundColor="white"

    document.all("btn"+i).style.height=18

   }

  }

 }

}

function content(i)

{

//这里是菜单名

 mnuItem(1,"第一项")

 mnuItem(2,"图片世界")

 mnuItem(3,"第三个内容")

 mnuItem(4,"表格")

 mnuItem(5,"滚动字幕")

 mnuItem(6,"www.7stk.com")

//End

 if(i==1)

 {

 span1.innerHTML="<input type=radio checked name=a><input name=a type=radio><br>"

 +"<input><br><input><br><input type=submit>"

 }

 if(i==2)

 {

 span1.innerHTML="<img src=fw.gif>"

 }

 if(i==3)

 {

 span1.innerHTML="<h1>第三个内容</h1>"}

 if(i==4)

 {

 span1.innerHTML="<table border=1 width=100%><td>第四个内容,表格</td></tr>"

 +"<tr><td>aaaaaaaa</td></tr>"

 +"<tr><td>bbbbbbbb</td></tr>"

 +"<tr><td>ccccccccc</td></tr></table>"

 }

 if(i==5)

 {

 span1.innerHTML="<marquee>"

 +"这是第五个内容"

 +"啦啦..</marquee>"

 }

 if(i==6)

 {

 span1.innerHTML="<font color=red>"

 +"欢迎访问www.7stk.com"

 +"</font>"

 }

}

function mnuItem(i,con)

{

 document.all("MenuName"+i).innerText=con

}

</script>

<style>td{font-size:9pt}

.span{

 cursor:default;

 padding-left:5;

 padding-top:2;

 padding-right:5;

 padding-bottom:0;

 width:100%;

 height:100%;

 }

</style>

<p>

<table width=0 onselectstart="return false" bgcolor=menu align=center><tr><td>

<table cellpadding=0 cellspacing=0 onselectstart="return false">

  <tr height=20>

 <td valign=bottom>

  <table cellspacing=0 cellpadding=0 bgcolor=menu>

   <tr>

   <td width=1 height=1></td><td width=1 height=1></td>

   <td bgcolor=white></td><td></td><td></td>

   </tr>

   <tr><td width=1 height=1></td><td width=1 height=1 bgcolor=white></td>

   <td></td><td bgcolor=black></td><td></td>

   </tr>

   <tr><td width=1 bgcolor=white></td><td width=1 height=1></td>

   <td id=btn1 height=20><span class=span id=MenuName1>  </span></td><td width=1 bgcolor=gray></td><td bgcolor=black width=1></td>

   </tr>

   <tr><td bgcolor=white></td><td colspan=4 height=1 bgcolor=menu id=td1></td>

   </tr>

  </table>

 </td>

 <script>

for(i=2;i<carNum;i++)

{

 tdBody="<td valign=bottom>"

 tdBody+="<table cellspacing=0 cellpadding=0 bgcolor=menu>"

 tdBody+="<tr>"

 tdBody+="<td width=1 height=1><\/td><td width=1 height=1><\/td>"

 tdBody+="<td bgcolor=white><\/td><td></td><td></td>"

 tdBody+="<\/tr>"

 tdBody+="<tr><td width=1 height=1><\/td><td width=1 height=1 bgcolor=white><\/td>"

 tdBody+="<td></td><td bgcolor=black><\/td><td></td>"

 tdBody+="<\/tr>"

 tdBody+="<tr><td width=1 bgcolor=white><\/td><td width=1 height=1><\/td>"

 tdBody+="<td id=btn"+i+" height=18><span class=span id=MenuName"+i+">  <\/span></td><td width=1 bgcolor=gray><\/td><td bgcolor=black width=1><\/td>"

 tdBody+="<\/tr>"

 tdBody+="<tr><td bgcolor=white><\/td><td colspan=4 height=1 bgcolor=white id=td"+i+"><\/td>"

 tdBody+="<\/tr>"

 tdBody+="<\/table>"

 tdBody+="<\/td>";

document.write(tdBody)

}

</script>

</td>

<td style="border-bottom:1 white solid" width=50> </td> </tr>

</table>

<div style="padding:10;width:100%;height:200;border-left:1 white solid;border-right:2 outset;border-bottom:2 outset">

<span id=span1></span><!--这里是内容-->

</div>

</td></tr></table>

 

 

第二步:把<body>中的内容改为:

<body  onload=content(1) onselectstart="return false">

0 Comments

Wed

04

Mar

2009

51、导航菜单显示不同信息

51、导航菜单显示不同信息

脚本说明:

把如下代码加入<body>区域中

<STYLE type=text/css>.sec1 {

       BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #eeeeee

}

.sec2 {

       BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BACKGROUND-COLOR: #d4d0c8

}

.main_tab {

       BORDER-RIGHT: gray 1px solid; BORDER-LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8

}

</STYLE>

<!--JavaScript部分-->

            <SCRIPT language=javascript>

     function secBoard(n)

  {

    for(i=0;i<secTable.cells.length;i++)

      secTable.cells[i].className="sec1";

    secTable.cells[n].className="sec2";

    for(i=0;i<mainTable.tBodies.length;i++)

      mainTable.tBodies[i].style.display="none";

    mainTable.tBodies[n].style.display="block";

  }

      </SCRIPT>

<!--HTML部分-->

            <TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0>

              <TBODY>

              <TR align=middle height=20>

                <TD class=sec2 onclick=secBoard(0) width="10%">关于TBODY标记</TD>

                <TD class=sec1 onclick=secBoard(1) width="10%">关于cells集合</TD>

                <TD class=sec1 onclick=secBoard(2) width="10%">关于tBodies集合</TD>

                <TD class=sec1 onclick=secBoard(3)

              width="10%">关于display属性</TD></TR></TBODY></TABLE>

            <TABLE class=main_tab id=mainTable height=240 cellSpacing=0

            cellPadding=0 width=549 border=0><!--关于TBODY标记-->

              <TBODY style="DISPLAY: block">

              <TR>

                <TD vAlign=top align=middle><BR><BR>

                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>

                    <TBODY>

                    <TR>

                      <TD>指定行做为表体。<BR>注释:TBODY要素是块要素,并且需要结束标签。<BR>   即使如果表格没有显式定义TBODY要素,该要素也提供给所有表。<BR><BR>参考:《动态HTML参考和开发应用大全》(人民邮电出版社

                        Microsoft Corporation

                    北京华中兴业科技发展有限公司译)<BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于cells集合-->

              <TBODY style="DISPLAY: none">

              <TR>

                <TD vAlign=top align=middle><BR><BR>

                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>

                    <TBODY>

                    <TR>

                      <TD>检索表行或者整个表中所有单元格的集合。<BR>应用于TRTABLE<BR><BR>参考:《动态HTML参考和开发应用大全》(人民邮电出版社

                        Microsoft Corporation

                    北京华中兴业科技发展有限公司译)<BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于tBodies集合-->

              <TBODY style="DISPLAY: none">

              <TR>

                <TD vAlign=top align=middle><BR><BR>

                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>

                    <TBODY>

                    <TR>

                      <TD>检索表中所有TBODY对象的集合。对象在该集合中按照HTML源顺序排列。<BR>应用于TABLE<BR><BR>参考:《动态HTML参考和开发应用大全》(人民邮电出版社

                        Microsoft Corporation

                    北京华中兴业科技发展有限公司译)<BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于display属性-->

              <TBODY style="DISPLAY: none">

              <TR>

                <TD vAlign=top align=middle><BR><BR>

                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>

                    <TBODY>

                    <TR>

                      <TD>设置或者检索对象是否被提供。<BR>可能的值为blocknoneinlinelist-itemtable-header-grouptable-footer-group<BR>该特性可读写,块要素默认值为block,内联要素默认值为inline;层叠样式表(CSS)属性不可继承。<BR><BR>参考:《动态HTML参考和开发应用大全》(人民邮电出版社

                        Microsoft Corporation 北京华中兴业科技发展有限公司译)<BR><BR><A

                        href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp?frame=true"

                        target=_blank>点击此处</A>可参阅微软<A

                        href="http://msdn.microsoft.com/"

                        target=_blank>MSDN在线</A>上的解释。

              </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 

0 Comments

Wed

04

Mar

2009

50、可缩放的显示区

50、可缩放的显示区

脚本说明:

把如下代码加入<body>区域中

<style> {

       box-sizing: border-box; moz-box-sizing: border-box

}

#testDiv     { background-color: buttonface; background-repeat: repeat;

               background-attachment: scroll; color: #3969A5; height: 300px;

               left: 30px; overflow: hidden; width: 500; z-index: 2;

               border: 2px outset white; margin: 0px; padding: 2px;

               background-position: 0% 50% }

body         { font-family: Verdana; font-size: 9pt }

#innerNice   { background-color: white; background-repeat: repeat; background-attachment:

               scroll; color: #3969A5; height: 100%; overflow: auto; width:

               100%; border: 2px inset white; padding: 8px;

               background-position: 0% 50% }

</style>

<div class="resizeMe" id="testDiv">

  <div id="innerNice">

    <p align="center"> </p>

    <p align="center">

请在边框处拖动鼠标</p>

    <p> </p>

    <p> </p>

    <p> </p>

  </div>

</div>

<SCRIPT language=javascript>

/////////////////////////////////////////////////////////////////////////

// Generic Resize by Erik Arvidsson                                    //

//                                                                     //

// You may use this script as long as this disclaimer is remained.     //

// See www.dtek.chalmers.se/~d96erik/dhtml/ for mor info               //

//                                                                     //

// How to use this script!                                             //

// Link the script in the HEAD and create a container (DIV, preferable //

// absolute positioned) and add the class="resizeMe" to it.            //

/////////////////////////////////////////////////////////////////////////

 

var theobject = null; //This gets a value as soon as a resize start

 

function resizeObject() {

       this.el        = null; //pointer to the object

       this.dir    = "";      //type of current resize (n, s, e, w, ne, nw, se, sw)

       this.grabx = null;     //Some useful values

       this.graby = null;

       this.width = null;

       this.height = null;

       this.left = null;

       this.top = null;

}

      

 

//Find out what kind of resize! Return a string inlcluding the directions

function getDirection(el) {

       var xPos, yPos, offset, dir;

       dir = "";

 

       xPos = window.event.offsetX;

       yPos = window.event.offsetY;

 

       offset = 8; //The distance from the edge in pixels

 

       if (yPos<offset) dir += "n";

       else if (yPos > el.offsetHeight-offset) dir += "s";

       if (xPos<offset) dir += "w";

       else if (xPos > el.offsetWidth-offset) dir += "e";

 

       return dir;

}

 

function doDown() {

       var el = getReal(event.srcElement, "className", "resizeMe");

 

       if (el == null) {

              theobject = null;

              return;

       }           

 

       dir = getDirection(el);

       if (dir == "") return;

 

       theobject = new resizeObject();

             

       theobject.el = el;

       theobject.dir = dir;

 

       theobject.grabx = window.event.clientX;

       theobject.graby = window.event.clientY;

       theobject.width = el.offsetWidth;

       theobject.height = el.offsetHeight;

       theobject.left = el.offsetLeft;

       theobject.top = el.offsetTop;

 

       window.event.returnValue = false;

       window.event.cancelBubble = true;

}

 

function doUp() {

       if (theobject != null) {

              theobject = null;

       }

}

 

function doMove() {

       var el, xPos, yPos, str, xMin, yMin;

       xMin = 8; //The smallest width possible

       yMin = 8; //             height

 

       el = getReal(event.srcElement, "className", "resizeMe");

 

       if (el.className == "resizeMe") {

              str = getDirection(el);

       //Fix the cursor     

              if (str == "") str = "default";

              else str += "-resize";

              el.style.cursor = str;

       }

      

//Dragging starts here

       if(theobject != null) {

              if (dir.indexOf("e") != -1)

                     theobject.el.style.width = Math.max(xMin, theobject.width + window.event.clientX - theobject.grabx) + "px";

      

              if (dir.indexOf("s") != -1)

                     theobject.el.style.height = Math.max(yMin, theobject.height + window.event.clientY - theobject.graby) + "px";

 

              if (dir.indexOf("w") != -1) {

                     theobject.el.style.left = Math.min(theobject.left + window.event.clientX - theobject.grabx, theobject.left + theobject.width - xMin) + "px";

                     theobject.el.style.width = Math.max(xMin, theobject.width - window.event.clientX + theobject.grabx) + "px";

              }

              if (dir.indexOf("n") != -1) {

                     theobject.el.style.top = Math.min(theobject.top + window.event.clientY - theobject.graby, theobject.top + theobject.height - yMin) + "px";

                     theobject.el.style.height = Math.max(yMin, theobject.height - window.event.clientY + theobject.graby) + "px";

              }

             

              window.event.returnValue = false;

              window.event.cancelBubble = true;

       }

}

 

 

function getReal(el, type, value) {

       temp = el;

       while ((temp != null) && (temp.tagName != "BODY")) {

              if (eval("temp." + type) == value) {

                     el = temp;

                     return el;

              }

              temp = temp.parentElement;

       }

       return el;

}

 

document.onmousedown = doDown;

document.onmouseup   = doUp;

document.onmousemove = doMove;

 

</SCRIPT>

0 Comments

Wed

04

Mar

2009

49、弹出浏览器的版本信息

49、弹出浏览器的版本信息

<script>

alert("╕ц╦─уг║"+navigator.appName+navigator.appVersion+" browser.")

</script>

 

 

 

 

 

0 Comments

Wed

04

Mar

2009

48、WINDOWS式样的计算器

48WINDOWS式样的计算器

要完成此效果需要两个步骤

 

第一步:把如下代码加入到<head>区域中

 

<style type="text/css">

<!--

body {font-family: helvetica}

p {font-size: 12pt}

.red {color: red}

.blue {color: blue}

-->

</style>

 

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var Memory = 0;

var Number1 = "";

var Number2 = "";

var NewNumber = "blank";

var opvalue = "";

 

function Display(displaynumber) {

document.calculator.answer.value = displaynumber;

}

 

function MemoryClear() {

Memory = 0;

document.calculator.mem.value = "";

}

 

function MemoryRecall(answer) {

if(NewNumber != "blank") {

Number2 += answer;

} else {

Number1 = answer;

}

NewNumber = "blank";

Display(answer);

}

 

function MemorySubtract(answer) {

Memory = Memory - eval(answer);

}

 

function MemoryAdd(answer) {

Memory = Memory + eval(answer);

document.calculator.mem.value = " M ";

NewNumber = "blank";

}

 

function ClearCalc() {

Number1 = "";

Number2 = "";

NewNumber = "blank";

Display("");

}

 

function Backspace(answer) {

answerlength = answer.length;

answer = answer.substring(0, answerlength - 1);

if (Number2 != "") {

Number2 = answer.toString();

Display(Number2);

} else {

Number1 = answer.toString();

Display(Number1);

   }

}

 

function CECalc() {

Number2 = "";

NewNumber = "yes";

Display("");

}

 

function CheckNumber(answer) {

if(answer == ".") {

Number = document.calculator.answer.value;

if(Number.indexOf(".") != -1) {

answer = "";

   }

}

if(NewNumber == "yes") {

Number2 += answer;

Display(Number2);

}

else {

if(NewNumber == "blank") {

Number1 = answer;

Number2 = "";

NewNumber = "no";

}

else {

Number1 += answer;

}

Display(Number1);

   }

}

function AddButton(x) {

if(x == 1) EqualButton();

if(Number2 != "") {

Number1 = parseFloat(Number1) + parseFloat(Number2);

}

NewNumber = "yes";

opvalue = '+';

Display(Number1);

}

function SubButton(x) {

if(x == 1) EqualButton();

if(Number2 != "") {

Number1 = parseFloat(Number1) - parseFloat(Number2);

}

NewNumber = "yes";

opvalue = '-';

Display(Number1);

}

function MultButton(x) {

if(x == 1) EqualButton();

if(Number2 != "") {

Number1 = parseFloat(Number1) * parseFloat(Number2);

}

NewNumber = "yes";

opvalue = '*';

Display(Number1);

}

function DivButton(x) {

if(x == 1) EqualButton();

if(Number2 != "") {

Number1 = parseFloat(Number1) / parseFloat(Number2);

}

NewNumber = "yes";

opvalue = '/';

Display(Number1);

}

function SqrtButton() {

Number1 = Math.sqrt(Number1);

NewNumber = "blank";

Display(Number1);

}

function PercentButton() {

if(NewNumber != "blank") {

Number2 *= .01;

NewNumber = "blank";

Display(Number2);

   }

}

function RecipButton() {

Number1 = 1/Number1;

NewNumber = "blank";

Display(Number1);

}

function NegateButton() {

Number1 = parseFloat(-Number1);

NewNumber = "no";

Display(Number1);

}

function EqualButton() {

if(opvalue == '+') AddButton(0);

if(opvalue == '-') SubButton(0);

if(opvalue == '*') MultButton(0);

if(opvalue == '/') DivButton(0);

Number2 = "";

opvalue = "";

}

//  End -->

</script>

 

 

第二步:把如下代码加入到<body>区域中

 

<center>

<form name="calculator">

<table bgcolor="#aaaaaa" width=220>

<tr><td>

<table bgcolor="#cccccc" border=1>

<tr><td>

<table border=0 cellpadding=0>

<tr>

                    <td bgcolor="#000080">

                      <div align="center"><b style="color:white">JavaScript Fairyland</b></div>

                    </td>

                  </tr>

<tr><td>

<table width="100%" border=0>

<tr><td colspan=6><input type="text" name="answer" size=30 maxlength=30 onChange="CheckNumber(this.value)"></td></tr>

<tr><td colspan=6>

<table border=0 cellpadding=0>

<tr><td>

<input type="text" name="mem" size=3 maxlength=3> <input type="button" name="backspace" class="red" value="Backspace" onClick="Backspace(document.calculator.answer.value); return false;"> <input type="button" name="CE" class="red" value=" CE " onClick="CECalc(); return false;"> <input type="reset" name="C" class="red" value="  C  " onClick="ClearCalc(); return false;">

</td></tr>

</table>

</td></tr>

<tr><td><input type="button" name="MC" class="red" value=" MC " onClick="MemoryClear(); return false;"></td>

<td><input type="button" name="calc7" class="blue" value="  7  " onClick="CheckNumber('7'); return false;"></td>

<td><input type="button" name="calc8" class="blue" value="  8  " onClick="CheckNumber('8'); return false;"></td>

<td><input type="button" name="calc9" class="blue" value="  9  " onClick="CheckNumber('9'); return false;"></td>

<td><input type="button" name="divide" class="red" value="  /  " onClick="DivButton(1); return false;"></td>

<td><input type="button" name="sqrt" class="blue" value="sqrt" onClick="SqrtButton(); return false;"></td></tr>

<tr><td><input type="button" name="MR" class="red" value=" MR " onClick="MemoryRecall(Memory); return false;"></td>

<td><input type="button" name="calc4" class="blue" value="  4  " onClick="CheckNumber('4'); return false;"></td>

<td><input type="button" name="calc5" class="blue" value="  5  " onClick="CheckNumber('5'); return false;"></td>

<td><input type="button" name="calc6" class="blue" value="  6  " onClick="CheckNumber('6'); return false;"></td>

<td><input type="button" name="multiply" class="red" value="  *  " onClick="MultButton(1); return false;"></td>

<td><input type="button" name="percent" class="blue" value=" %  " onClick="PercentButton(); return false;"></td></tr>

<tr><td><input type="button" name="MS" class="red" value=" MS " onClick="MemorySubtract(document.calculator.answer.value); return false;"></td>

<td><input type="button" name="calc1" class="blue" value="  1  " onClick="CheckNumber('1'); return false;"></td>

<td><input type="button" name="calc2" class="blue" value="  2  " onClick="CheckNumber('2'); return false;"></td>

<td><input type="button" name="calc3" class="blue" value="  3  " onClick="CheckNumber('3'); return false;"></td>

<td><input type="button" name="minus" class="red" value="  -  " onClick="SubButton(1); return false;"></td>

<td><input type="button" name="recip" class="blue" value="1/x " onClick="RecipButton(); return false;"></td></tr>

<tr><td><input type="button" name="Mplus" class="red" value=" M+  " onClick="MemoryAdd(document.calculator.answer.value); return false;"></td>

<td><input type="button" name="calc0" class="blue" value="  0  " onClick="CheckNumber('0'); return false;"></td>

<td><input type="button" name="negate" class="blue" value="+/- " onClick="NegateButton(); return false;"></td>

<td><input type="button" name="dot" class="blue" value="  .   " onClick="CheckNumber('.'); return false;"></td>

<td><input type="button" name="plus" class="red" value=" +  " onClick="AddButton(1); return false;"></td>

<td><input type="button" name="equal" class="red" value="  =   " onClick="EqualButton(); return false;"></td>

</tr>

</table>

</td></tr>

</table>

</td></tr>

</table>

</td></tr>

</table>

</form>

</center>

 

0 Comments

Wed

04

Mar

2009

47、虚拟格式化硬盘

47、虚拟格式化硬盘

<script LANGUAGE="JAVASCRIPT">

var timerID=null;

var count=0;

var running=false;

function RandomNumber(max)

{var today = new Date();

  var num= Math.round((Math.abs(Math.sin(today.getTime()))*1000))%max+1;

  return num;

}

function stopaction()

{if (running)

   clearTimeout(timerID);

 running=false;

}

function startaction()

{ stopaction();

  action();

}

function action()

{if (count!=100)

  { document.outputform.output.value="正在格式化硬盘,目前进度:"+count+"%";

     count++;

     timerID=setTimeout("action()",200+RandomNumber(500));

     running=true;

  }

  else

   { document.outputform.output.value="格式化完毕 ... ...";

      stopaction();

   }

}

</script>

<body onload="startaction()">

<p>虚拟格式化</p>

<form name="outputform">

  <p><input TYPE="TEXT" NAME="output" size="50"></p>

</form>

 

0 Comments

Wed

04

Mar

2009

46、让你的鼠标永远按不停

46、让你的鼠标永远按不停

要完成此效果把如下代码加入到<body>区域中

 

<SCRIPT LANGUAGE="JavaScript">

 

 

 

<!-- Begin

 

function AnnoyingButton()

 

{

 

   while (true)

 

       window.alert("哈哈哈!!!你相信吗?你将永远这样按下去......") }

</script>

<FORM >

  <center>

 

<INPUT TYPE="button" value="我会让你永远点下去!" Name="btnAnnoy"

 

onClick="AnnoyingButton()"></form>

 

 

0 Comments

Wed

04

Mar

2009

45、恶作剧代码

45、恶作剧代码

要完成此效果把如下代码加入到<body>区域中

 

<a href="" onMouseover="alert('为什么把鼠标放到这里?');

 

alert('我不是说过不可以这样吗?');

 

alert('你把我的话当什么了?');

 

alert('你知道错了吗?');

 

alert('什么?你居然....');

 

alert('居然还没意识到自己做错了?');

 

alert('那好,你要为此付出代价!');

 

alert('我要你在这里点足一千下......');

 

alert('什么?你开始有点后悔了?');

 

alert('何必呢?');

 

alert('你当初干什么去了?');

 

alert('不原谅你!');

 

alert('好从现在开始再点995......');

 

alert('你的手开始累了吗?');

 

alert('什么?你已经没力气了?');

 

alert('你一直在求我原谅你啊!');

 

alert('看来你是真的知道错了!');

 

alert('下次你还会这么做吗?');

 

alert('真的不会了?');

 

alert('那好,今天就放你一马!');

 

alert('写封信给我说声对不起!');

 

alert('你能这么做我很高兴!!!');

 

document.bgColor='black';

 

document.fgColor='White';

 

window.location.href='mailto:typhoon@huzhoucity.com?subject=对不起,下次不敢了!';">不许把鼠标移到这里</a>

 

0 Comments

Wed

04

Mar

2009

44、鼠标移到链接上按不停

44、鼠标移到链接上按不停

要完成此效果把如下代码加入到<body>区域中

 

<A HREF="" onmouseover="while(true){window.open( )}">来呀!来呀!你来嘛~</A>

 

0 Comments

Wed

04

Mar

2009

43、强制别人访问你的页面

43、强制别人访问你的页面

要完成此效果把onunload="if(confirm('\n欢迎您的光临\n \n 想不想去看看本人大作? \n')) open('http://www.7stk.com');else if(confirm('\n\n\n求您了!!\n \n求您了 \n \n求您了 \n\n拜托了!'))open('http://www.7stk.com');else if(confirm('\n这么不给面子啊? \n\n\n!你跟我玩狠的是吗.\n '))open('http://www.7stk.com');else open('http://www.7stk.com');" 加在<body>标记里

 

 

例如:<body onunload="if(confirm('\n欢迎您的光临\n \n 想不想去看看本人大作? \n')) open('http://www.7stk.com');else if(confirm('\n\n\n求您了!!\n \n求您了 \n \n求您了 \n\n拜托?'))open('http://www.7stk.com');else if(confirm('\n这么不给面子啊? \n\n\n!你跟我玩狠的是吗.\n '))open('http://www.7stk.com');else open('http://www.7stk.com');">

 

0 Comments

Wed

04

Mar

2009

42、输入密码才能进入页面

42、输入密码才能进入页面

 

脚本说明:

第一步:把如下代码加入<head>区域中

<SCRIPT LANGUAGE="JavaScript">

<!-- Hide

al="`1234567890-=~!@#$%^&*()_+qwer"

+"tyuiop[]QWERTYUIOP{}|asdfghjkl;A"

+"SDFGHJKL:zxcvbnm,./ZXCVBNM<>?";

ab1="";

bctr=0;

function ckPwd(){

 tst=document.isn.username.value

 +"*"+document.isn.passwrd.value+"*";

 ls=document.pd.pe.value;

 a=eval(ls.substring(0,2))-91;

 ls=ls.substring(2,ls.length);

 nls="";

 flg=0;

 while (ls.length>12){

  ab=eval(ls.substring(0,2))-89;

  ab1=(ab1==""?""+ab:ab1);

  oab1=ab1;

  ls=ls.substring(2,ls.length);

  for (var i=0;i<ab;i++){

   nr=eval(ls.substring(0,2))-a;

   ls=ls.substring(2,ls.length);

   nls+=al.charAt(nr);

   }

  nls+="*";

  if (nls.indexOf(tst)>-1){

   ls="";

   flg=1;

   }

  }

 if (flg==1){

  tstOk();

  }

 else{

  bctr++;

  if (bctr>3){

   location.href="nopass.htm";

   }

  else{

   alert("对不起,用户名/密码错误."

   +" 你已试登录"+bctr+".");

   }

  }

 }

 

function tstOk(){

 ab1=ab1+""+a;

  alert("正确,开始登录!");

  location.href="pwds.htm?"+ab1;

 }

 

 

// End Hiding -->

</SCRIPT>

 

 

 

第二步:把如下代码加入<body>区域中

<FORM NAME="pd">

<!-- Paste the element from the pseudo-encrypter here -->

<!-- Paste this element into your script -->

<INPUT TYPE='hidden' NAME='pe' VALUE='9393693658789606190557772053938953313395586858685868976834793758313033975834793758313033 '>

</FORM>

 

 

<FORM NAME="isn">

<TABLE BORDER=2 CELLPADDING=5 CELLSPACING=0 BGCOLOR=BLUE>

<TR><TD COLSPAN=2 ALIGN=CENTER><FONT SIZE=4 COLOR=WHITE FACE="楷体_GB2312"><B>请您输入</B></FONT></TD></TR>

<TR><TD><FONT SIZE=3 COLOR=WHITE><B>UserName:</B></FONT></TD>

<TD><INPUT TYPE="text" NAME="username" VALUE="" SIZE=10></TD></TR>

<TR><TD><FONT SIZE=3 COLOR=WHITE><B>Password:</B></FONT></TD>

<TD><INPUT TYPE="password" NAME="passwrd" VALUE="" SIZE=10></TD></TR>

<TR><TD COLSPAN=2 ALIGN=CENTER><INPUT TYPE="button" NAME="btn" VALUE=" 登录 " onClick="ckPwd();return false;"></TD></TR>

</TABLE></FORM>

<TABLE BORDER=1 WIDTH=486>

<TR><TD COLSPAN=3 ALIGN=CENTER><FONT FACE="楷体_GB2312"><B>你可以使用如下号码:</B></FONT></TD</TR>

 

<TR><TD><FONT FACE="helvetica,arial,geneva">User Name:John<BR>Password: 4$3gb%a</TD>

<TD><FONT FACE="helvetica,arial,geneva">User Name: Mary<BR>Password: hHhHhH</TD>

<TD><FONT FACE="helvetica,arial,geneva">User Name: Humphrey<BR>Password: humphrey</TD></TR>

</TABLE>

 

0 Comments

Wed

04

Mar

2009

41、输入密码保护页

41、输入密码保护页

<html>

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>网页特效---可以用鼠标拖动的表格</title>

</head>

 

<body>

<SCRIPT LANGUAGE="JavaScript">

<!--

var currentMoveObj = null;    //当前拖动对象

var relLeft;    //鼠标按下位置相对对象位置

var relTop;

function f_mdown(obj)

{

    currentMoveObj = obj;        //当对象被按下时,记录该对象

    currentMoveObj.style.position = "absolute";

    relLeft = event.x - currentMoveObj.style.pixelLeft;

    relTop = event.y - currentMoveObj.style.pixelTop;

}

window.document.onmouseup = function()

{

    currentMoveObj = null;    //当鼠标释放时同时释放拖动对象

}

function f_move(obj)

{

    if(currentMoveObj != null)

    {

        currentMoveObj.style.pixelLeft=event.x-relLeft;

        currentMoveObj.style.pixelTop=event.y-relTop;

    }

}

 

//-->

</SCRIPT>

<BODY>

<TABLE width="100" border=1 onselectstart="return false" style="position:absolute;left:50;top:50" onmousedown="f_mdown(this)" onmousemove="f_move(this)">

<TR>

    <TD bgcolor="#CCCCCC" align="center" style="cursor:move">title1</TD>

</TR>

<TR>

    <TD align="center" height="60">content</TD>

</TR>

</TABLE>

<TABLE width="100" border=1 onselectstart="return false" style="position:absolute;left:350;top:250" onmousedown="f_mdown(this)" onmousemove="f_move(this)">

<TR>

    <TD bgcolor="#CCCCCC" align="center" style="cursor:move">title2</TD>

</TR>

<TR>

    <TD align="center" height="60">content</TD>

</TR>

</TABLE>

</body>

 

</html>

0 Comments

Wed

04

Mar

2009

40、进入页面之前输入密码

40、进入页面之前输入密码

<html>

<head>

<title>测试</title>

<script language=vbs>

cont=1

sub myButton_Onclick()

    if mytext.value="7stk" then location="http://www.7stk.com" else msgbox "密码错误!正确密码为7stk":cont=cont+1

    if cont>3 then msgbox"对不起!本页内容你不能看。":window.close

end sub

</script>

</head>

<body>

<br>

<br>

<center>请输入密码:  

<input name="myText" type="password" size=10 maxlength=8>

   

<input type="button" name="myButton" value="确定" >

</center>

</body>

</html>

 

 

0 Comments

Wed

04

Mar

2009

39、进入页面弹出收藏夹

39、进入页面弹出收藏夹

<html>

<head>

<title>网页特效--进入页面弹出收藏夹提示</title>

<style type="text/css">

<!--

body {  font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 0px; margin-right: 0px}

A { COLOR: black; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: none }

 A:hover { COLOR: red; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: underline }

a:active     { font: 9pt "宋体"; cursor: hand; color: #FF0033 }

-->

</style>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

</head>

 

<body>

<br>

<br>

<center><font color=red face="隶书" size=6>进入弹出收藏夹</font></center>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var expDays = 7;

 

url = "http://7stk.com";

title = "网页制作特效";

 

// Cookie code from The JavaScript Source

function GetCookie (name) { 

var arg = name + "="; 

var alen = arg.length; 

var clen = document.cookie.length; 

var i = 0; 

while (i < clen) {   

var j = i + alen;   

if (document.cookie.substring(i, j) == arg)     

return getCookieVal (j);   

i = document.cookie.indexOf(" ", i) + 1;   

if (i == 0) break;  

} 

return null;

}

function SetCookie (name, value) { 

var argv = SetCookie.arguments; 

var argc = SetCookie.arguments.length; 

var expires = (argc > 2) ? argv[2] : null; 

var path = (argc > 3) ? argv[3] : null; 

var domain = (argc > 4) ? argv[4] : null; 

var secure = (argc > 5) ? argv[5] : false; 

document.cookie = name + "=" + escape (value) +

((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +

((path == null) ? "" : ("; path=" + path)) + 

((domain == null) ? "" : ("; domain=" + domain)) +   

((secure == true) ? "; secure" : "");

}

function DeleteCookie (name) { 

var exp = new Date(); 

exp.setTime (exp.getTime() - 1); 

var cval = GetCookie (name); 

document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();

}

var exp = new Date();

exp.setTime(exp.getTime() + (expDays*24*60*60*1000));

function amt(){

var count = GetCookie('count')

if(count == null) {

SetCookie('count','1')

return 1

}

else {

var newcount = parseInt(count) + 1;

DeleteCookie('count')

SetCookie('count',newcount,exp)

return count

   }

}

function getCookieVal(offset) {

var endstr = document.cookie.indexOf (";", offset);

if (endstr == -1)

endstr = document.cookie.length;

return unescape(document.cookie.substring(offset, endstr));

}

 

function checkCount() {

var count = GetCookie('count');

if (count == null) {

count=1;

SetCookie('count', count, exp);

 

if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4)) {

window.external.AddFavorite (url,title);

}

else {

var msg = "Don't forget to bookmark us!";

if(navigator.appName == "Netscape") msg += "  (CTRL-D)";

alert(msg);

   }

}

else {

count++;

SetCookie('count', count, exp);

   }

}

checkCount();

//  End -->

</script>

<br><center>

<table border=5 bordercolor=blue borderlight=green>

<tr><td align=center><font size=4 color=red face="Arial, Helvetica, sans-serif"><strong>进入就看到效果了吧!</strong></font></td></tr>

</table></center>

<br>

<br>

<br>

<br>

</body>

</html>

0 Comments

Wed

04

Mar

2009

38、测试你镜像站的速度

38、测试你镜像站的速度

<html>

 

<head>

<title>网页特效---测试你的镜像站的速度</title>

<meta content="text/html; charset=gb2312" http-equiv="Content-Type">

</head>

 

<body>

<div align="center"><center>

 

<table cellPadding="0" cellSpacing="0" width="301">

<TBODY>

  <tr>

    <td align="center" width="299"><p style="MARGIN-BOTTOM: 0px; MARGIN-TOP: 0px"><font

    face="隶书" size="6" style="FONT-SIZE: 12pt" color="#FF0000">

    <strong style="font-weight: 400">测试镜像站的连接速度</strong></font></p>

    <p align="center" style="MARGIN-BOTTOM: 0px; MARGIN-TOP: 0px"> </td>

  </tr>

</TBODY>

</table>

</center></div><script>

tim=1

setInterval("tim++",100)

b=1

var autourl=new Array()

autourl[1]="www.163.com"

autourl[2]="www.sohu.com"

autourl[3]="www.yahoo.net"

autourl[4]="www.263.net"

autourl[5]="8341.com"

 

function butt(){

document.write("<form name=autof>")

for(var i=1;i<autourl.length;i++)document.write("<input type=text name=txt"+i+" size=10 value=测试中……> =<input type=text name=url"+i+" size=40> =<input type=button value=GO onclick=window.open(this.form.url"+i+".value)><br>")

document.write("<input type=submit value=刷新></form>")

}

butt()

function auto(url){

document.forms[0]["url"+b].value=url

if(tim>200)

{document.forms[0]["txt"+b].value="链接超时"}

else

{document.forms[0]["txt"+b].value="时间"+tim/10+""}

b++

}

function run(){for(var i=1;i<autourl.length;i++)document.write("<img src=http://"+autourl[i]+"/"+Math.random()+" width=1 height=1 onerror=auto('http://"+autourl[i]+"')>")}

run()</script>

 

 

<table border="0" width="100%">

  <tr>

    <td width="50%"><span style="font-size: 9pt">   经常在网页上见到所谓的连接速度多少秒,是不是觉得很高深,其实并不难,把本特效的一段代码粘贴到网页的相关位置,就轻松实现了这种效果,给网页更增添几分专业色彩.</span></td>

  

  </tr>

</table>

</body>

</html>

0 Comments

Wed

04

Mar

2009

37、可以用鼠标拖动表格

37、可以用鼠标拖动表格

<html>

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>网页特效---可以用鼠标拖动的表格</title>

</head>

 

<body>

<SCRIPT LANGUAGE="JavaScript">

<!--

var currentMoveObj = null;    //当前拖动对象

var relLeft;    //鼠标按下位置相对对象位置

var relTop;

function f_mdown(obj)

{

    currentMoveObj = obj;        //当对象被按下时,记录该对象

    currentMoveObj.style.position = "absolute";

    relLeft = event.x - currentMoveObj.style.pixelLeft;

    relTop = event.y - currentMoveObj.style.pixelTop;

}

window.document.onmouseup = function()

{

    currentMoveObj = null;    //当鼠标释放时同时释放拖动对象

}

function f_move(obj)

{

    if(currentMoveObj != null)

    {

        currentMoveObj.style.pixelLeft=event.x-relLeft;

        currentMoveObj.style.pixelTop=event.y-relTop;

    }

}

 

//-->

</SCRIPT>

<BODY>

<TABLE width="100" border=1 onselectstart="return false" style="position:absolute;left:50;top:50" onmousedown="f_mdown(this)" onmousemove="f_move(this)">

<TR>

    <TD bgcolor="#CCCCCC" align="center" style="cursor:move">title1</TD>

</TR>

<TR>

    <TD align="center" height="60">content</TD>

</TR>

</TABLE>

<TABLE width="100" border=1 onselectstart="return false" style="position:absolute;left:350;top:250" onmousedown="f_mdown(this)" onmousemove="f_move(this)">

<TR>

    <TD bgcolor="#CCCCCC" align="center" style="cursor:move">title2</TD>

</TR>

<TR>

    <TD align="center" height="60">content</TD>

</TR>

</TABLE>

</body>

 

</html>

 

0 Comments

Wed

04

Mar

2009

36、制作的圆脚表格

36、制作的圆脚表格

<html>

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>网页特效---VML制作的圆脚表格</title>

 

</head>

 

<body>

 

<html  xmlns:v> 

<style> 

v\:*{behavior:url(#default#VML)} 

</style>   

      <v:RoundRect  style="position:relative;width:150;height:240px"> 

        <v:shadow  on="T"  type="single"  color="#b3b3b3"  offset="3px,3px"/> 

        <v:TextBox  style="font-size:10.2pt;">VML制作的圆脚表格</v:TextBox> 

        </v:RoundRect>

 

</body>

 

</html>

0 Comments

Wed

04

Mar

2009

35、表格依次滚动变换的效果

35、表格依次滚动变换的效果

<html>

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>网页特效--表格依次滚动变换内容的效果</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

</head>

<style>

td,p,div,body,font{font-family:"宋体";font-size:9pt}

</style>

<body bgcolor="#FFFFFF" text="#000000">

<table width=500 border=1 cellspacing=0 cellpadding=0 bgcolor=#f0f0ff bordercolordark=#ffffff bordercolorlight=#4D9AD6 class="a">

<tr height=20 bgcolor=#006DAD valign=middle align=center><td colspan=3><font color=#ffffff>200204月供应商供货排行榜</font></td></tr>

<tr height=20 bgcolor=#4D9AD6 valign=middle align=center><td width=50><font color=#f0f0f0>名次</font></td><td width=300>

<marquee direction=up height=14 scrollamount=14 scrolldelay=2000 scrollleft=0 scrolltop=0><table border=0 cellspacing=0 cellpadding=0 class="A" align=center>

<tr>

<td><font color=#f0f0f0><font color="#FF0000">材料</font> 设备 配件 煤炭 化工 三剂】供应商名称</font></td>

</tr><tr>

<td><font color=#f0f0f0>【材料 <font color="#FF0000">设备</font> 配件 煤炭 化工 三剂】供应商名称</font></td>

</tr>

<tr>

<td><font color=#f0f0f0>【材料 设备 <font color="#FF0000">配件</font> 煤炭 化工 三剂】供应商名称</font></td>

</tr><tr>

<td><font color=#f0f0f0>【材料 设备 配件 <font color="#FF0000">煤炭</font> 化工 三剂】供应商名称</font></td>

</tr><tr>

<td><font color=#f0f0f0>【材料 设备 配件 煤炭 <font color="#FF0000">化工</font> 三剂】供应商名称</font></td>

</tr><tr>

<td><font color=#f0f0f0>【材料 设备 配件 煤炭 化工 <font color="#FF0000">三剂</font>】供应商名称</font></td>

</tr></table></marquee></td><td width=150><font color=#f0f0f0>成交金额(万元)</font></td></tr>

<tr bgcolor="#FFFFFF"><td align=center>1</td><td><marquee direction=up height=14 scrollamount=14 scrolldelay=3000 scrollleft=0 scrolltop=0><table border=0 cellspacing=0 cellpadding=0 class="A">

<tr>

<td>投放量将达160万吨</td>

</tr>

<tr>

<td>mm石投放量将达160万吨</td>

</tr>

<tr>

<td>mm油田投放量将达160万吨司</td>

</tr>

<tr>

<td>mm投放量将达160万吨</td>

</tr>

<tr>

<td>mm油田投放量将达160责司</td>

</tr>

<tr>

<td>mm投放量将达160万吨</td>

</tr>

</table></marquee></td><td><marquee direction=up height=14 scrollamount=14 scrolldelay=2000 scrollleft=0 scrolltop=0><table border=0 cellspacing=0 cellpadding=0 class="A" align=right>

<tr><td align=right> 15,570.40</td></tr>

<tr><td align=right> 4,703.07</td></tr>

<tr><td align=right> 682.84</td></tr>

<tr><td align=right> 5,482.77</td></tr>

<tr><td align=right> 3,671.14</td></tr>

<tr><td align=right> 1,461.90</td></tr>

</table></marquee></td></tr>

<tr bgcolor="#FFFFFF"><td align=center>2</td><td><marquee direction=up height=14 scrollamount=14 scrolldelay=2000 scrollleft=0 scrolltop=0>

<table border=0 cellspacing=0 cellpadding=0 class="A" width="183">

<tr>

<td>mm钢铁投放量将达160万吨</td>

</tr>

<tr>

<td>mm投放量将达160万吨程机械厂</td>

</tr>

<tr>

<td>mm标投放量将达160万吨</td>

</tr>

<tr>

<td>mm投放量将达160万吨责任公司</td>

</tr>

<tr>

<td>mm油投放量将达160万吨司</td>

</tr>

<tr>

<td>mm炼投放量将达160万吨剂厂</td>

</tr>

</table></marquee></td><td><marquee direction=up height=14 scrollamount=14 scrolldelay=2000 scrollleft=0 scrolltop=0><table border=0 cellspacing=0 cellpadding=0 class="A" align=right>

<tr><td align=right> 12,096.92</td></tr>

<tr><td align=right> 4,081.08</td></tr>

<tr><td align=right> 236.80</td></tr>

<tr><td align=right> 2,014.50</td></tr>

<tr><td align=right> 590.65</td></tr>

<tr><td align=right> 1,102.50</td></tr>

</table></marquee></td></tr>

<tr bgcolor="#FFFFFF"><td align=center>3</td><td><marquee direction=up height=14 scrollamount=14 scrolldelay=2000 scrollleft=0 scrolltop=0>

<table border=0 cellspacing=0 cellpadding=0 class="A" width="163">

<tr>

<td>mm钢管公司</td>

</tr>

<tr>

<td>mm投放量将达160万吨械厂</td>

</tr>

<tr>

<td>江头股份</td>

</tr>

<tr>

<td>投放量将达160万吨公司</td>

</tr>

<tr>

<td>濮阳投放量将达160万吨</td>

</tr>

<tr>

<td>投放量将达160万吨剂厂</td>

</tr>

</table></marquee></td><td><marquee direction=up height=14 scrollamount=14 scrolldelay=2000 scrollleft=0 scrolltop=0><table border=0 cellspacing=0 cellpadding=0 class="A" align=right>

<tr><td align=right> 8,316.13</td></tr>

<tr><td align=right> 3,100.50</td></tr>

<tr><td align=right> 161.13</td></tr>

<tr><td align=right> 1,755.00</td></tr>

<tr><td align=right> 401.60</td></tr>

<tr><td align=right> 945.00</td></tr>

</table></marquee></td></tr>

<tr bgcolor="#FFFFFF"><td align=center>4</td><td><marquee direction=up height=14 scrollamount=14 scrolldelay=2000 scrollleft=0 scrolltop=0>

<table border=0 cellspacing=0 cellpadding=0 class="A" width="165">

<tr>

<td>天投放量将达160万吨</td>

</tr>

<tr>

<td>东投放量将达160万吨司</td>

</tr>

<tr>

<td>上海东投放量将达160万吨</td>

</tr>

<tr>

<td>上投放量将达160万吨公司</td>

</tr>

<tr>

<td>三投放量将达160万吨公司</td>

</tr>

<tr>

<td>齐鲁投放量将达160万吨</td>

</tr>

</table></marquee></td><td><marquee direction=up height=14 scrollamount=14 scrolldelay=2000 scrollleft=0 scrolltop=0><table border=0 cellspacing=0 cellpadding=0 class="A" align=right>

<tr><td align=right> 4,654.65</td></tr>

<tr><td align=right> 1,010.40</td></tr>

<tr><td align=right> 125.98</td></tr>

<tr><td align=right> 1,752.00</td></tr>

<tr><td align=right> 161.99</td></tr>

<tr><td align=right> 827.11</td></tr>

</table></marquee></td></tr>

<tr bgcolor="#FFFFFF"><td align=center>5</td><td><marquee direction=up height=14 scrollamount=14 scrolldelay=2000 scrollleft=0 scrolltop=0>

<table border=0 cellspacing=0 cellpadding=0 class="A" width="184">

<tr>

<td>江苏曙投放量将达160万吨公司</td>

</tr>

<tr>

<td>东营投放量将达160万吨司</td>

</tr>

<tr>

<td>秦投放量将达160万吨探工具厂</td>

</tr>

<tr>

<td>投放量将达160万吨)运销公司</td>

</tr>

<tr>

<td>河投放量将达160万吨公司</td>

</tr>

<tr>

<td>上投放量将达160万吨司</td>

</tr>

</table></marquee></td><td><marquee direction=up height=14 scrollamount=14 scrolldelay=2000 scrollleft=0 scrolltop=0><table border=0 cellspacing=0 cellpadding=0 class="A" align=right>

<tr><td align=right> 3,341.80</td></tr>

<tr><td align=right> 567.06</td></tr>

<tr><td align=right> 104.00</td></tr>

<tr><td align=right> 1,650.00</td></tr>

<tr><td align=right> 68.66</td></tr>

<tr><td align=right> 684.00</td></tr>

</table></marquee></td></tr>

</table>

</body>

</html>

0 Comments

Wed

04

Mar

2009

34、复选框全选、全不选和反选的效果实现

34、复选框全选、全不选和反选的效果实现

<html>

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>网页特效代码--复选框全选、全不选和反选的效果实现</title>

<SCRIPT LANGUAGE="JavaScript">

 

<!-- Begin

function checkAll() {

for (var j = 1; j <= 9; j++) {

box = eval("document.checkboxform.C" + j);

if (box.checked == false) box.checked = true;

   }

}

 

function uncheckAll() {

for (var j = 1; j <= 9; j++) {

box = eval("document.checkboxform.C" + j);

if (box.checked == true) box.checked = false;

   }

}

 

function switchAll() {

for (var j = 1; j <= 9; j++) {

box = eval("document.checkboxform.C" + j);

box.checked = !box.checked;

   }

}

//  End -->

</script>

</head>

 

<body>

 

<form name=checkboxform>

<input type=checkbox name=C1 checked>C1<br>

<input type=checkbox name=C2 checked>C2<br>

<input type=checkbox name=C3 checked>C3<br>

<input type=checkbox name=C4 checked>C4<br>

<input type=checkbox name=C5 checked>C5<br>

<input type=checkbox name=C6 checked>C6<br>

<input type=checkbox name=C7 checked>C7<br>

<input type=checkbox name=C8 checked>C8<br>

<input type=checkbox name=C9 checked>C9<br>

<br>

<input type=button value="全部选中" onClick="checkAll()"><br>

<input type=button value="全部不选" onClick="uncheckAll()"><br>

<input type=button value="选择转换" onClick="switchAll()"><br>

</form>

 

</body>

 

</html>

0 Comments

Wed

04

Mar

2009

33、框中的动画

33、框中的动画

<html>

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>网页特效---给文本输入框里加个小动画</title>

</head>

 

<body>

 

<p>

<input type="text" name="T1" size="10" style="background-image: url('sto/2006630114812515.GIF')"></p>

 

</body>

 

</html>

0 Comments

Wed

04

Mar

2009

32、表格慢慢展开的效果

32、表格慢慢展开的效果

<html>

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>网页特效代码---表格或层往下慢慢展开的效果</title>

</head>

 

<body>

<script language="JavaScript">

var act;

function over(){

var h = parseInt(mytd.height);

if (h < 164){

mytd.height = h + 2;

clearTimeout(act);

act = setTimeout('over()', 10);

}

}

function out(){

var h = parseInt(mytd.height);

if (h > 30){

mytd.height = h - 2;

clearTimeout(act);

act = setTimeout('out()', 10);

}

}

</script>

<table width="316" height="30" border="2" cellpadding="0" cellspacing="0" id="mytd" onMouseOver="over()" onMouseOut="out()">

<tr>

<td>这里面填写内容.本站提供见是我最大的财富!<br>网页特效</td>

</tr>

</table>

</body>

 

</html>

 

0 Comments