JavaScript经典效果集锦 [3]_问答一下，轻松解决，电脑应用解决方案专家！

*****[第3页目录]*****
二十一类似与google个性页面的好东东------网友155120
二十二漂亮的表格
二十三经典的带阴影的可拖动的浮动层------网友marvellous--------推荐
二十四运行代码的代码------网友:Lenvo
二十五凹陷文字------------网友:Lenvo
二十六漂亮的仿flash菜单---网友:Lenvo
二十七自定义容器和字体大小---网友:greengnn
二十八超级REAL视频播放器---网友:leaf52
二十九网站论坛上面快捷键提交表单的方法---网友:greengnn
三十 accesskey 提交---网友:greengnn
三十一新闻广告图片切换效果+描述---网友:greengnn
三十二菜单特效---网友:greengnn
三十三采用CSS和JS的下拉菜单---网友:greengnn

二十一类似与google个性页面的好东东:

[html]

<html>
<head>
<title>DRAG the DIV</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
*{font-size:12px}
.dragTable{
    font-size:12px;
    border-top:1px solid #3366cc;
    margin-bottom: 10px;
    width:100%;
    background-color:#FFFFFF;
}
td{vertical-align:top;}
.dragTR{
    cursor:move;
    color:#7787cc;
    background-color:#e5eef9;
    height:20px;
    padding-left:5px;
    font-weight:bold;
}
#parentTable{
    border-collapse:collapse;
    letter-spacing:25px;
}
</style>
<script defer>
/****JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11:09 2006-2-9******/
    var Drag={dragged:false,
        ao:null,
        tdiv:null,
dragStart:function(){
    Drag.ao=event.srcElement;
    if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){
        Drag.ao=Drag.ao.offsetParent;
        Drag.ao.style.zIndex=100;
    }else
        return;
    Drag.dragged=true;
    Drag.tdiv=document.createElement("div");
    Drag.tdiv.innerHTML=Drag.ao.outerHTML;
    Drag.ao.style.border="1px dashed red";
    Drag.tdiv.style.display="block";
    Drag.tdiv.style.position="absolute";
    Drag.tdiv.style.filter="alpha(opacity=70)";
    Drag.tdiv.style.cursor="move";
    Drag.tdiv.style.border="1px solid #000000";
    Drag.tdiv.style.width=Drag.ao.offsetWidth;
    Drag.tdiv.style.height=Drag.ao.offsetHeight;
    Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
    Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
    document.body.appendChild(Drag.tdiv);
    Drag.lastX=event.clientX;
    Drag.lastY=event.clientY;
    Drag.lastLeft=Drag.tdiv.style.left;
    Drag.lastTop=Drag.tdiv.style.top;
},

