javascript特效收藏 - 老冯

中级会员

帖子 84
体力 315
注册 2005-11-30

发表于 2006-3-8 10:23 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

二鼠标旁边的提示信息,类似与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>

提示：您可以先修改部分代码再运行

娃娃亲

[广告] 北京网页设计专场讲座现场照片

lipengadmin

中级会员

帖子 84
体力 315
注册 2005-11-30

#3

发表于 2006-3-8 10:25 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

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

提示：您可以先修改部分代码再运行

娃娃亲

lipengadmin

中级会员

帖子 84
体力 315
注册 2005-11-30

#4

发表于 2006-3-8 10:27 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

四滚动的图片

提示：您可以先修改部分代码再运行

娃娃亲

lipengadmin

中级会员

帖子 84
体力 315
注册 2005-11-30

#5

发表于 2006-3-8 10:28 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

五接收键盘指令的脚本

按A就会跳转到娃娃亲的网页,请按A

按A就会跳转到娃娃亲的网页,请按A
                        <SCRIPT language="JavaScript">
                        <!--
                        var hotkey=97
                        var destination="http://www.wawaqin.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
                        onkeydown="javascript:onenter();"
                        function onenter(){
                        if(event.keyCode==13){
                        alert("回车");
                        }
                        }
                        </SCRIPT>

提示：您可以先修改部分代码再运行

[ 本帖最后由 lipengadmin 于 2006-9-18 11:44 编辑 ]

娃娃亲

lipengadmin

中级会员

帖子 84
体力 315
注册 2005-11-30

#6

发表于 2006-3-8 10:29 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

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

<!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 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="http://www.wawaqin.com">让你的文本链接渐隐渐显</A>

提示：您可以先修改部分代码再运行

[ 本帖最后由 lipengadmin 于 2006-9-18 11:45 编辑 ]

娃娃亲

lipengadmin

中级会员

帖子 84
体力 315
注册 2005-11-30

#7

发表于 2006-3-8 10:32 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

七类似与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>

提示：您可以先修改部分代码再运行

娃娃亲

lipengadmin

中级会员

帖子 84
体力 315
注册 2005-11-30

#8

发表于 2006-3-8 10:34 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

八很多的脚本翻页

<!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">
                        
                        </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">
                        
                        </script>
                        </body>
                        </html>

提示：您可以先修改部分代码再运行

娃娃亲

lipengadmin

中级会员

帖子 84
体力 315
注册 2005-11-30

#9

发表于 2006-3-8 10:36 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

九 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>

提示：您可以先修改部分代码再运行

娃娃亲

lipengadmin

中级会员

帖子 84
体力 315
注册 2005-11-30

#10

发表于 2006-3-8 10:39 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

十 JSP页面自动生成html页面/或任何格式页面

先建立一个模本页面:template.htm
<html>
<head>
<title>###title###</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<LINK href="../css.css" rel=stylesheet type=text/css>
</head>

<body>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="2">
<tr>
<td align="center">###title###</td>
</tr>
<tr>
<td align="center">作者：###author###  </td>
</tr>
<tr>
<td>###content###
</td>

</tr>

</table>
</body>
</html>

=========================================
再写一个JSP页面: buildhtml.jsp

<%@ page contentType="text/html; charset=gb2312" import="java.util.*,java.io.*"%>
<%
try{
String title="李鹏的jsp生成静态html文件";
String content="小样，还搞不定你？";
String editer="hpsoft";
String filePath = "";
filePath = request.getRealPath("/")+"template.htm";
out.print(filePath);
String templateContent="";
FileInputStream fileinputstream = new FileInputStream(filePath);//读取模块文件
int lenght = fileinputstream.available();
byte bytes[] = new byte[lenght];
fileinputstream.read(bytes);
fileinputstream.close();
templateContent = new String(bytes);
out.print(templateContent);
templateContent=templateContent.replaceAll("###title###",title);
templateContent=templateContent.replaceAll("###content###",content);
templateContent=templateContent.replaceAll("###author###",editer);//替换掉模块中相应的地方
out.print(templateContent);
// 根据时间得文件名
Calendar calendar = Calendar.getInstance();
String fileame = String.valueOf(calendar.getTimeInMillis()) +".html";
fileame = request.getRealPath("/")+fileame;//生成的html文件保存路径
FileOutputStream fileoutputstream = new FileOutputStream(fileame);//建立文件输出流
out.print("文件输出路径:<br>");
out.print(fileame);
byte tag_bytes[] = templateContent.getBytes();
fileoutputstream.write(tag_bytes);
fileoutputstream.close();
}
catch(Exception e){
out.print(e.toString());
}

%>

娃娃亲

lipengadmin

中级会员

帖子 84
体力 315
注册 2005-11-30

#11

发表于 2006-3-8 10:40 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

十一超级强大的表单验证

<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>

提示：您可以先修改部分代码再运行

娃娃亲

lipengadmin

中级会员

帖子 84
体力 315
注册 2005-11-30

#12

发表于 2006-3-8 10:41 资料主页短消息

发一些我平时收集的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>

提示：您可以先修改部分代码再运行

娃娃亲

lipengadmin

中级会员

帖子 84
体力 315
注册 2005-11-30

#13

发表于 2006-3-8 10:56 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

无聊中,再发!

十三进入,退出页面的各种效果!

进入页面<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种随机选择一种

娃娃亲

lipengadmin

中级会员

帖子 84
体力 315
注册 2005-11-30

#14

发表于 2006-3-8 10:57 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

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

提示：您可以先修改部分代码再运行

娃娃亲

lipengadmin

中级会员

帖子 84
体力 315
注册 2005-11-30

#15

