经典代码|Lixiaoliang's Programs Design|北京网站建设工作室,助力企业信息化建设|Lixiaoliang.com

代码搜索
输入您的搜索字词提交搜索表单

更多经典代码
JS显示当前年月日星期时间分秒代码（时间不断变动）(2010-7-16)
XML语法检测器(2010-3-10)
用JS将指定的关键字加链接显示(2010-3-10)
间歇性无缝滚动JS代码实例(2010-3-10)
js将网址转为urlencode类型(2008-12-4)
CSS坚向二级菜单(2008-11-25)
几乎被设计师遗忘了的标签legend(2008-10-10)
根据机器不同语言访问不同页面(2008-10-10)
js二级联动三级联动(2008-10-10)
如何实现简单的FAQ折叠效果(2008-10-10)

更多大杂记
郭德纲博文：有药也不给你吃(2010-8-12)
郭德纲道歉信(2010-8-12)
物理电学经典电路之楼上楼下电路示意图(2010-6-13)
荣威roewe350广告背景歌曲音乐(视频+音乐+铃音)(2010-6-13)
上传的Flv格式的文件到空间后不能播放,提示找不到.解决方案(2010-5-6)
再回首--姜育恒(2010-3-26)
2010年春节晚会节目单[这都能搞出来](2010-1-15)
朝鲜阅兵式踏正步,真搞笑(2009-9-22)
余世维博士讲座全集清晰版HTTP免费下载成功经理人讲座(2009-9-22)
教你如何点亮QQ图标?怎样免费点亮QQ全部图标?(2009-9-22)

更多企业建站讨论
ICP信息备案流程图(2008-12-1)
网站常用中英文菜单(2008-6-30)
中小企业为什么都认准了中企？？？(2008-4-11)
企业信息化建设的意义(2007-12-17)
企业为什么要建设网站(2007-12-17)

更多成功案例

经典代码
[75] 腾讯女性频道图片切换效果 [2007-12-15]
腾讯女性频道的一个图片切换效果