draging:function(){//重要:判断MOUSE的位置
    if(!Drag.dragged||Drag.ao==null)return;
    var tX=event.clientX;
    var tY=event.clientY;
    Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
    Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
    for(var i=0;i<parentTable.cells.length;i++){
        var parentCell=Drag.getInfo(parentTable.cells[i]);
        if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
            var subTables=parentTable.cells[i].getElementsByTagName("table");
            if(subTables.length==0){
                if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
                    parentTable.cells[i].appendChild(Drag.ao);
                }
                break;
            }
            for(var j=0;j<subTables.length;j++){
                var subTable=Drag.getInfo(subTables[j]);
                if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){
                    parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
                    break;
                }else{
                    parentTable.cells[i].appendChild(Drag.ao);
                }
            }
        }
    }
}
,
dragEnd:function(){
    if(!Drag.dragged)return;
    Drag.dragged=false;
    Drag.mm=Drag.repos(150,15);
    Drag.ao.style.borderWidth="0px";
    Drag.ao.style.borderTop="1px solid #3366cc";
    Drag.tdiv.style.borderWidth="0px";
    Drag.ao.style.zIndex=1;
},
getInfo:function(o){//取得坐标
    var to=new Object();
    to.left=to.right=to.top=to.bottom=0;
    var twidth=o.offsetWidth;
    var theight=o.offsetHeight;
    while(o!=document.body){
        to.left+=o.offsetLeft;
        to.top+=o.offsetTop;
        o=o.offsetParent;
    }
        to.right=to.left+twidth;
        to.bottom=to.top+theight;
    return to;
},
repos:function(aa,ab){
    var f=Drag.tdiv.filters.alpha.opacity;
    var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
    var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
    var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
    var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
    var kf=f/ab;
    return setInterval(function(){if(ab<1){
                            clearInterval(Drag.mm);
                            Drag.tdiv.removeNode(true);
                            Drag.ao=null;
                            return;
                        }
                    ab--;
                    tl-=kl;
                    tt-=kt;
                    f-=kf;
                    Drag.tdiv.style.left=parseInt(tl)+"px";
                    Drag.tdiv.style.top=parseInt(tt)+"px";
                    Drag.tdiv.filters.alpha.opacity=f;
                }
,aa/ab)
},
inint:function(){//初始化
    for(var i=0;i<parentTable.cells.length;i++){
        var subTables=parentTable.cells[i].getElementsByTagName("table");
        for(var j=0;j<subTables.length;j++){
            if(subTables[j].className!="dragTable")break;
            subTables[j].rows[0].className="dragTR";
            subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);
        }
    }
    document.onmousemove=Drag.draging;
    document.onmouseup=Drag.dragEnd;
}
//end of Object Drag
}
Drag.inint();

function _show(str){
    var w=window.open('','');
    var d=w.document;
    d.open();
    str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=\"$1\"$2");
    str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");
    str=str.replace(/\r/g,"<br />\n");
    d.write(str);
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable">
<tr >
    <td width="25%" valgin="top">
        <table border=0 class="dragTable" cellspacing="0">
            <tr>
                <td><b>GMAIL</b></td>
            </tr>
            <tr>
                <td>暂时无法显示GMAIL内容</td>
            <tr>
        </table><table border=0 class="dragTable" cellspacing="0">
            <tr>
                <td>新浪体育</td>
            </tr>
            <tr>
                <td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步<br/> 印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角美加施冷箭</td>
            <tr>
        </table>
        <table border=0 class="dragTable" cellspacing="0">
            <tr>
                <td>焦点</td>
            </tr>
            <tr>
                <td>京广线中断4小时20临客返汉晚点中国新闻网-湖北分社 - 所有 235 相关报道 »哈马斯已有总理人选
解放日报报业集团 - 所有 489 相关报道 »陈水扁是两岸关系麻烦制造者武汉晨报 - 所有 179 相关报道 »</td>
            <tr>
        </table>
    </td>
    <td width="25%">
        <table border=0 class="dragTable" cellspacing="0">
            <tr>
                <td>中关村在线</td>
            </tr>
            <tr>
                <td>新年行情速递双敏板卡低价推荐终于等到了，映泰6600GT一降降一百罗技G15游戏键盘热力促销，代购价仅529元 </td>
            <tr>
        </table></td>
    <td width="25%">
        <table border=0 class="dragTable" cellspacing="0">
            <tr>
                <td>网易商业</td>
            </tr>
            <tr>
                <td>上海GDP增幅去年出现回落应对反倾销中国鞋企联手对抗欧盟尹家绪操盘南方汽车长安谋求曲线整体境外上市</td>
            <tr>
        </table>        <table border=0 class="dragTable" cellspacing="0">
            <tr>
                <td>黑可天下</td>
            </tr>
            <tr>
                <td>上海GDP增幅去年出现回落应对反倾销中国鞋企联手对抗欧盟尹家绪操盘南方汽车长安谋求曲线整体境外上市</td>
            <tr>
        </table>
    </td>
</tr>
</table>
<input type="button" value="SHOW" onClick="_show(document.documentElement.innerHTML)" />
</body>
</html>
[/html]

二十二漂亮的表格：

[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Tables</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
/* CSS Document */

body {
    font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #4f6b72;
    background: #E6EAE9;
}

a {
    color: #c75f3e;
}

#mytable {
    width: 700px;
    padding: 0;
    margin: 0;
}

