IETester » 前端开发

11款实用的一句话网站设计代码

admin — Tue, 11 May 2010 07:32:47 +0000

整理了一些比较实用的网站设计时常用的代码，代码很简单，只有一行，不需要理解多高深的JS或者HTML知识，按照提示把相应的代码加入到网页模板中即可得到你想要的效果。

1：进入网页时淡入淡出的效果。

在头部head之间加入此代码，你会发现点击链接的时候，网页现实的是淡入淡出的效果。此代码含义如下：Page-Exit”（离开网页）、”Site-Enter”（进入站点）、”Site-Exit”（离开站点）其中”Duration=1.0″可以设定每个周期的时间为多久，单位是秒（现在设置的是每周期1秒）。

2：把滔滔（微博客）完美放到你的博客中。试用于各种程序语言。演示见本站公告.红色部分注意事项：改成你的QQ号。 1就是只显示一条信息。这是JS文件路径。下载地址：http://www.lusongsong.com/reed/dkapi.js

3：彻底屏蔽鼠标右键。此段代码加入区域。

4：此段代码加入区域将取消选取、防止复制。

5：不准粘贴。 此段代码加入区域

6：防止网站被扒皮。上次卢松松讲了一个方法是给网站“扒皮”，如何防止网站被扒皮呢？加入以下代码就可以了，网页将不能被另存为

7：脚本永不出错,如果您的浏览器提示您的网址JS脚本出错，但检测了一遍没发现错误，就可以使用一下代码：

8：在规定时间内跳转，意思就是5秒后自动跳转到该页面下，适合做404网页。

9：可防止复制，此段代码加入区域

10. 防止被人frame。例：有些网址导航站收录您的网址之后，不会直接跳转到你的网站，而是加载到他的网页中，这样不会给你的网站产生任何IP和PV。如果您不希望这样，那么请加入此段代码。

11：页面自动刷新，把如下代码加入区域中其中20指每隔20秒刷新一次页面. 可用户增加文章点击率，这是作弊行为。

转自卢松松的博客

两种简单实现菜单高亮显示的JS类

admin — Tue, 11 May 2010 05:57:03 +0000

近期在写一个博客管理后台的前端,涉及在同一页面两种高亮显示当前菜单的需求.记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web前端来说,是比较常用到的效果,正好此次又要用到,特地整理出我所写的两种高亮类.

其实思路很简单,第一种方法是通过遍历链接组的href值,通过indexOf判断href值是否被包含在浏览器当前url值中.此方法有一定局限,比如对于iframe内的菜单是不能这样判断的; 第二种方法适用范围更广一样,实现思路也比较简单,即通过判断点击,给点击项加载高亮样式.

第一种判断当前URL值高亮类代码:

//@Mr.Think—判断URL实现菜单高亮显示
function highURL(menuId,classCur){
if(!document.getElementById) return false;
if(!document.getElementById(menuId)) return false;
if(!document.getElementsByTagName) return false;
var menuId=document.getElementById(menuId);
var links=menuId.getElementsByTagName(“a”);
for(var i=0; i var menuLink=links[i].href;
var currentLink=window.location.href;
if(currentLink.indexOf(menuLink)!=-1){
links[i].className=classCur;
}
}
}
参数说明:

1.menuId : 链接组所在ID;
2.classCur : 高亮显示时的样式class名.
调用方法:

window.onload=function highThis(){highURL(“youId”,”youhighclass”);}
第二种点击后高亮显示当前类:

//@Mr.Think—点击实现高亮显示
function highOnclick(elemId,classCur) {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById(elemId)) return false;
var elemId = document.getElementById(elemId);
var links = elemId.getElementsByTagName(“a”);
for (i = 0; i < links.length; i++) {
links[i].onclick = function() {
for (n = 0; n < links.length; n++) {
links[n].className = “”;
this.className = classCur;
this.blur();
}
}
}
}
参数说明:

1.elemId : 链接组所在ID;
2.classCur : 点击后显示的样式class名.
调用方法:

window.onload=function highThis(){highOnclick(“youId”,”youhighclass”);}
此方法扩展性较强,比如可以通过判断parentNode.nodeName值来使某一类型链接不被遍历,等等.

可多次使用的仿126邮箱选项卡的源码

admin — Thu, 06 May 2010 03:51:03 +0000

选项卡我们这论坛里有不少,但同一个页面可以多次使用的可能没多少,我这个可以在同一个页面里可以有多个选项卡块.用了一个背景图.

背景图片已上传上去了,支持我的帮顶一下,俺昨天花费几个小时啊.
终于适应Ie,ff 浏览器.现在所有代码公开给大家.希望大家喜欢.要用的赶紧拿去用吧.
类似于下面效果.

再加一个div块时只要

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

看到上面的two没有,把上面的这段复制下,把two改成three,或任何一个不同名的id,就完成了.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>简洁Tab</title> <style type="text/css">  </style> <script>  </script> </head> <body> <br><br> <div id="Tab1"> <div class="Menubox"> <ul> <li id="one1" onclick="setTab('one',1,4)" class="hover">新闻1</li> <li id="one2" onclick="setTab('one',2,4)" >新闻2</li> <li id="one3" onclick="setTab('one',3,4)">新闻3</li> <li id="one4" onclick="setTab('one',4,4)">新闻4</li> </ul> </div> <div class="Contentbox"> <div id="con_one_1" class="hover">新闻列表1</div> <div id="con_one_2" style="display:none">新闻列表2</div> <div id="con_one_3" style="display:none">新闻列表3</div> <div id="con_one_4" style="display:none">新闻列表4</div> </div> </div> <br> <div id="Tab2"> <div class="Menubox"> <ul> <li id="two1" onclick="setTab('two',1,4)" class="hover">新闻1</li> <li id="two2" onclick="setTab('two',2,4)" >新闻2</li> <li id="two3" onclick="setTab('two',3,4)">新闻3</li> <li id="two4" onclick="setTab('two',4,4)">新闻4</li> </ul> </div> <div class="Contentbox"> <div id="con_two_1" >新闻列表1</div> <div id="con_two_2" style="display:none">新闻列表2</div> <div id="con_two_3" style="display:none">新闻列表3</div> <div id="con_two_4" style="display:none">新闻列表4</div> </div> </div> </body> </html>

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

忘记说了tab2也要改,改成tab3吧,同一个页面div,id总不能重复吧.

6个卓越Web设计细节

admin — Fri, 26 Mar 2010 07:42:00 +0000

优秀设计和卓越设计之间的区别是比较小的。一般人可能无法解释说明卓越的设计的具体差别，但他们可以找到自己喜欢的网页设计作品。通过对照一下几个优秀作品，我总结了一下作为卓越设计的几个细节差别。
前不久，我写过一篇卓越网站应该遵循的4个设计原则。现在这篇文章有点像是上一篇文章的延续。在上一篇文章里面我们重点讨论了对比、重复、对齐、分割在网页中的应用。以下内容我以几个优秀的网页作品作为实例，来说明卓越设计一直遵循的原则！

一、合理使用渐变
渐变不要滥用，更不要把渐变弄的跟彩虹似的，否则你的网页作品看起来比较外行。总而言之，合理的使用渐变对于优秀网站设计是有帮助的。