<style type="text/css"> .woon{border:1px solid #fff;} .wooff{border:1px solid #D85C8A;filter:progid:DXImagetransform.Microsoft.Alpha(style=1,opacity=100,finishOpacity=0);} </style> <TABLE cellSpacing=0 cellPadding=0 width=224 align=center background=http://bbs.blueidea.com/attachments/2007/6/1/20070601_449f1c7054a944d443d7wRNYLlslxLep.gif border=0> <TR> <TD align=middle height=381> <DIV id=fc style="BORDER-RIGHT: #d85c8a 1px solid; BORDER-TOP: #d85c8a 1px solid; FILTER: progid:DXImagetransform.Microsoft.GradientWipe(duration=3,gradientSize=0.8,motion=forward ); BORDER-LEFT: #d85c8a 1px solid; WIDTH: 213px; BORDER-BOTTOM: #d85c8a 1px solid; HEIGHT: 370px"> <DIV style="DISPLAY: block"><A href="http://lady.qq.com/a/20070121/000009.htm" target=_blank><IMG onmouseover=clearAuto(); onmouseout=setAuto() height=370 src="http://bbs.blueidea.com/attachments/2007/6/1/20070601_3c956f056638ca6fb6647PVlf5sloJYZ.jpg" width=213 border=0></A></DIV> <DIV style="DISPLAY: none"><A href="http://lady.qq.com/a/20070121/000007.htm" target=_blank><IMG onmouseover=clearAuto(); onmouseout=setAuto() height=370 src="http://bbs.blueidea.com/attachments/2007/6/1/20070601_c3c2cf19963c3cd3dca42376AYR1oHUo.jpg" width=213 border=0></A></DIV> <DIV style="DISPLAY: none"><A href="http://lady.qq.com/a/20070121/000005.htm" target=_blank><IMG onmouseover=clearAuto(); onmouseout=setAuto() height=370 src="http://bbs.blueidea.com/attachments/2007/6/1/20070601_cde0d11a387807d5d6beQnrvGQ5fOQq2.jpg" width=213 border=0></A></DIV> <DIV style="DISPLAY: none"><A href="http://lady.qq.com/a/20061221/000042.htm" target=_blank><IMG onmouseover=clearAuto(); onmouseout=setAuto() height=370 src="http://bbs.blueidea.com/attachments/2007/6/1/20070601_588bd3cebb8a547c4539qq7YOA69Dh6G.jpg" width=213 border=0></A></DIV></DIV></TD></TR> <TR> <TD vAlign=top height=98> <TABLE id=num cellSpacing=1 cellPadding=0 align=center border=0> <TBODY> <TR> <TD class=woon onmouseover=clearAuto(); onclick=Mea(0); onmouseout=setAuto()><IMG ondblclick="MM_openBrWindow('http://lady.qq.com/a/20070121/000009.htm','','')" style="CURSOR: hand" height=90 src="http://bbs.blueidea.com/attachments/2007/6/1/20070601_e2ac5ea7aad44918dfb6TVp2rJKNpmvq.jpg" width=51></TD> <TD class=wooff onmouseover=clearAuto(); onclick=Mea(1); onmouseout=setAuto()><IMG ondblclick="MM_openBrWindow('http://lady.qq.com/a/20070121/000007.htm','','')" style="CURSOR: hand" height=90 src="http://bbs.blueidea.com/attachments/2007/6/1/20070601_ec7cb1dfb129946e39c03j3WTE3ddjZm.jpg" width=51></TD> <TD class=wooff onmouseover=clearAuto(); onclick=Mea(2); onmouseout=setAuto()><IMG ondblclick="MM_openBrWindow('http://lady.qq.com/a/20070121/000005.htm','','')" style="CURSOR: hand" height=90 src="http://bbs.blueidea.com/attachments/2007/6/1/20070601_7778b9acd14c0af80e6bWvxeRDfZZ3fw.jpg" width=51></TD> <TD class=wooff onmouseover=clearAuto(); onclick=Mea(3); onmouseout=setAuto()><IMG ondblclick="MM_openBrWindow('http://lady.qq.com/a/20061221/000042.htm','','')" style="CURSOR: hand" height=90 src="http://bbs.blueidea.com/attachments/2007/6/1/20070601_e7a59528d1978b1f9ff1f21Ejmx6nxIi.jpg" width=51></TD></TR> </TBODY> </TABLE> </TD> </TR> </TABLE> <SCRIPT> var n=0; var showNum = document.getElementById("num"); function Mea(value){ n=value; setBg(value); plays(value); } function setBg(value){ for(var i=0;i<4;i++) if(value==i){ showNum.getElementsByTagName("td")[i].className='woon'; } else{ showNum.getElementsByTagName("td")[i].className='wooff'; } } function plays(value){ with (fc){ filters[0].Apply(); for(i=0;i<4;i++)i==value?children[i].style.display="block":children[i].style.display="none"; filters[0].play(); } } function clearAuto(){clearInterval(autoStart)} function setAuto(){autoStart=setInterval("auto(n)", 5000)} function auto(){ n++; if(n>3)n=0; Mea(n); } function sub(){ n--; if(n<0)n=3; Mea(n); } setAuto(); </SCRIPT>
提示：您可以先修改部分代码再运行
[74] 震动的超链 [2007-12-15]

<html> <head> <script type="text/javascript"> function shakeleft() { document.getElementById('myLink').style.position="relative" document.getElementById('myLink').style.left="3" timer=setTimeout("shakeright()",10) } function shakeright() { document.getElementById('myLink').style.left="0" timer=setTimeout("shakeleft()",10) } function stoptimer() { clearTimeout(timer) } </script> </head> <body> <a id="myLink" href="http://www.lixiaoliang.com/" onmouseover="shakeleft()" onmouseout="stoptimer()">Mouse over this link</a> </body> </html>
提示：您可以先修改部分代码再运行
[73] js-Tips效果,停留一会自动慢慢消失 [2007-12-15]
js-Tips效果,停留一会自动慢慢消失

<html> <head> <script language=JavaScript> //***********默认设置定义.********************* tPopWait=2; //设置停留多少豪秒后显示提示。 tPopShow=1000; //设置显示多少豪秒后关闭提示 showPopStep=1; //设置完成显示的速度 popOpacity=60; //设置显示透明度 backColor='#f4ffe0'; //设置背景颜色 fontColor='#000000'; //设置字体颜色 borderColor='#006600'; //设置边框颜色 fontSize=9; //设置字体大小 //***************内部变量定义***************** sPop=null; curShow=null; tFadeOut=null; tFadeIn=null; tFadeWaiting=null; document.write("<style type='text/css'id='defaultPopStyle'>"); document.write(".cPopText { background-color:"); document.write(backColor); //设置背景颜色 document.write(";color:"); document.write(fontColor); //设置字体颜色 document.write(";border: 1px "); document.write(borderColor); //设置边框颜色 document.write(" solid;font-size:"); document.write(fontSize); //设置字体大小 document.write("pt;padding: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*2;//+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> </head> <body> <a href="#" title="看到超酷效果了吗？请停留一会儿，它会慢慢消失！<br/>怎么样，不错吧？<br/><img src='http://www.lixiaoliang.com/link/lixiaoliang.com88x31.jpg'/>">请把鼠标移到这里，看看效果！</a> </body> </html>
提示：您可以先修改部分代码再运行
[72] 闪烁的超级链接 [2007-12-15]

<html> <head> <script type="text/javascript"> function blinklink() { if (!document.getElementById('blink').style.color) { document.getElementById('blink').style.color="red" } if (document.getElementById('blink').style.color=="red") { document.getElementById('blink').style.color="black" } else { document.getElementById('blink').style.color="red" } timer=setTimeout("blinklink()",100) } function stoptimer() { clearTimeout(timer) } </script> </head> <body onload="blinklink()" onunload="stoptimer()"> <a id="blink" href="http://www.lixiaoliang.com">北京网站建设</a> </body> </html>
提示：您可以先修改部分代码再运行
[71] CSS+js实现的下拉菜单 [2007-12-15]

<style type="text/css">  </style> javascript部分： <script type=text/javascript><![CDATA[//><!]]></script> html显示部分： <ul id="nav"> <li><a href="http://www.lixiaoliang.com">产品介绍</a> <ul> <li><a href="http://www.lixiaoliang.com">产品一</a></li> <li><a href="http://www.lixiaoliang.com">产品一</a></li> <li><a href="http://www.lixiaoliang.com">产品一</a></li> <li><a href="http://www.lixiaoliang.com">产品一</a></li> <li><a href="http://www.lixiaoliang.com">产品一</a></li> <li><a href="http://www.lixiaoliang.com">产品一</a></li> </ul> </li> <li><a href="http://www.lixiaoliang.com">服务介绍</a> <ul> <li><a href="http://www.lixiaoliang.com">服务二</a></li> <li><a href="http://www.lixiaoliang.com">服务二</a></li> <li><a href="http://www.lixiaoliang.com">服务二</a></li> <li><a href="http://www.lixiaoliang.com">服务二服务二</a></li> <li><a href="http://www.lixiaoliang.com">服务二服务二服务二</a></li> <li><a href="http://www.lixiaoliang.com">服务二</a></li> </ul> </li> <li><a href="http://www.lixiaoliang.com">成功案例</a> <ul> <li><a href="http://www.lixiaoliang.com">案例三</a></li> <li><a href="http://www.lixiaoliang.com">案例</a></li> <li><a href="http://www.lixiaoliang.com">案例三案例三</a></li> <li><a href="http://www.lixiaoliang.com">案例三案例三案例三</a></li> </ul> </li> <li><a href="http://www.lixiaoliang.com">关于我们</a> <ul> <li><a href="http://www.lixiaoliang.com">我们四</a></li> <li><a href="http://www.lixiaoliang.com">我们四</a></li> <li><a href="http://www.lixiaoliang.com">我们四</a></li> <li><a href="http://www.lixiaoliang.com">我们四111</a></li> </ul> </li> <li><a href="http://www.lixiaoliang.com">在线演示</a> <ul> <li><a href="http://www.lixiaoliang.com">演示</a></li> <li><a href="http://www.lixiaoliang.com">演示</a></li> <li><a href="http://www.lixiaoliang.com">演示</a></li> <li><a href="http://www.lixiaoliang.com">演示演示演示</a></li> <li><a href="http://www.lixiaoliang.com">演示演示演示</a></li> <li><a href="http://www.lixiaoliang.com">演示演示</a></li> <li><a href="http://www.lixiaoliang.com">演示演示演示</a></li> <li><a href="http://www.lixiaoliang.com">演示演示演示演示演示</a></li> </ul> </li> <li><a href="http://www.lixiaoliang.com">联系我们</a> <ul> <li><a href="http://www.lixiaoliang.com">联系联系联系联系联系</a></li> <li><a href="http://www.lixiaoliang.com">联系联系联系</a></li> <li><a href="http://www.lixiaoliang.com">联系</a></li> <li><a href="http://www.lixiaoliang.com">联系联系</a></li> <li><a href="http://www.lixiaoliang.com">联系联系</a></li> <li><a href="http://www.lixiaoliang.com">联系联系联系</a></li> <li><a href="http://www.lixiaoliang.com">联系联系联系</a></li> </ul> </li> </ul>
提示：您可以先修改部分代码再运行
[70] 旋转变换文字 [2007-12-15]

<SCRIPT language=javascript> //luxiaoqing Phrase="北京网站建设-助力企业信息化建设" Balises="" Taille=40; Midx=100; Decal=0.5; Nb=Phrase.length; y=-10000; for (x=0;x<Nb;x++){ Balises=Balises + '<DIV Id=L' + x + ' STYLE="width:3;font-family: Courier New;font-weight:bold;position:absolute;top:40;left:50;z-index:0">' + Phrase.charAt(x) + '</DIV>' } document.write (Balises); Time=window.setInterval("Alors()",10); Alpha=5; I_Alpha=0.05; function Alors(){ Alpha=Alpha-I_Alpha; for (x=0;x<Nb;x++){ Alpha1=Alpha+Decal*x; Cosine=Math.cos(Alpha1); Ob=document.all("L"+x); Ob.style.posLeft=Midx+100*Math.sin(Alpha1)+50; Ob.style.zIndex=20*Cosine; Ob.style.fontSize=Taille+25*Cosine; Ob.style.color="rgb("+ (27+Cosine*80+50) + ","+ (127+Cosine*80+50) + ",0)"; } } </SCRIPT>
提示：您可以先修改部分代码再运行
[69] 透明的Div提示tips [2007-12-15]
透明的Div提示tips

<BODY> <script language="JavaScript"> if ( had_tips != 1 ) { var _ua = document.all ? ((navigator.userAgent.indexOf('MSIE 5') > 5) ? "ie5" : "ie4") : "foo"; if (_ua != "foo" ) { if (typeof(_doc) == "undefined" || _doc == null) _doc = document; var _tipx = 0; var _tipy = 0; var _tipOX = 10; var _tipOY = 1; var _tipWidth; // Opacity=70 提示框背景透明度 _doc.write('<DIV ID="TIP__" STYLE="filter:Alpha(Opacity=70,style=1,Finishopacity=80);position:absolute;display:none;z-index:100"></DIV>'); _doc.onmousemove = tsai; var _tip = _doc.all['TIP__']; } } var had_tips = 1; function tsaiannie (sMsg, sTitle, iWidth, iHeight, iBorder, sTFC, sTBC, sMFC, sMBC) { _tipWidth = 180; // 提示框的寬度 var _tipBorder = 2, // 提示框边框的寬度 _tipTFC = "#FFF8F0", _tipTBC = "#ff8c00", // 提示框边框的顏色 _tipMFC = "#3F3F38", _tipMBC = "ffffff"; // 提示框背景的顏色 if (_ua == "foo") return; _tip.innerHTML = '<TABLE CELLPADDING="'+_tipBorder+'" CELLSPACING="0" WIDTH="'+_tipWidth+'" BORDER="0" BGCOLOR="'+_tipTBC+'"><TR><TD>' + ((sTitle != null) ? '<TABLE CELLPADDING="0" CELLSPACING="0" WIDTH="100%" BORDER="0"><TR><TD STYLE="padding-top:2px;padding-bottom:2px;font:8pt Arial,Verdana,Tahoma;color:'+_tipTFC+'">'+sTitle+'</TD></TR></TABLE>' : '') + '<TABLE CELLPADDING="2" CELLSPACING="0" WIDTH="100%" BORDER="0" BGCOLOR="'+_tipMBC+'"><TR><TD STYLE="color:'+_tipMFC+';font:normal 8pt Arial,Verdana,Tahoma">'+sMsg+'</TD></TR></TABLE></TD></TR></TABLE>'; annie(); _tip.style.display = ""; } function tsai() { if (_ua == "ie4") { _tipx = event.x; _tipy = event.y; } else if (_ua == "ie5") { _tipx = (event.clientX + _tipOX + _tipWidth <= _doc.body.clientWidth) ? (event.clientX + _doc.body.scrollLeft + _tipOX) : (event.clientX + _doc.body.scrollLeft - _tipWidth - 5); _tipy = event.clientY + _doc.body.scrollTop + _tipOY; } else { return; } if (_tip.style.display != "none") annie(); } function annie() { _tip.style.pixelTop = _tipy; _tip.style.pixelLeft = _tipx; } function tsai900403 () { _tip.style.display = "none"; } document.write('<A HREF="http://www.lixiaoliang.com/" ONMOUSEOVER="tsaiannie(\'看到了<font color=#ff1493>效果</font>了吗？\' )" ONMOUSEOUT="tsai900403()" target="_blank">鼠标移过来看效果</A><DIV></DIV>'); </script> </BODY>
提示：您可以先修改部分代码再运行
[68] 取得页面的大小宽高等各种信息 [2007-12-15]
取得页面的大小宽高等各种信息

<body> <SCRIPT LANGUAGE="JavaScript"> function test(){ var s = ""; s += "\r\n网页可见区域宽："+ document.body.clientWidth; s += "\r\n网页可见区域高："+ document.body.clientHeight; s += "\r\n网页可见区域宽："+ document.body.offsetWidth +" (包括边线的宽)"; s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)"; s += "\r\n网页正文全文宽："+ document.body.scrollWidth; s += "\r\n网页正文全文高："+ document.body.scrollHeight; s += "\r\n网页被卷去的高："+ document.body.scrollTop; s += "\r\n网页被卷去的左："+ document.body.scrollLeft; s += "\r\n网页正文部分上："+ window.screenTop; s += "\r\n网页正文部分左："+ window.screenLeft; s += "\r\n屏幕分辨率的高："+ window.screen.height; s += "\r\n屏幕分辨率的宽："+ window.screen.width; s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight; s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth; alert(s); } </SCRIPT> <A HREF="javascript:test()">点击我查看信息</A> </body>
提示：您可以先修改部分代码再运行
[67] js自动给图片添加图片的倒影 [2007-12-15]
给图片添加图片的倒影

<SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </head> <body> <img class="reflect" src="http://www.lixiaoliang.com/link/lixiaoliang.com88x31.jpg"/> </body>
提示：您可以先修改部分代码再运行
[66] 鼠标经过数字放大,仿qihoo [2007-12-15]
鼠标经过数字放大,仿qihoo的分页式的效果

<style type="text/css"> ul#hovershow2{ list-style-type: none; margin: 50px; width:200px; float: left; display: inline; clear: both; } ul#hovershow2 li{ float: left; display: inline; width:20px; height: 20px; margin: 2px; } ul#hovershow2 li a { text-decoration: none; display: block; width:20px; height:20px; border:1px red solid; background-color: White; line-height: 20px; font-size: 12px; text-align: center; } ul#hovershow2 li a:hover{ position: absolute; width:40px; height: 40px; line-height: 40px; font-size: 32px; z-index:100; margin: -10px 0 0 -10px; } ul#hovershow2 li:hover + li a{ position: absolute; width:30px; height: 30px; line-height: 30px; font-size: 24px; z-index:99; margin: -5px 0 0 -5px; } </style> </head> <body> <ul id="hovershow2"> <li><a href="1#" title="test"><span>1</span></a></li> <li><a href="2#" title="test"><span>2</span></a></li> <li><a href="3#" title="test"><span>3</span></a></li> <li><a href="4#" title="test"><span>4</span></a></li> <li><a href="5#" title="test"><span>5</span></a></li> <li><a href="6#" title="test"><span>6</span></a></li> <li><a href="7#" title="test"><span>7</span></a></li> </ul> </body>
提示：您可以先修改部分代码再运行

4/6P
1
2
3
4
5
6