JavaScript 经典效果集|网页制作者可以进此一看

本站站长招收AS3学徒、出售完整AS3.0视频教程。联系QQ：8286659。电话：13193288922。

一个漂亮的滑动门效果：
http://www.powereasy.net/Product_Service/Purchase.html

JS滑动门菜单代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD><TITLE>绝对经典的标签切换栏目显示(javascript+css)　www.qpsh.com</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<style type="text/css">

</style>
</HEAD>
<BODY>
<DIV id=cntR>
<DIV id=NewsTop>
<DIV id=NewsTop_tit>
<P class=topTit>新闻排行</P>
<P class=topC0>国内</P>
<P class=topC0>国际</P>
<P class=topC0>社会</P>
<P class=topC0>网评</P>
</DIV>
<DIV id=NewsTop_cnt><SPAN title="Don't delete me"></SPAN>
<SPAN>
<A href="#" _fcksavedurl="#" target=_self>新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A><BR>
<A href="#" _fcksavedurl="#" target=_self>最高法:承诺不判赖昌星死刑没有超越法律程序</A><BR>
<A href="#" _fcksavedurl="#" target=_self>物权法:满70年住宅建设用地使用权将自动续期</A><BR>
<A href="#" _fcksavedurl="#" target=_self>弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A><BR>
<A href="#" _fcksavedurl="#" target=_self>揭开郑州神枪手神秘面纱头号狙击手是近视眼</A><BR>
<A href="#" _fcksavedurl="#" target=_self>美军高官:不排除和中国发生直接军事对抗可能</A><BR>
<A href="#" _fcksavedurl="#" target=_self>浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A><BR>
<A href="#" _fcksavedurl="#" target=_self>西方炒作"中国航母威胁论"称05年已正式服役</A><BR>
<A href="#" _fcksavedurl="#" target=_self>女孩生活无法自理请人大代表递交安乐死议案</A><BR>
<A href="#" _fcksavedurl="#" target=_self>建设部：住房公积金制度将覆盖农民工</A><BR>
<div align="right"><A href="#" _fcksavedurl="#" target=_self>...more</A></div>
</SPAN>
<SPAN>
<A href="#" _fcksavedurl="#" target=_self>美华裔女兵在营房上吊死亡军方介入调查(图)</A><BR>
<A href="#" _fcksavedurl="#" target=_self>组图：美国总统布什车队被撞</A><BR>
<A href="#" _fcksavedurl="#" target=_self>梦露掌握肯尼迪之弟秘密遭诱骗自杀(组图)</A><BR>
<A href="#" _fcksavedurl="#" target=_self>孟加拉国严打****人人自危奔驰宝马抛弃路边</A><BR>
<A href="#" _fcksavedurl="#" target=_self>韩国将举行大规模军事演习(图文)</A><BR>
<A href="#" _fcksavedurl="#" target=_self>组图：土星最大卫星表面发现“海洋”</A><BR>
<A href="#" _fcksavedurl="#" target=_self>墨西哥缉毒行动缴获2亿美元巨额现钞(组图)</A><BR>
<A href="#" _fcksavedurl="#" target=_self>组图：全球掀起****抗议加拿大捕猎海豹活动</A><BR>
<A href="#" _fcksavedurl="#" target=_self>美潜艇在百慕大失踪一晚航母战群出动搜索</A><BR>
<A href="#" _fcksavedurl="#" target=_self>匈牙利20万人示威政要�</A><BR>
<A href="#" _fcksavedurl="#" target=_self>20多位学者谈中医问题方舟子遭多名专家批驳</A><BR>
<A href="#" _fcksavedurl="#" target=_self>考研女生自称揭露监考老师作弊成绩被判零分</A><BR>
<A href="#" _fcksavedurl="#" target=_self>全国政协委员建议一户一房制引起网民热议</A><BR>
<A href="#" _fcksavedurl="#" target=_self>河南周口市6名警察将人打昏后扔下楼摔死</A><BR>
<A href="#" _fcksavedurl="#" target=_self>组图：69岁老妻除皱成功与少夫开始新生活</A><BR>
<A href="#" _fcksavedurl="#" target=_self>青海女孩被困洗头房每天接客十几次(图)</A><BR>
<A href="#" _fcksavedurl="#" target=_self>美上将：解放军不是美军对手导弹打不垮台湾</A><BR>
<A href="#" _fcksavedurl="#" target=_self>新疆阜康铁路桥梁坍塌导致运煤列车脱轨</A><BR>
<A href="#" _fcksavedurl="#" target=_self>铁道部回应吴敬琏质疑:春运不涨价将长期坚持</A><BR>
<div align="right"><A href="#" _fcksavedurl="#" target=_self>...more</A></div>
</SPAN>
</DIV>
<SCRIPT>
        var Tags=document.getElementById('NewsTop_tit').getElementsByTagName('p');
        var TagsCnt=document.getElementById('NewsTop_cnt').getElementsByTagName('span');
        var len=Tags.length;
        var flag=1;//修改默认值
        for(i=1;i<len;i++){
          Tags[i].value = i;
          Tags[i].onmouseover=function(){changeNav(this.value)};
          TagsCnt[i].className='undis';
        }
        Tags[flag].className='topC1';
        TagsCnt[flag].className='dis';
        function changeNav(v){
          Tags[flag].className='topC0';
          TagsCnt[flag].className='undis';
          flag=v;
          Tags[v].className='topC1';
          TagsCnt[v].className='dis';
        }
      </SCRIPT>