发表于 2006-3-8 11:01 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

十五弹出提示的效果

<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>

提示：您可以先修改部分代码再运行

娃娃亲

lipengadmin

中级会员

帖子 84
体力 315
注册 2005-11-30

#16

发表于 2006-3-8 11:01 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

十六图片之间的切换

提示：您可以先修改部分代码再运行

娃娃亲

lipengadmin

中级会员

帖子 84
体力 315
注册 2005-11-30

#17

发表于 2006-3-8 11:02 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

十七 DIV_圆边圆角的实现

提示：您可以先修改部分代码再运行

娃娃亲

lipengadmin

中级会员

帖子 84
体力 315
注册 2005-11-30

#18

发表于 2006-3-8 11:03 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

十八跳动的菜单

<html>
                        <head>
                        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
                        <title>模仿as效果的导航菜单</title>
                        <style type="text/css">
                        
                        </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>

提示：您可以先修改部分代码再运行

娃娃亲

lipengadmin

中级会员

帖子 84
体力 315
注册 2005-11-30

#19

发表于 2006-3-8 11:04 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

十九通过页面抓取照片

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
                        
                        <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>
                        <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>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>
                        <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>

提示：您可以先修改部分代码再运行

娃娃亲

lipengadmin

中级会员

帖子 84
体力 315
注册 2005-11-30

#20

发表于 2006-3-8 11:05 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

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

<!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">
                        
                        </SCRIPT>
                        </BODY>
                        </HTML>

提示：您可以先修改部分代码再运行

娃娃亲

155120

中级会员

帖子 137
体力 437
注册 2005-5-3

#21

发表于 2006-3-8 13:28 资料短消息

<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>

提示：您可以先修改部分代码再运行

[ 本帖最后由 bound0 于 2006-7-24 11:49 编辑 ]

我是菜鸟，什么都不懂的！

lipengadmin

中级会员

帖子 84
体力 315
注册 2005-11-30

#22

发表于 2006-3-8 14:52 资料主页短消息

发一些我平时收集的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>

提示：您可以先修改部分代码再运行

娃娃亲

lipengadmin

中级会员

帖子 84
体力 315
注册 2005-11-30

#23

发表于 2006-3-8 15:22 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

二十三经典的带阴影的可拖动的浮动层--转贴自网友:marvellous

<!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">
                        
                        </script>
                        <style type="text/css">
                        
                        </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>

提示：您可以先修改部分代码再运行

娃娃亲

Lenvo

银牌会员

帖子 1208
体力 1525
注册 2005-8-1

#24

发表于 2006-3-9 10:08 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

运行代码的代码：

提示：您可以先修改部分代码再运行

<冷韵 style=“物种:人;性别:男;状态:野生;site:Lenvo.cn” />

Lenvo

银牌会员

帖子 1208
体力 1525
注册 2005-8-1

#25

发表于 2006-3-9 10:10 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

凹陷文字

提示：您可以先修改部分代码再运行

<冷韵 style=“物种:人;性别:男;状态:野生;site:Lenvo.cn” />

Lenvo

银牌会员

帖子 1208
体力 1525
注册 2005-8-1

#26

发表于 2006-3-9 10:14 资料主页短消息

发一些我平时收集的JavaScript效果,最近经常求助,有点不好意思,说声谢谢

漂亮的仿flash菜单，来自蓝色经典

提示：您可以先修改部分代码再运行

<冷韵 style=“物种:人;性别:男;状态:野生;site:Lenvo.cn” />

greengnn

版主

帖子 635
体力 784
注册 2004-9-8

#27

发表于 2006-3-17 17:12 资料主页短消息

[收藏] 我平时收集的JavaScript经典效果.

Browser-width defined font size
自定义容器和字体大小

<!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">
                        
                        </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>
                        
                        <div id="header">
                        <h1>Browser-width defined font size</h1>
                        </div>
                        
                        <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>
                        
                        <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>
                        
                        <div class="clearer">
                        </div>
                        </div>
                        
                        <div id="footer">
                        <a href="http://www.themaninblue.com/writing/perspective/2003/12/22/">Back to the explanation</a>
                        </div>
                        </div>
                        
                        </body>
                        </html>

提示：您可以先修改部分代码再运行

greengnn's space/web design
强烈推荐——Web标准精华整理

leaf52

禁止发言

帖子 27
体力 116
注册 2006-3-15

#28

发表于 2006-3-19 17:59 资料短消息

[收藏] 我平时收集的JavaScript经典效果.

超级REAL视频播放器：

提示：您可以先修改部分代码再运行

<p><font face="黑体" color="#FF00FF" size="5"><b>做人要厚道，别耍小花招。</b></font></p>

greengnn

版主

帖子 635
体力 784
注册 2004-9-8

#29

发表于 2006-3-19 23:14 资料主页短消息

[收藏] 我平时收集的JavaScript经典效果.

经常看到许多网站论坛上面快捷键提交表单的方法，比较好奇，经研究写出来了方法

JS CTRL+ENTER 提交

提示：您可以先修改部分代码再运行

accesskey 提交

提示：您可以先修改部分代码再运行

对于快捷键的使用IE：ALT+快捷键

greengnn's space/web design
强烈推荐——Web标准精华整理

greengnn

版主

帖子 635
体力 784
注册 2004-9-8

#30

发表于 2006-3-19 23:16 资料主页短消息

[收藏] 我平时收集的JavaScript经典效果.

[Copy to clipboard]

CODE:

经常看到msn等的网站上面有这种切换效果，偶然的机会在163页看见了，就研究源代码得到了这个特效的源码！

<!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">
                        
                        </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>

提示：您可以先修改部分代码再运行