渐变、散景结合使用
Newism网站色彩丰富，但微妙的渐变与背景在视觉上结合的很到位。如果你也有兴趣在photoshop里面做这个散景效果，可以去Abduzeedo’s tutorial网站上面学习一下。

渐变、投影、纹理结合使用。
OnWired网站应用了这些设计技巧，显而易见，他的设计作品效果是很棒的！自始自终OnWired网站设计在应用渐变、投影、质感这方面是恰到好处的。我也特别喜欢设计师设计的这些。

二、留白
留白一词往往容易被误解从字面解释的空白。网页设计较为准确的描述则是网页各个板块元素之间的空间范围。进一步分析看看A List Apart是如何定义它的。
“留白”对于网页设计是很重要的，留白不至于让你页面元素都堆积在一起。对于年轻设计师来说留白可能是一个大问题，他们在做设计的时候将整个页面放的满满的，没有给页面足够的“呼吸空间”。这对于他们来说可能不是什么问题，如果内容放不下的话，他们可以借助浏览器的滚条来扩大页面的空间。

优秀的留白与巧妙的分割线
Snook网站布局方面设计的是比较合理、舒服的。同时注意一下，网站里面的虚线将各个板块区分开了，这样我们在浏览网站的时候就一目了然了。

抽象图形
沙发采用抽象、美观、简约的方法。通过使用无背景或杂乱的图像，给浏览者的空间是流畅、舒服的。

三、网格布局
网页设计的网格布局最初的灵感是借鉴了报纸的排版。但是如果你仔细观察周围的事物都可以找到网格现象，从好的设计到生活中的交通网。
960和蓝图可能是两个最流行的网格布局。我个人比较喜欢960网格布局，它简单、重点突出。你可以用任意对齐方式来安排你网站的元素，对齐在设计一个复杂的页面时，能使你的网站看起来比较精致、井然有序，并且你在网页布局里面添加任何模块内容时候都不用考虑其他的模块内容。

综合使用网格布局
Poccuo网站综合使用了网格布局，它采用3列和5列相结合的布局方式。给人以视觉吸引力和视觉空间。

博客采用列布局
我比较喜欢Web Design Ledger首页最上面的展现方式，他把最新的公告内容放大同时放到页面最顶部，其他的以3列的方式排列。

大量使用相等的列布局
Ecoki漂亮的网页布局显而易见采用的是4列、2行布局，同时幻灯片、缩略图、最新的审查也是采用相同的方式。

四、改善字体应用
字体应用困扰着大多数的设计师。如果要想提高你的设计水平，字体在其中扮演着重要的角色。不但在可读性方面也扮演着重要的角色，同时还可以增加设计作品的氛围。

用对比字体引起关注
SimpleBits网站在应用各种对比字体引导浏览者的注意力方面做的很棒。字体对比可以采取不同字体对比、各种颜色对比、字体大小对比等形式。

不要认为字体就像标志
这个网站看齐来就非常的漂亮、舒服，但你可以说出你的想法和感受来描述这个感觉。尤其在间距、字体选择等字体应用这方面做的挺完美的，我就被他的logo 字体应用迷住了。

五、明确而有效的导航
良好的导航对于网页设计来说很重要，如果浏览者不能快速、便捷的找到它，他们就很有可能去别的网站了。这是我们所不愿意看到的，同时我知道 MyInkBlog进行了一些改进，并将在以后重新设计中进行彻底的改进。

博客导航下面显示分类导航
在大多数情况下，博客导航放在页面的同时将分类作为第二导航放在页面的边栏。Tutorial9做了一件了不起的事情，他把浏览者关心的photoshop资源以生动的方式展现出来了，并且在鼠标经过二级导航的时候有一个高亮效果。

切换不同的图标效果
图标切换效果在web2.0网页设计里面无论是否需要被大量、胡乱的应用，并且成为一种趋势。并不是所有的都是不好的，web2.0里用的不好的原因是过度使用、业余使用造成的。在大多数情况下，适当的应用图标切换按钮是相当有效的。Carsonified网站在导航上就运用了单色、简洁的图标切换效果，并且于他的网站整体感觉想吻合。

六、使用漂亮实用的页脚
一开始我们就将页脚作为次要的内容，在页脚里面放置一些没有多大用处的内容。在设计的时候仅仅花费一点点心思在它上面。现在页脚对于整体设计来说变的越来越重要了，千万别错过好的页脚完成你设计。

展示大量的信息和证书
这个页脚主要展示了网站介绍和版权等必要的信息。Brian Hoff网站更是添加了一些个性、有趣的内容在里面。通过3列布局方式展示了作者的工作和建议性的内容。

添加搜索功能
Elliot Jay Stock’s网站在底部添加了一个特大的搜索框…

JS制作的表单软键盘

admin — Wed, 17 Mar 2010 09:47:03 +0000