</DIV>
</DIV>
</BODY></HTML>

用JS+表格实现表格可拖动效果：

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<BODY>
<TABLE width="100" border=1 onselectstart="return false" style="position:absolute;left:50;top:50" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
<TR>
<TD bgcolor="#CCCCCC" align="center" style="cursor:move">title1</TD>
</TR>
<TR>
<TD align="center" height="60">content</TD>
</TR>
</TABLE>
<TABLE width="100" border=1 onselectstart="return false" style="position:absolute;left:350;top:250" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
<TR>
<TD bgcolor="#CCCCCC" align="center" style="cursor:move">title2</TD>
</TR>
<TR>
<TD align="center" height="60">content</TD>
</TR>
</TABLE>
</BODY>

http://bbs.blueidea.com/thread-2486328-1-1.html
打开网址浏览器窗口自动最大化：
加入代码：

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</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>

十五弹出提示的效果

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

十八跳动的菜单

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

二十三经典的带阴影的可拖动的浮动层--转贴自网友: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"> </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>

凹凸文字

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

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>

超级REAL视频播放器：

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

DIV+CSS仿网易的滑动门技术AJAX

<!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>DIV+CSS仿网易的滑动门技术AJAX</title>
<style type="text/css">

</style>
</head>
<body>
<script language=javascript>
function secBoard(n)
{
for(i=0;i<menu.childNodes.length;i++)
menu.childNodes[i].className="sec1";
menu.childNodes[n].className="sec2";

for(i=0;i<main.childNodes.length;i++)
main.childNodes[i].style.display="none";
main.childNodes[n].style.display="block";

}
</script>
<div id="header">
<ul id="menu">
<li onMouseOver="secBoard(0)" class="sec2">最新新闻</li>
<li onMouseOver="secBoard(1)" class="sec1">最新文章</li>
<li onMouseOver="secBoard(2)" class="sec1">最新日志</li>
<li onMouseOver="secBoard(3)" class="sec1">论坛新帖</li>
</ul>

<ul id="main">
<li class="block">第一个内容</li>
<li class="unblock">第二个内容</li>
<li class="unblock">第三个内容</li>
<li class="unblock">第四个内容</li>
</ul>

</div>
</body>
</html>

« 获取QQ在线状态，显示相应动画或图片，并...

如何在flash文件中的不同场景使用不同大小... »

分类: 网站相关

留言
用户名: 密码: 注册? * 请输入验证码(不想注册？OK，请直接输入用户名、验证码、内容即可。密码处请留空)