caption {
    padding: 0 0 5px 0;
    width: 700px;
    font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-align: right;
}

th {
    font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #4f6b72;
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    border-top: 1px solid #C1DAD7;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
    padding: 6px 6px 6px 12px;
    background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}

th.nobg {
    border-top: 0;
    border-left: 0;
    border-right: 1px solid #C1DAD7;
    background: none;
}

td {
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    background: #fff;
    font-size:11px;
    padding: 6px 6px 6px 12px;
    color: #4f6b72;
}

td.alt {
    background: #F5FAFA;
    color: #797268;
}

th.spec {
    border-left: 1px solid #C1DAD7;
    border-top: 0;
    background: #fff url(images/bullet1.gif) no-repeat;
    font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
    border-left: 1px solid #C1DAD7;
    border-top: 0;
    background: #f5fafa url(images/bullet2.gif) no-repeat;
    font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #797268;
}
/*---------for IE 5.x bug*/
html>body td{ font-size:11px;}
</style>
<body>
<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
<caption> </caption>
<tr>
<th scope="col" abbr="Configurations" class="nobg">Configurations</th>

<th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
<th scope="col" abbr="Dual 2">Dual 2GHz</th>
    <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>
</tr>
<tr>
<th scope="row" abbr="Model" class="spec">lipeng</th>
<td>M9454LL/A</td>

<td>M9455LL/A</td>
<td>M9457LL/A</td>
</tr>
<tr>
<th scope="row" abbr="G5 Processor" class="specalt">mapabc</th>
<td class="alt">Dual 1.8GHz PowerPC G5</td>
<td class="alt">Dual 2GHz PowerPC G5</td>

<td class="alt">Dual 2.5GHz PowerPC G5</td>
</tr>
<tr>
<th scope="row" abbr="Frontside bus" class="spec">地图名片</th>
<td>900MHz per processor</td>
<td>1GHz per processor</td>
<td>1.25GHz per processor</td>

</tr>
<tr>
<th scope="row" abbr="L2 Cache" class="specalt">图秀卡</th>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
</tr>

</table>

</body>
</html>[/html]

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