<div align="center"> <INPUT title=登录密码 onfocus="if (hidekeyboard) { hidekeyboard=false;userpswdvalue=this;showkeyboard();this.readOnly=1;document.getElementById ('Calc').password.value='';};" readOnly type=password maxLength=12 onchange="Calc.password.value=this.value;keyjiami=0;jiami = 0" name=userpswd minLength="6"> </div> <SCRIPT language=javascript> window.onload=function() { userpswdvalue=null; initCalc(); } var userpswdvalue; var CapsLockValue=0; var checkSoftKey; var pIsPWD=false; var hidekeyboard=true; var ps; function setVariables() { tablewidth=630; tableheight=20; if (navigator.appName == "Netscape") { horz=".left"; vert=".top"; docStyle="document."; styleDoc=""; innerW="window.innerWidth"; innerH="window.innerHeight"; offsetX="window.pageXOffset"; offsetY="window.pageYOffset"; } else { horz=".pixelLeft"; vert=".pixelTop"; docStyle=""; styleDoc=".style"; innerW="document.body.clientWidth"; innerH="document.body.clientHeight"; offsetX="document.body.scrollLeft"; offsetY="document.body.scrollTop"; myUrl="http://www.ue0379.com"; myTItle="洛阳网站建设"; } } function checkLocation() { if (checkSoftKey) { objectXY="softkeyboard"; var availableX=eval(innerW); var availableY=eval(innerH); var currentX=eval(offsetX); var currentY=eval(offsetY); x=availableX-tablewidth+currentX; y=currentY; evalMove(); } setTimeout("checkLocation()",0); } function evalMove() { eval(docStyle + objectXY + styleDoc + vert + "=" + y); } self.onError=null; currentX = currentY = 0; whichIt = null; lastScrollX = 0; lastScrollY = 0; NS = (document.layers) ? 1 : 0; IE = (document.all) ? 1: 0; function heartBeat() { if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; } if(diffY != lastScrollY) { percent = .1 * (diffY - lastScrollY); if(percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); if(IE) document.all.softkeyboard.style.pixelTop += percent; if(NS) document.softkeyboard.top += percent; lastScrollY = lastScrollY + percent;} if(diffX != lastScrollX) { percent = .1 * (diffX - lastScrollX); if(percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); if(IE) document.all.softkeyboard.style.pixelLeft += percent; if(NS) document.softkeyboard.left += percent; lastScrollX = lastScrollX + percent; } } function checkFocus(x,y) { stalkerx = document.softkeyboard.pageX; stalkery = document.softkeyboard.pageY; stalkerwidth = document.softkeyboard.clip.width; stalkerheight = document.softkeyboard.clip.height; if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true; else return false;} function grabIt(e) { checkSoftKey = false; if(IE) { whichIt = event.srcElement; while (whichIt.id!=null&&whichIt.id.indexOf("softkeyboard") == -1) { whichIt = whichIt.parentElement; if (whichIt == null) { return true; } } if(whichIt.style!=null){ whichIt.style.pixelLeft = whichIt.offsetLeft; whichIt.style.pixelTop = whichIt.offsetTop; } currentX = (event.clientX + document.body.scrollLeft); currentY = (event.clientY + document.body.scrollTop); } else { window.captureEvents(Event.MOUSEMOVE); if(checkFocus (e.pageX,e.pageY)) { whichIt = document.softkeyboard; StalkerTouchedX = e.pageX-document.softkeyboard.pageX; StalkerTouchedY = e.pageY-document.softkeyboard.pageY;} } return true; } function moveIt(e) { if (whichIt == null) { return false; } if(IE) { if(whichIt.style!=null){ newX = (event.clientX + document.body.scrollLeft); newY = (event.clientY + document.body.scrollTop); distanceX = (newX - currentX); distanceY = (newY - currentY); currentX = newX; currentY = newY; whichIt.style.pixelLeft += distanceX; whichIt.style.pixelTop += distanceY; if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop; if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft; if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20; if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5; event.returnValue = false; } } else { whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY); if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset; if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset; if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17; if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17; return false;} return false; } function dropIt() {whichIt = null; if(NS) window.releaseEvents (Event.MOUSEMOVE); return true; } if(NS) {window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN); window.onmousedown = grabIt; window.onmousemove = moveIt; window.onmouseup = dropIt; } if(IE) { document.onmousedown = grabIt; document.onmousemove = moveIt; document.onmouseup = dropIt; } var style1="<style>"; style1+=".btn_letter {BORDER-RIGHT: 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: 1px solid; PADDING-LEFT: 2px;FONT-SIZE: 14px; BORDER-LEFT: 1px solid; CURSOR: hand;PADDING-TOP: 1px; BORDER-BOTTOM: 1px solid; width:25px; height:20px;BORDER-LEFT-COLOR: #7b9ebd; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#DDDCDC); BORDER-BOTTOM-COLOR: #5c08b2; COLOR: #075bc3; BORDER-TOP-COLOR: #7b9ebd; BORDER-RIGHT-COLOR: #5c08b2}"; style1+=".btn_num {width:25px;BORDER-RIGHT:1px solid; PADDING-RIGHT: 1px; BORDER-TOP: 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; BORDER-LEFT: 1px solid; CURSOR: hand; PADDING-TOP: 1px; BORDER-BOTTOM: 1px solid;height:20px;BORDER-LEFT-COLOR: #7ebf4f; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-BOTTOM-COLOR: #7ebf4f; COLOR: black; BORDER-TOP-COLOR: #7ebf4f; BORDER-RIGHT-COLOR: #7ebf4f}"; style1+=".table_title {FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#B2DEF7, EndColorStr=#7AB7DA); height:26px;padding-top: 3px;}"; style1+=".btn_input {BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid}"; style1+="TD {FONT: 12px 宋体,Tahoma; COLOR: #505050}</style>"; document.write(style1); document.write("<DIV align=center id=\"softkeyboard\" name=\"softkeyboard\" style=\"position:absolute; left:0px; top:0px; width:400px; z-index:180;display:none\"><table id=\"CalcTable\" width=\"\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\" bgcolor=\"\"><FORM id=Calc name=Calc action=\"\" method=post autocomplete=\"off\"><tr><td class=\"table_title\" title=\"尊敬的客户：为了保证网上交易安全,建议使用密码输入器输入密码!\" align=\"right\" valign=\"middle\" bgcolor=\"\" style=\"cursor: default;height:30\"><INPUT type=hidden value=\"\" name=password><INPUT type=hidden value=ok name=action2> <font style=\"font-weight:bold; font-size:13px; color:#075BC3\">网上交易专用密码输入器</font> <INPUT id=useKey class=\"btn_input\" type=button value=\"使用键盘输入\" bgtype=\"1\" onclick=\"userpswdvalue.readOnly=0;userpswdvalue.focus();closekeyboard();userpswdvalue.value='';\"><span style=\"width:2px;\"></span></td></tr><tr align=\"center\"><td align=\"center\" bgcolor=\"#FFFFFF\"><table align=\"center\" width=\"%\" border=\"0\" cellspacing=\"1\" cellpadding=\"0\">\n<tr align=\"left\" valign=\"middle\"> \n<td> <input type=button value=\" ~ \"></td>\n<td> <input type=button value=\" ! \"></td>\n<td> <input type=button value=\" @ \"></td>\n<td> <input type=button value=\" # \"></td>\n<td> <input type=button value=\" $ \"></td>\n<td><input type=button value=\" % \"></td>\n<td><input type=button value=\" ^ \"></td>\n<td> <input type=button value=\" & \"></td>\n<td><input type=button value=\" * \"></td>\n<td><input type=button value=\" ( \"></td>\n<td><input type=button value=\" ) \"></td>\n<td><input type=button value=\" _ \"></td>\n<td> <input type=button value=\" + \"></td>\n<td><input type=button value=\" | \"></td>\n<td colspan=\"1\" rowspan=\"2\"> <input name=\"button10\" type=button value=\" 退格\" onclick=\"setpassvalue();\" onDblClick=\"setpassvalue();\" style=\"width:100px;height:40px\"> \n</td>\n</tr>\n<tr align=\"left\" valign=\"middle\"> \n<td><input type=button value=\" ` \"></td>\n<td><input type=button bgtype=\"2\" name=\"button_number1\" value=\" 1 \"></td>\n<td> <input type=button bgtype=\"2\" name=\"button_number2\" value=\" 2 \"></td>\n<td> <input type=button bgtype=\"2\" name=\"button_number3\" value=\" 3 \"></td>\n<td> <input type=button bgtype=\"2\" name=\"button_number4\" value=\" 4 \"></td>\n<td> <input type=button bgtype=\"2\" name=\"button_number5\" value=\" 5 \"></td>\n<td> <input type=button bgtype=\"2\" name=\"button_number6\" value=\" 6 \"></td>\n<td> <input type=button bgtype=\"2\" name=\"button_number7\" value=\" 7 \"></td>\n<td> <input type=button bgtype=\"2\" name=\"button_number8\" value=\" 8 \"></td>\n<td> <input type=button bgtype=\"2\" name=\"button_number9\" value=\" 9 \"></td>\n<td> <input bgtype=\"2\" name=\"button_number0\" type=button value=\" 0 \"></td>\n<td> <input type=button value=\" - \"></td>\n<td> <input type=button value=\" = \"></td>\n<td> <input type=button value=\" \\ \"></td>\n<td> </td>\n</tr>\n<tr align=\"left\" valign=\"middle\"> \n<td> <input type=button value=\" q \"></td>\n<td> <input type=button value=\" w \"></td>\n<td> <input type=button value=\" e \"></td>\n<td> <input type=button value=\" r \"></td>\n<td> <input type=button value=\" t \"></td>\n<td> <input type=button value=\" y \"></td>\n<td> <input type=button value=\" u \"></td>\n<td> <input type=button value=\" i \"></td>\n<td> <input type=button value=\" o \"></td>\n<td> <input name=\"button8\" type=button value=\" p \"></td>\n<td> <Input name=\"button9\" type=button value=\" { \"></td>\n<td> <input type=button value=\" } \"></td>\n<td> <input type=button value=\" [ \"></td>\n<td> <input type=button value=\" ] \"></td>\n<td><input name=\"button9\" type=button onClick=\"capsLockText();setCapsLock();\" onDblClick=\"capsLockText();setCapsLock();\" value=\"切换大/小写\" style=\"width:100px;\"></td>\n</tr>\n<tr align=\"left\" valign=\"middle\"> \n<td> <input type=button value=\" a \"></td>\n<td> <input type=button value=\" s \"></td>\n<td> <input type=button value=\" d \"></td>\n<td> <input type=button value=\" f \"></td>\n<td> <input type=button value=\" g \"></td>\n<td> <input type=button value=\" h \"></td>\n<td> <input type=button value=\" j \"></td>\n<td> <input name=\"button3\" type=button value=\" k \"></td>\n<td> <input name=\"button4\" type=button value=\" l \"></td>\n<td> <input name=\"button5\" type=button value=\" : \"></td>\n<td> <input name=\"button7\" type=button value=\" " \"></td>\n<td> <input type=button value=\" ; \"></td>\n<td> <input type=button value=\" ' \"></td>\n<td rowspan=\"2\" colspan=\"2\"> <input name=\"button12\" type=button onclick=\"OverInput();\" value=\" 确定 \" style=\"width:126px;height:42px;\"></td>\n</tr>\n<tr align=\"left\" valign=\"middle\"> \n<td><input name=\"button2\" type=button value=\" z \"></td>\n<td> <input type=button value=\" x \"></td>\n<td> <input type=button value=\" c \"></td>\n<td> <input type=button value=\" v \"></td>\n<td> <input type=button value=\" b \"></td>\n<td> <input type=button value=\" n \"></td>\n<td> <input type=button value=\" m \"></td>\n<td> <input type=button value=\" < \"></td>\n<td> <input type=button value=\" > \"></td>\n<td> <input type=button value=\" ? \"></td>\n<td> <input type=button value=\" , \"></td>\n <td> <input type=button value=\" . \"></td>\n <td> <input type=button value=\" / \"></td>\n</tr>\n</table></td></FORM></tr></table></DIV>"); function addValue(newValue) { if (CapsLockValue==0) { var str=Calc.password.value; if(str.length<userpswdvalue.maxLength) { Calc.password.value += newValue; } if(str.length<=userpswdvalue.maxLength) { userpswdvalue.value=Calc.password.value; psuserpswdvalue(); } } else { var str=Calc.password.value; if(str.length<userpswdvalue.maxLength) { Calc.password.value += newValue; } if(str.length<=userpswdvalue.maxLength) { userpswdvalue.value=Calc.password.value; psuserpswdvalue(); } } } function setpassvalue() { var longnum=Calc.password.value.length; var num num=Calc.password.value.substr(0,longnum-1); Calc.password.value=num; var str=Calc.password.value; userpswdvalue.value=Calc.password.value; psuserpswdvalue(); } function OverInput() { var str=Calc.password.value; userpswdvalue.value=Calc.password.value; removeJiamiName(); psuserpswdvalue(); closekeyboard(); Calc.password.value=""; userpswdvalue.readOnly=1; } function closekeyboard(theForm) { softkeyboard.style.display="none"; if(null!=unhideSelect){ unhideSelect(); } } function showkeyboard() { randomNumberButton(); var th = userpswdvalue; var ttop = th.offsetTop; var thei = th.clientHeight; var tleft = th.offsetLeft; var ttyp = th.type; while (th = th.offsetParent){ttop+=th.offsetTop; tleft+=th.offsetLeft;} softkeyboard.style.top = ttop+thei+16; softkeyboard.style.left = tleft-100; softkeyboard.style.display="block"; userpswdvalue.readOnly=1; userpswdvalue.blur(); document.all.useKey.focus(); if(null!=hideSelect){ hideSelect(); } } function setCapsLock() { if (CapsLockValue==0) { CapsLockValue=1 } else { CapsLockValue=0 } } function setCalcborder() { CalcTable.style.border="1px solid #B5ADF1" } function setHead() { CalcTable.cells[0].style.backgroundColor="#B5ADF1" } function setCalcButtonBg() { for(var i=0;i<Calc.elements.length;i++) { if(Calc.elements[i].type=="button"&&Calc.elements[i].bgtype!="1") { if(Calc.elements[i].bgtype=="2"){ Calc.elements[i].className="btn_num"; }else{ Calc.elements[i].className="btn_letter"; } var str1=Calc.elements[i].value; str1=str1.trim(); if(str1.length==1) { } var thisButtonValue=Calc.elements[i].value; thisButtonValue=thisButtonValue.trim(); if(thisButtonValue.length==1) { Calc.elements[i].onclick= function () { var thisButtonValue=this.value; thisButtonValue=thisButtonValue.trim(); thisButtonValue=jiamiMimaKey(thisButtonValue); addValue(thisButtonValue); } Calc.elements[i].ondblclick= function () { var thisButtonValue=this.value; thisButtonValue=thisButtonValue.trim(); thisButtonValue=jiamiMimaKey(thisButtonValue); addValue(thisButtonValue); } } } } } function initCalc() { setCalcborder(); setHead(); setCalcButtonBg(); } String.prototype.trim = function() { return this.replace(/(^\s*)|(\s*$)/g, ""); } var capsLockFlag; capsLockFlag=true; function capsLockText() { if(capsLockFlag) { for(var i=0;i<Calc.elements.length;i++) { var char=Calc.elements[i].value; var char=char.trim() if(Calc.elements[i].type=="button"&&char>="a"&&char<="z"&&char.length==1) { Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt(0)-32)+" " } } } else { for(var i=0;i<Calc.elements.length;i++) { var char=Calc.elements[i].value; var char=char.trim() if(Calc.elements[i].type=="button"&&char>="A"&&char<="Z"&&char.length==1) { Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt(0)+32)+" " } } } capsLockFlag=!capsLockFlag; } function randomNumberButton(){ var a = new Array(10); a[0]=0;a[1]=1;a[2]=2;a[3]=3;a[4]=4;a[5]=5;a[6]=6;a[7]=7;a[8]=8;a[9]=9; var randomNum; var times=10; for(var i=0;i<10;i++){ randomNum = parseInt(Math.random()*10); var tmp=a[0]; a[0]=a[randomNum]; a[randomNum]=tmp; } Calc.button_number0.value=" "+a[0]+" "; Calc.button_number1.value=" "+a[1]+" "; Calc.button_number2.value=" "+a[2]+" "; Calc.button_number3.value=" "+a[3]+" "; Calc.button_number4.value=" "+a[4]+" "; Calc.button_number5.value=" "+a[5]+" "; Calc.button_number6.value=" "+a[6]+" "; Calc.button_number7.value=" "+a[7]+" "; Calc.button_number8.value=" "+a[8]+" "; Calc.button_number9.value=" "+a[9]+" "; } function hideSelect(){ var i=0; while(i<document.getElementsByTagName("select").length){ document.getElementsByTagName("select")[i].style.visibility = "hidden"; i=i+1; } } function unhideSelect(){ var i=0; while(i<document.getElementsByTagName("select").length){ document.getElementsByTagName("select")[i].style.visibility = "visible"; i=i+1; } } function jiamiMimaKey(newValue) { if (typeof(b) == "undefined" || typeof(ifUseYinshe) == "undefined" || ifUseYinshe == 0) {return newValue;} var everyone = ''; var afterPass = ''; for (var i=0;i<newValue.length;i++ ) { everyone = newValue.charAt(i); for (var j =0;j<((b.length)/2);j++) { if (everyone == b[2*j]) { afterPass = afterPass + b[2*j+1]; break; } } } newValue= afterPass; if (typeof(jiami) != "undefined"){ jiami = 1; } return afterPass; } function removeJiamiName() { var jiamiObjectname = userpswdvalue.name; var jiamiObjectnameBefore = jiamiObjectname + ','; var jiamiObjectnameAll = ','+jiamiObjectname + ','; if (typeof(keyjiamiName) != "undefined") { if (keyjiamiName.indexOf(jiamiObjectnameBefore) == 0) { keyjiamiName = keyjiamiName.substring(jiamiObjectnameBefore.length); } else if (keyjiamiName.indexOf(jiamiObjectnameAll) != -1) { keyjiamiName.replace(jiamiObjectnameBefore,','); } } } function psuserpswdvalue(){ var passwd=userpswdvalue.value; var PWD=document.getElementsByName("PWD"); if(PWD!=null && ps!=null && pIsPWD) { ps.update(getStartPassword(passwd)); } } userpswd.onclick=Function("userpswdvalue=this;showkeyboard();this.readOnly=1;Calc.password.value=''"); userpswd.onkeyup=Function("if(event.keyCode==9){userpswdvalue=this;showkeyboard();this.readOnly=1;Calc.password.value=''}"); userpswd.onKeyDown=Function("Calc.password.value=this.value;"); </SCRIPT>

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

google纪念logo,典型的物理运动实现

admin — Wed, 17 Mar 2010 09:45:02 +0000

<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Google</title> </head> <body> <a href="#" target="_blank"> -210){v+=2} else{h=(v>9)?v*0.1:0;v*=(v>9)?-0.3:0} //关键句 } if(v==0){clearInterval(i);h=0;v=1;} },25); },2000); " /> </a> <noscript><style>#fall{bottom:-210px!important}</style></noscript> </body> </html>

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

超漂亮提取自ZCMS弹出框效果v2.0（兼容主流浏览器）12月18日修正

admin — Wed, 17 Mar 2010 09:06:33 +0000

【强烈推荐】超漂亮提取自ZCMS弹出框效果v2.0（兼容主流浏览器）11月25日重写全部代码

重写提取自ZCMS的弹出框，功能更强大：

1. 代替window.open、alert、confirm；提供良好的用户体验；
2. 质感细腻，外观漂亮；
3. 兼容ie6/7/8、firefox2/3、Opera；弹出框在ie6下不会被select控件穿透；
4. 无外部css文件，引用Dialog.js即可使用；
5. 对iframe下的应用作了充分考虑，适合复杂的系统应用；
6. Dialog显示的内容：1、URL；2、隐藏的元素中的html内容；3、html内容；
7. 按ESC键可关闭弹出框；