[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyPixbot</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">

</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"> </td>
                </tr>
</table>
<br>
</div>
<script>loadwin('assist')</script>
<div id="rank" style="position:absolute; left:15px; top:194px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('rank','',0,0,150,18,true,false,-1,-1,-1,-1,15,194,100,'',false,'')">
        <table width="180" border="1" cellpadding="0" cellspacing="0">
                <tr>
                        <td class="caption">SeekRank</td>
                        <td width="14" align="center"><a href="#" onclick="with(MM_findObj('rankwin').style)display=display=='none'?'':'none'">%</a></td>
                        <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('assist','','inherit','rank','','hide')">X</a></td>
                </tr>
                <tr id="rankwin">
                        <td height="100" colspan="3" bordercolor="#eeeeee"> </td>
                </tr>
</table>
        <br>
</div>
<script>setTimeout("loadwin('rank')",500)</script>
<div id="mycolor" style="position:absolute; left:15px; top:320px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('mycolor','',0,0,150,18,true,false,-1,-1,-1,-1,15,320,100,'',false,'')">
        <table width="180" border="1" cellpadding="0" cellspacing="0">
                <tr>
                        <td class="caption">MyColor</td>
                        <td width="14" align="center"><a href="#" onclick="with(MM_findObj('mycolorwin').style)display=display=='none'?'':'none'">%</a></td>
                        <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('mycolor','','hide')">X</a></td>
                </tr>
                <tr id="mycolorwin">
                        <td height="100" colspan="3" bordercolor="#eeeeee"><table width="100%" border="0" cellspacing="0" cellpadding="2">
                                <tr>
                                        <td align="center"><a href="#" onclick="cs('#00CCFF','#f6f6f6','#eeeeee')">Default</a></td>
                                </tr>
                                <tr>
                                        <td align="center"><a href="#" onclick="cs('red','#eeccee','#eeddee')">StyleSheet#1</a></td>
                                </tr>
                                <tr>
                                        <td align="center"><a href="#" onclick="cs('#99ccff','#eeeeee','#ccddff')">StyleSheet#2</a></td>
                                </tr>
                                <tr>
                                        <td align="center"><a href="#" onclick="cs('#ff9999','#ffffff','#ffeeff')">StyleSheet#3</a></td>
                                </tr>
                                <tr>
                                        <td align="center"><a href="#" onclick="cs('skyblue','#eeeeee','#99ddff')">StyleSheet#4</a></td>
                                </tr>
                                <tr>
                                        <td align="center"><a href="#" onclick="cs('#009900','#eeffee','#ddffdd')">StyleSheet#5</a></td>
                                </tr>
                        </table></td>
                </tr>
</table>
        <br>
</div>
<script>setTimeout("loadwin('mycolor')",1000)</script>
<div id="results" style="position:absolute; left:204px; top:68px; width:575px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('results','',0,0,400,18,true,false,-1,-1,-1,-1,204,68,50,'',false,'')">
        <table width="570" border="1" cellpadding="0" cellspacing="0">
                <tr>
                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                                <td class="caption">Results</td>
                                                <td width="12" class="button"><a href="#" onClick="with(MM_findObj('resultswin').style)display=display=='none'?'':'none'">%</a></td>
                                                <td width="12" class="button"><a href="#" onClick="MM_showHideLayers('results','','inherit')">X</a></td>
                                        </tr>
                        </table></td>
                </tr>
                <tr>
                        <td height="20" bordercolor="#eeeeee"><input name="url" type="text" value="http://www.google.com/search?q=ezlee" size="100">
                        <a href="#" onclick="mainframe.location=url.value">Search</a></td>
                </tr>
                <tr id="resultswin">
                        <td height="318" valign="top" class="navframe"><aiframe name="mainframe" id="mainframe" src="http://www.google.com/search?q=ezlee" width="100%" height="100%" frameborder="0" scrolling="auto"><font color="#FF0000">Welcome!</font></aiframe></td>
                </tr>
                <tr>
                        <td height="14" class="statusbar">Ready!</td>
         </tr>
</table>
        <br>
</div>
<script>setTimeout("loadwin('results')",2000)</script>
</body>
</html>[/html]

二十四运行代码的代码------网友:Lenvo

[html]<script>
function Preview()
{
var TestWin=open('');
TestWin.document.write(code.value);

}
</script>

<textarea id=code cols=60 rows=15></textarea>
<br>
<button onclick=Preview() >运行</button>[/html]

二十五凹陷文字------------网友:Lenvo

[html]<div style="width:300px;padding:20px;overflow:hidden;word-wrap:break-word;word-break:break:all; font-size:12px; line-height:18px; background-color:#eeeeee;">
<font disabled>
怎么样，我凹下去了吧？<br>
你不想试试吗？<br>
<a href="http://www.lenvo.cn/">www.lenvo.cn</a></font>
</div>[/html]

二十六漂亮的仿flash菜单---网友:Lenvo（来自蓝色经典）

[html]<style>
/* 先把这个 xmenu 的样式放到css里 */
.xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;}
</style>

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

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


<table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center">
    <tr>
        <td><a href="http://www.lenvo.cn/">www.lenvo.cn</a></td>
        <td>Name</td>
        <td>Is</td>
        <td>LeX</td>
        <td>Rus</td>
        <td>!!!</td>
    </tr>
</table>

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

<table class="xmenu" id="xmenu1" width="100" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center">
    <tr><td>My</td></tr>
    <tr><td>Name</td></tr>
    <tr><td>Is</td></tr>
    <tr><td>LeX</td></tr>
    <tr><td>Rus</td></tr>
    <tr><td>!!!</td></tr>
</table>
<script>attachXMenu(xmenu1);</script>[/html]

搜索

JavaScript经典效果集锦 [3]