效果图
部分示例如下（帖子长度所限，更多示例见下载包中的zDialogDemo.html）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ZCMS弹出框效果（兼容主流浏览器）</title> <style> body { background: #fff; color: #444; } a { color: #07c; text-decoration: none; } body, div, q, h5 { margin: 0; padding: 0; } body, td, textarea { word-break: break-all; word-wrap: break-word; line-height:1.6; } body, input, textarea, select, button { margin: 0; font-size: 14px; font-family: Tahoma, SimSun, sans-serif; } div, p, table, th, td { font-size:1em; font-family:inherit; line-height:inherit; } h5 { font-size:12px; } ol li,ul li{ margin-bottom:0.5em;} pre{ font-family: "Courier New", Courier, monospace; word-wrap:break-word; line-height:1.4; font-size:12px;} pre{background:#f6f6f6; border:#eee solid 1px; margin:1em 0.5em; padding:0.5em 1em;} #content { padding-left:50px; padding-right:50px; } #content h3 { margin:8px 0; font-size:14px; COLOR:#693; } #content div.item { margin-top:10px; margin-bottom:10px; border:#eee solid 4px; padding:10px; } hr { clear:both; margin:7px 0; +margin: 0; border:0 none; font-size: 1px; line-height:1px; color: #069; background-color:#069; height: 1px; } </style> <script type="text/javascript" src="http://www.5-studio.com/wp-content/uploads/2009/11/zDrag.js"></script> <script type="text/javascript" src="http://www.5-studio.com/wp-content/uploads/2009/11/zDialog.js"></script> <script type="text/javascript"> function open1() { Dialog.open({URL:"javascript:void(document.write('这是弹出窗口中的内容'))"}); } function open2() { var diag = new Dialog(); diag.Width = 600; diag.Height = 300; diag.Title = "设定了高宽和标题的普通窗口"; diag.URL = "javascript:void(document.write('这是弹出窗口中的内容'))"; diag.show(); } function open3() { var diag = new Dialog(); diag.Width = 900; diag.Height = 400; diag.Title = "内容页为外部连接的窗口"; diag.URL = "http://demo.zving.com/"; diag.show(); } function open4() { var diag = new Dialog(); diag.Width = 300; diag.Height = 100; diag.Title = "内容页为html代码的窗口"; diag.InnerHtml='<div style="text-align:center;color:red;font-size:14px;">直接输出html，使用 <b>InnerHtml</b> 属性。</div>' diag.OKEvent = function(){diag.close();};//点击确定后调用的方法 diag.show(); } function open5() { var diag = new Dialog(); diag.Width = 300; diag.Height = 150; diag.Title = "内容页为隐藏的元素的html"; diag.InvokeElementId="forlogin" diag.OKEvent = function(){topWin.$id("username").value||alert("用户名不能为空");topWin.$id("userpwd").value||alert("密码不能为空")};//点击确定后调用的方法 diag.show(); } function open8() { var diag = new Dialog(); diag.Title = "返回值到调用页面"; diag.URL = "javascript:void(document.write('这是弹出窗口中的内容'))"; diag.OKEvent = function(){$id('getval').value = diag.innerFrame.contentWindow.document.getElementById('a').value;diag.close();}; diag.show(); var doc=diag.innerFrame.contentWindow.document; doc.open(); doc.write('<html><body><input id="a" type="text"/>请在文本框里输入一些值</body></html>') ; doc.close(); } function open9() { Dialog.alert("提示：你点击了一个按钮"); } function open10() { Dialog.confirm('警告：您确认要XXOO吗？',function(){Dialog.alert("yeah，周末到了，正是好时候")}); } function open14() { var diag = new Dialog(); diag.OnLoad=function(){alert("页面载入完成")}; diag.URL = "http://demo.zving.com/"; diag.show(); } function open16() { var diag = new Dialog(); diag.Title = "修改中窗体尺寸"; diag.URL = "javascript:void(document.write('这是弹出窗口中的内容'))"; diag.OKEvent = function(){ var doc=diag.innerFrame.contentWindow.document; doc.open(); doc.write('<html><body>窗口尺寸改为600*300</body></html>') ; doc.close(); diag.setSize(600,300); diag.okButton.disabled=true; }; diag.show(); diag.okButton.value="改变窗口大小" } function open17() { var diag = new Dialog(); diag.AutoClose=5; diag.ShowCloseButton=false; diag.URL = "javascript:void(document.write('这是弹出窗口中的内容'))"; diag.show(); } function open19() { var diag = new Dialog(); diag.Title = "窗体内的按钮操作父Dialog"; diag.URL = "javascript:void(document.write('这是弹出窗口中的内容'))"; diag.show(); var doc=diag.innerFrame.contentWindow.document; doc.open(); doc.write('<html><body><input type="button" id="a" value="修改父Dialog尺寸" onclick="parentDialog.setSize(function(min,max){return Math.round(min+(Math.random()*(max-min)))}(300,800))" /></body></html>') ; doc.close(); } </script> </head> <body> <div id="content"> <h2>zDialog v2.0 - samples</h2> <hr size="2" /> <div id="imgsloader" style="display:none;"></div> <script> var images=["icon_alert.gif","icon_dialog.gif","icon_query.gif","window.gif","dialog_cb.gif","dialog_closebtn.gif","dialog_closebtn_over.gif"]; var dlgimgs=isIE6?["dialog_ct.gif","dialog_lb.gif","dialog_lt.gif","dialog_mlm.gif","dialog_mrm.gif","dialog_rb.gif","dialog_rt.gif"]:["dialog_cb.png", "dialog_ct.png","dialog_lb.png","dialog_lt.png","dialog_mlm.png","dialog_mrm.png","dialog_rb.png","dialog_rt.png"] var images=images.concat(dlgimgs); var imgsHtml=[]; for(var i=0;i<images.length;i++){ imgsHtml.push('') } $id("imgsloader").innerHTML=imgsHtml.join(""); </script> <br /> <h3>1. 普通窗口 </h3> <div class="item"> <input type="button" id="a" value="普通窗口" onclick="open1()"/> <br/> <pre> <font color="#800000">Dialog.open({</font><font color="#008080">URL</font><font color="#800000">:</font><font color="#ff00ff">"javascript:void(document.write('这是弹出窗口中的内容'))"</font><font color="#800000">});</font> </pre> </div> <h3>2. 设定了高宽和标题的普通窗口 </h3> <div class="item"> <input type="button" id="b" value="设定了高宽和标题的普通窗口" onclick="open2()"/> <br/> <pre> <font color="#0000ff">var </font><font color="#800000">diag = </font><font color="#0000ff">new </font><font color="#800000">Dialog();</font> <font color="#800000">diag.Width = 600;</font> <font color="#800000">diag.Height = 300;</font> <font color="#800000">diag.Title = </font><font color="#ff00ff">"设定了高宽和标题的普通窗口"</font><font color="#800000">;</font> <font color="#800000">diag.</font><font color="#008080">URL </font><font color="#800000">= </font><font color="#ff00ff">"javascript:void(document.write('这是弹出窗口中的内容'))"</font><font color="#800000">;</font> <font color="#800000">diag.show();</font> </pre> </div> <h3>3. 内容页为外部连接的窗口</h3> <div class="item"> <input type="button" id="c" value="内容页为外部连接的窗口" onclick="open3()"/> <br/> <pre> <font color="#0000ff">var </font><font color="#800000">diag = </font><font color="#0000ff">new </font><font color="#800000">Dialog();</font> <font color="#800000">diag.Title = </font><font color="#ff00ff">"内容页为外部连接的窗口"</font><font color="#800000">;</font> <font color="#800000">diag.</font><font color="#008080">URL </font><font color="#800000">= </font><font color="#ff00ff">"http://demo.zving.com/"</font><font color="#800000">;</font> <font color="#800000">diag.show();</font> </pre> </div> <h3>4. 内容页为html代码的窗口</h3> <div class="item"> <input type="button" id="d" value="内容页为html代码的窗口" onclick="open4()"/> <br/> <pre> <font color="#0000ff">var </font><font color="#800000">diag = </font><font color="#0000ff">new </font><font color="#800000">Dialog();</font> <font color="#800000">diag.Title = </font><font color="#ff00ff">"内容页为html代码的窗口"</font><font color="#800000">;</font> <font color="#800000">diag.InnerHtml=</font><font color="#ff00ff">'<div style="text-align:center;color:red;font-size:14px;">直接输出html，使用 <b>InnerHtml</b> 属性。</div>'</font> <font color="#800000">diag.show();</font> </pre> </div> <h3>5. 内容页为隐藏的元素的html内容</h3> <div class="item"> <input type="button" id="e" value="内容页为隐藏的元素的html内容" onclick="open5()"/> <br/> <pre> <font color="#0000ff">var </font><font color="#800000">diag = </font><font color="#0000ff">new </font><font color="#800000">Dialog();</font> <font color="#800000">diag.Title = </font><font color="#ff00ff">"内容页为隐藏的元素的html"</font><font color="#800000">;</font> <font color="#800000">diag.InvokeElementId=</font><font color="#ff00ff">"forlogin"</font> <font color="#800000">diag.show();</font> </pre> <div id="forlogin"> <table width="100%" border="0" align="center" cellpadding="4" cellspacing="4" bordercolor="#666666"> <tr> <td colspan="2" bgcolor="#eeeeee">用户登陆</td> </tr> <tr> <td width="50" align="right">用户名</td> <td><input type="text" id="username" /></td> </tr> <tr> <td align="right">密　码</td> <td><input type="text" id="userpwd" /></td> </tr> </table> </div> </div> <h3>8. 返回值到调用页面</h3> <div class="item"> <input type="button" id="h" value="返回值到调用页面" onclick="open8()"/> <input type="text" id="getval" value="窗口的值返回到这里"/> <br/> <pre> <font color="#0000ff">var </font><font color="#800000">diag = </font><font color="#0000ff">new </font><font color="#800000">Dialog();</font> <font color="#800000">diag.Title = </font><font color="#ff00ff">"返回值到调用页面"</font><font color="#800000">;</font> <font color="#800000">diag.</font><font color="#008080">URL </font><font color="#800000">= </font><font color="#ff00ff">"javascript:void(document.write('这是弹出窗口中的内容'))"</font><font color="#800000">;</font> <font color="#800000">diag.OKEvent = </font><font color="#0000ff">function</font><font color="#800000">(){</font><font color="#0000ff">$id</font><font color="#800000">(</font><font color="#ff00ff">'getval'</font><font color="#800000">).</font><font color="#008080">value </font><font color="#800000">= diag.innerFrame.</font><font color="#008080">contentWindow</font><font color="#800000">.</font><font color="#ff0000">document</font><font color="#800000">.getElementById(</font><font color="#ff00ff">'a'</font><font color="#800000">).</font><font color="#008080">value</font><font color="#800000">;diag.close();};</font> <font color="#800000">diag.show();</font> <font color="#0000ff">var </font><font color="#800000">doc=diag.innerFrame.</font><font color="#008080">contentWindow</font><font color="#800000">.</font><font color="#ff0000">document</font><font color="#800000">;</font> <font color="#800000">doc.open();</font> <font color="#800000">doc.write(</font><font color="#ff00ff">'<html><body><input id="a" type="text"/>请在文本框里输入一些值</body></html>'</font><font color="#800000">) ;</font> <font color="#800000">doc.close();</font> </pre> </div> <h3>9. 代替window.alert及window.confirm</h3> <div class="item"> <input type="button" id="i" value="alert" onclick="open9()"/> <input type="button" id="j" value="confirm" onclick="open10();"/> <br/> <pre> <font color="#800000">Dialog.alert(</font><font color="#ff00ff">"提示：你点击了一个按钮"</font><font color="#800000">);</font> <font color="#800000">Dialog.confirm(</font><font color="#ff00ff">'警告：您确认要XXOO吗？'</font><font color="#800000">,</font><font color="#0000ff">function</font><font color="#800000">(){Dialog.alert(</font><font color="#ff00ff">"yeah，周末到了，正是好时候"</font><font color="#800000">)});</font> </pre> </div> <h3>13. 在弹窗的内容载入完成后，执行方法</h3> <div class="item"> <input type="button" id="n" value="在弹窗载入完成后，执行方法" onclick="open14()"/> <br/> <pre> <font color="#0000ff">var </font><font color="#800000">diag = </font><font color="#0000ff">new </font><font color="#800000">Dialog();</font> <font color="#800000">diag.OnLoad=</font><font color="#0000ff">function</font><font color="#800000">(){alert(</font><font color="#ff00ff">"页面载入完成"</font><font color="#800000">)};</font> <font color="#800000">diag.</font><font color="#008080">URL </font><font color="#800000">= </font><font color="#ff00ff">"[url]http://demo.zving.com/"[/url];</font><font color="#800000">;</font> <font color="#800000">diag.show();</font> </pre> <span>注：如果窗体内为iframe内容页，要在载入完成后对内容页作操作，必须考虑访问权限，如引用页和当前页应在同一个域内。</span> </div> <div id="hiddencontent" style="display:none;width:400px;height:100px;" class="infobar"> <div style="text-align:right;padding-right:5px;border:0;height:10px;font-size:9px;color:#666;"><a href="javascript:lhgdialog.hidden('hiddencontent','');">X</a></div> <div style="padding:10px;">我是隐藏内容</div> </div> <h3>16. 动态改变窗口大小</h3> <div class="item"> <input type="button" id="q" value="动态改变窗口大小" onclick="open16()"/> <br/> <pre> <font color="#0000ff">var </font><font color="#800000">diag = </font><font color="#0000ff">new </font><font color="#800000">Dialog();</font> <font color="#800000">diag.Title = </font><font color="#ff00ff">"修改中窗体尺寸"</font><font color="#800000">;</font> <font color="#800000">diag.</font><font color="#008080">URL </font><font color="#800000">= </font><font color="#ff00ff">"javascript:void(document.write('这是弹出窗口中的内容'))"</font><font color="#800000">;</font> <font color="#800000">diag.OKEvent = </font><font color="#0000ff">function</font><font color="#800000">(){</font> <font color="#0000ff">var </font><font color="#800000">doc=diag.innerFrame.</font><font color="#008080">contentWindow</font><font color="#800000">.</font><font color="#ff0000">document</font><font color="#800000">;</font> <font color="#800000">doc.open();</font> <font color="#800000">doc.write(</font><font color="#ff00ff">'<html><body>窗口尺寸改为600*300</body></html>'</font><font color="#800000">) ;</font> <font color="#800000">doc.close();</font> <font color="#800000">diag.setSize(600,300);</font> <font color="#800000">};</font> <font color="#800000">diag.show();</font> <font color="#800000">diag.okButton.</font><font color="#008080">value</font><font color="#800000">=</font><font color="#ff00ff">"改变窗口大小"</font> </pre> </div> <h3>17. 弹出窗口自动关闭</h3> <div class="item"> <input type="button" id="r" value="自动关闭" onclick="open17()"/> <br/> <pre> <font color="#0000ff">var </font><font color="#800000">diag = </font><font color="#0000ff">new </font><font color="#800000">Dialog();</font> <font color="#800000">diag.AutoClose=5;</font> <font color="#800000">diag.ShowCloseButton=</font><font color="#0000ff">false</font><font color="#800000">;</font> <font color="#800000">diag.</font><font color="#008080">URL </font><font color="#800000">= </font><font color="#ff00ff">"javascript:void(document.write('这是弹出窗口中的内容'))"</font><font color="#800000">;</font> <font color="#800000">diag.show();</font> </pre> <span>注：AutoClose为自动关闭时间，单位秒</span> </div> <h3>19. 窗体内的按钮操作父Dialog</h3> <div class="item"> <input type="button" id="t" value="窗体内的按钮操作父Dialog" onclick="open19()"/> <br/> <pre> <font color="#0000ff">var </font><font color="#800000">diag = </font><font color="#0000ff">new </font><font color="#800000">Dialog();</font> <font color="#800000">diag.Title = </font><font color="#ff00ff">"窗体内的按钮操作父Dialog"</font><font color="#800000">;</font> <font color="#800000">diag.</font><font color="#008080">URL </font><font color="#800000">= </font><font color="#ff00ff">"javascript:void(document.write('这是弹出窗口中的内容'))"</font><font color="#800000">;</font> <font color="#800000">diag.show();</font> <font color="#0000ff">var </font><font color="#800000">doc=diag.innerFrame.</font><font color="#008080">contentWindow</font><font color="#800000">.</font><font color="#ff0000">document</font><font color="#800000">;</font> <font color="#800000">doc.open();</font> <font color="#800000">doc.write(</font><font color="#ff00ff">'<html><body><input type="button" id="a" value="修改父Dialog尺寸" \ onclick="parentDialog.setSize(function(min,max){return Math.round(min+(Math.random()*(max-min)))}(300,800))" \ /></body></html>'</font><font color="#800000">) ;</font> <font color="#800000">doc.close();</font> </pre> </div> <div style="border:1px dashed #ccc;padding:20px;">最后作一下广告，<a href="http://www.zving.com/products/zcms/">ZCMS</a>1.2版将于12月30日发布，更稳定更强大，敬请期待。</div> </div> </body> </html>

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

点击下载本源码

19个Web安全字体

admin — Tue, 16 Mar 2010 23:48:16 +0000

在Web编码中，CSS默认应用的Web字体是有限的，虽然在新版本的CSS3，我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体，但多数情况下，考虑各个因素的影响我们还是在尽量充分利用这些默认调用的字体实现CSS的编写，这里整理了19个Web安全字体，让你无需任何顾虑的情况下畅快使用。

1, Arial

微软公司的网页核心字体之一，最常用的sans serif字体，当字号很小时不容易阅读。但是，大写的“I”和小写的“l”是无法区别的，你可以考虑用Tahoma字体来替代。
（苹果系统没有这种字体，但有一种对应于Arial的字体叫Helvetica，它是MAC机上与Arial 字体最相似的WEB字体,是别一种非衬线字体.它是一种性能优良的打印字体,但在屏幕上表现不是很好，说道Helvetica字体，昨天发现了很多有意思的站点，主要是纪念Helvetica字体诞生50年而设的。）

CSS写法：font-family: Arial, Helvetica, sans-serif;

2, Arial Black

CSS写法：font-family: ‘Arial Black’, Gadget, sans-serif;

3, Arial Narrow

CSS写法：font-family: ‘Arial Narrow’, sans-serif;

4, Verdana

微软公司的网页核心字体之一，微软公司专门为屏幕显示而开发的。应用广泛。易于阅读。是显示器中最清晰的字体，即使字号很小，也很容易阅读。半肥猫比较喜欢采用10PX的Verdana来做英文正文字体，也推荐大家使用，但字号最好介于10~14像素之间，超出这个范围就不好看了。

CSS写法：font-family: Verdana, Geneva, sans-serif;

5, Georgia
微软公司的网页核心字体之一，可用性好。可读性比Times New Roman强。是网站设计中，浏览效果最好的serif字体，因为它是专为网上阅读设计的。）

CSS写法：font-family: Georgia, serif;

6, Times New Roman
微软公司的网页核心字体之一，可能是最常用的serif字体，是网站浏览器默认的字体，12pt以上的字体容易阅读，但小字号的字体易读性差。（苹果系统没有这个字体，有一个对应于Times New Roman的字体叫Times）

CSS写法：font-family: 'Times New Roman', Times, serif;

7, Trebuchet MS
微软公司的网页核心字体之一，与Arial相似，半肥猫觉得：Trebuchet MS比Arial看起来优雅、古典一点。可以用来做标题，但小字号阅读起来会很困难（低于13PIX阅读起来就很累了，不太推荐用来做正文字体）。在苹果系统上也可以用Helvetica做替代。

CSS写法：font-family: 'Trebuchet MS', Helvetica, sans-serif;

8 , Courier New
微软公司的网页核心字体之一，老式打印机字体，有一种独特的机械工整感觉。呈现计算机编码时，还会用到这种字体。12 pt的Courier New字体曾是美国国务院的公文标准字体，但于2004年1月停用，改使用14 pt的Times New Roman，因为其具“现代性”和“易读性”。

CSS写法：font-family: 'Courier New', Courier, monospace;

9, Impact
微软公司的网页核心字体之一，Impact是1965年发表的一个无衬线字体，其特粗的笔画、紧缩的间距。半肥猫觉得：字体较为粗犷，适合使用在标题上，而不常用在内文。

CSS写法：font-family: Impact, Charcoal, sans-serif;

10, Comic Sans MS
微软公司的网页核心字体之一，手写体。这是一种争议很大的字体，讲实话，半肥猫也不喜欢这个字体，一点美感都没有，不过在一大堆规规矩矩的字体里面，有这么一个随意性比较的字体，可以变换一下口味，也算不错吧，建议不要用在正规的金融、政府、商业机构站点。

CSS写法：font-family: 'Comic Sans MS', cursive;

11, Tahoma
Tahoma是一个十分常见的无衬线字体，Tahoma和Verdana师出同为名设计师马修·卡特的作品，由微软在1999年推出，被采用为Windows 2000、Windows XP、Windows Server 2003等系统的默认字型。半肥猫觉得：它的字体结构和Verdana很相似，其字符间距较小，用来作为标题，效果好过Arial（Tahoma的大写I 和小写l比Arial容易识别），但如果作为正文，他的字号不能小于13PIX，否则很多笔画粘连到一起，不利于阅读。

CSS写法：font-family: Tahoma, Geneva, sans-serif;

12, Courier
Courier是一个等宽字体的粗衬线字体，主要是依据打字机所打印出来的字型来设计。原来Courier New的字体是IBM公司在1950年代设计给打印机使用的字体，后来这个字型成为整个打字机制造业的标准。Courier New是Courier的变体，比Courier更具机械味道。

CSS写法：font-family: Courier, monospace;

13, Lucida Sans Unicode
是一种OpenType型的无衬线字体。1993年制作并随微软公司的Windows NT 3.1操作系统发布。有较大的x字高，具有很好的可读性，被广泛用于显示、出版等各种用途。
它支持Unicode2.0版本的基本字符，包括拉丁字母，希腊字母，西里尔字母，希伯来字母，以及国际音标字符。该字体是首个 Unicode代码的字体，该字体从Windows 98开始一直作为系统预装字体发行。
后来发布的 Lucida Grande字体作为苹果公司Mac OS X系统的默认字体发布。
CSS写法：font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;

14, Lucida Console
同Lucida Sans Unicode类似。

CSS写法：font-family: 'Lucida Console', Monaco, monospace;

15, Garamond
Garamond（加拉蒙德）是一类西文衬线字体的总称，自16世纪40年代开始至今，有很多家公司和很多设计师参与到Garamond字体设计，如： Adobe Garamond, Monotype Garamond, Sioncini Garamond，和 Stempel Garamond等等。半肥猫觉得：字体给人端庄典雅，有些古典的感觉，在博物馆和历史性悠久的项目中使用，应该可以获得不错的效果。

CSS写法：font-family: Garamond, serif;

16 , MS Sans Serif
微软系统自带字体。屏幕显示的像素字体。非衬线字体。

CSS写法：font-family: 'MS Sans Serif', Geneva, sans-serif;
17 , MS Serif
微软系统自带字体。屏幕显示的像素字体。衬线字体。
CSS写法：font-family: 'MS Serif', 'New York', sans-serif;

18, Palatino Linotype

CSS写法：font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;

19, Symbol

CSS写法：font-family: Symbol, sans-serif;

20, Bookman Old Style

CSS写法：font-family: 'Bookman Old Style', serif;

本文参考了WEB安全字体，希望在Web编写过程中这些核心的Web字体能对你有用。

10个常用Ajax实例教程

admin — Tue, 16 Mar 2010 23:46:39 +0000

10 Of The Very Best Ajax Tutorials

Ajax不是一个新语言，它实际上是几种技术（例如 DHTML, Javascript, XML 和 JSON）的结合而成一个功能强大的新技术。Ajax破了页面重载的惯例，使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。以下介绍10个最常用Ajax技术的实例教程。

jQuery实现的简单Ajax

自动关键字匹配教程

Ajax 日历

jQuery实现Ajax多文件上传表单

Raphael JS 库介绍

AJAX创建一个动态内容滚动块

用PHP 和 AJAX 创建消息表单

创建实用的jQuery实现的Ajax标签切换

使用MooTools 表单检测

用 PHP 和 AJAX 创建To-Do 列表

http://www.webm.ag/2009/12/24/10-of-the-very-best-ajax-tutorials/