1) jQuery Popeye jQuery.popeye 这个插件能够将一组无序的图片列表转换成一个简单的相册。当点击图片时将以Lightbox风格放大图片。图片展示框提供向前/向后控制并能够为每一张图 片添加备注说明信息。jQuery.popeye能够根据图片大小自动调整展示框的高度和宽度。 2) jQuery MB Gallery 这是一个全功能的相簿应用，带导航条、缩略图和自动大小调整的相框。 3) Topup TopUp 是一个跨浏览器支持的 JavaScript 库，用于创建弹出式对话框以显示图片和网页，类似 ThickBox和 LightBox。TopUp 使用的是 jQuery 和 jQuery UI 库来保证兼容各种浏览器。当然 TopUp 还是可以跟Prototype 一起工作。 4) Pirobox 采用jQuery开发的Lightbox控件。能够根据浏览器窗体大小自动调整展示图片大小。提供向前/向后控制链接。动态加载图片效果。易于定制。 5) Fancy Zoom FancyZoom采用缩放效果来展示图片或任意HTML页面，不需要另外开启页面来载入图片，其效果在Apple Mac的官方网站中也有。 6) Canvas Slide Show 7) SideWays jQuery 8) Galleriffic Galleriffic是一个用于创建快速展示相册中照片的jQuery插件。图片既可以以幻灯片的方式查看，也可以手动点击缩略图查看。Galleriffic还支持分页，从而使得它能够展示更多的图片。 9) ColorBox ColorBox是一个基于jQuery 1.3 的轻量级，自定义灯箱插件，功能非常强大，支持图片，图片组，ajax，inline和iframed内容，灯箱样式完全由用户控制，可自定义CSS样 式，不需要改写ColorBox库文件就能重写展示效果设置，支持加载预处理提示等等，效果图如下： 在线演示：http://runjs.cn/detail/hjor2zox 10) YUI 转自:http://www.oschina.net/news/41500/10-best-jquery-plugins-with-code-of-may-and-june-2013
View DetailsNormalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。 官网：http://necolas.github.io/normalize.css/
View DetailsPure 是来自雅虎的 CSS 框架，使用 Normalize.CSS 无需任何 JavaScript 代码。框架基于响应式设计，提供多种样式的组件，包括表格、表单、按钮、表、导航等。标识使用非常简单，整个框架非常轻量级，压缩后只有 5.7k。 官网：http://purecss.io/ 设计器：http://yui.github.io/skinbuilder/?mode=pure
View DetailsSass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。 官网：http://sass-lang.com/
View Details目标 WebSocket 规范的目标是在浏览器中实现和服务器端双向通信。双向通信可以拓展浏览器上的应用类型，例如实时的数据推送(股票行情)、游戏、聊天等. 背景 目前在浏览器中通过http仅能实现单向的通信,comet可以一定程度上模拟双向通信,但效率较低,并需要服务器有较好的支持; flash中的socket和xmlsocket可以实现真正的双向通信,通过 flex ajax bridge,可以在javascript中使用这两项功能. 可以预见,如果websocket一旦在浏览器中得到实现,将会替代上面两项技术,得到广泛的使用.面对这种状况，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并达到实时通讯。 原理 WebSocket protocol 是HTML5一种新的协议(protocol)。它是实现了浏览器与服务器全双工通信(full-duplex)。 现在，很多网站为了实现即时通讯(real-time)，所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(time interval)（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request d的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求(request)，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽。 而最比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信，但依然需要发出请求(reuqest)。 在 WebSocket API，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中，为我们实现即时服务带来了两大好处： 1. Header 互相沟通的Header是很小的-大概只有 2 Bytes 2. Server Push 服务器可以主动传送数据给客户端 握手协议 在实现websocket连线过程中，需要通过浏览器发出websocket连线请求，然后服务器发出回应，这个过程通常称为“握手” (handshaking)。 PS1:握手协议在后期的版本中，会标明版本编号，下面的例子属于早期的协定之一，对于新版的 chrome 和 Firefox 皆不适用。 PS2:后期的版本大多属于功能上的扩充，例如使用第7版的握手协议同样也适用于第8版的握手协议。 例子： 浏览器请求 GET /demo HTTP/1.1 Host: 你的网址.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Sec-WebSocket-Protocol: sample Upgrade: WebSocket Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Origin: http://你的网址.com ^n:ds[4U 服务器回应 HTTP/1.1 101 WebSocket Protocol Handshake Upgrade: WebSocket Connection: Upgrade Sec-WebSocket-Origin: http://你的网址.com […]
View Details关键字：Caps Lock，js，javascript 转自：http://www.cnblogs.com/xiaoao808/archive/2008/07/31/1257624.html 以下是代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!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=GB2312" /> <title>检测大写锁定键</title> <style type="text/css"> <!-- *{margin:0;padding:0;} body{padding:2em;background:#242424;color:#ccc;} h1{text-align:center;line-height:200%;} h3{text-indent:1em;line-height:160%;color:#666;font-weight:normal;font-size:1em;} h3 a{color:#bbb; text-decoration:none;margin:0 0.5em;} h3 a:hover{color:#fff;} p{margin:5em;} span{margin:0 0.5em;font-size:85.7%;} --> </style> </head> <body> <h1>检测大写锁定键&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1> <form action="#" method="post"> <p><label for="password">密码：</label><input type="password" id="password" name="password" /><span style="display:none;">大写锁定键被按下，请注意大小写</span></p> </form> <script type="text/javascript"> //<![CDATA[ function detectCapsLock(event){ var e = event||window.event; var o = e.target||e.srcElement; var oTip = o.nextSibling; var keyCode = e.keyCode||e.which; // 按键的keyCode var isShift = e.shiftKey ||(keyCode == 16 ) || false ; // shift键是否按住 if ( ((keyCode >= 65 && keyCode <= 90 ) && !isShift) // Caps Lock 打开，且没有按住shift键 || ((keyCode >= 97 && keyCode <= 122 ) && isShift)// Caps Lock 打开，且按住shift键 ){oTip.style.display = '';} else{oTip.style.display = 'none';} } document.getElementById('password').onkeypress = detectCapsLock; //]]> </script> </body> </html> |
JS键盘监听 来源：http://liu2liu2.spaces.live.com/blog/cns!54B12917375EF5A0!270.entry JavaScript键盘事件侦听 在使用JavaScript做WEB键盘事件侦听捕获时，主要采用onkeypress、onkeydown、onkeyup三个事件进行出来。该三个事件的执行顺序如下：onkeydown -> onkeypress ->onkeyup。在一般情况下，采用三种键盘事件均可对键盘输入进行有效的响应。当在实际使用中，会发现这几者有些不同的差别。 onkeypress事件不能对系统功能键(例如：后退、删除等，其中对中文输入法不能有效响应)进行正常的响应，onkeydown和onkeyup均可以对系统功能键进行有效的拦截，但事件截获的位置不同，可以根据具体的情况选择不同的键盘事件。 由于onkeypress不能对系统功能键进行捕获，导致window.event对象的keyCode属性和onkeydown，onkeyup键盘事件中获取的keyCode属性不同，主要表现在onkeypress事件的keyCode对字母的大小写敏感，而onkeydown、onkeyup事件不敏感；onkeypress事件的keyCode无法区分主键盘上的数字键和付键盘数字键的，而onkeydown、onkeyup的keyCode对主付键盘的数字键敏感。 注：在Maxthon浏览器中，onkeydown和onkeyup有连续响应两次键盘事件的BUG，onkeydown不能正常地对F1~F12的功能键进行正常的截获(onkeyup没有发现该问题)，具体原因不明。不知道以后是否会进行订正。 转自:http://hi.baidu.com/kinsun/item/8bad1fd98e8c2c3f48e1ddce
View Details官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载自：http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html 一导入js库<script src="../js/jquery.js" type="text/javascript"></script><script src="../js/jquery.validate.js" type="text/javascript"></script> 二、默认校验规则(1)required:true 必输字段(2)remote:"check.php" 使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电子邮件(4)url:true 必须输入正确格式的网址(5)date:true 必须输入正确格式的日期 日期校验ie6出错，慎用(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性(7)number:true 必须输入合法的数字(负数，小数)(8)digits:true 必须输入整数(9)creditcard: […]
View Details定义和用法 parseInt() 函数可解析一个字符串，并返回一个整数。 语法
|
1 |
parseInt(<em>string</em>, <em>radix</em>) |
参数 描述 string 必需。要被解析的字符串。 radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。 如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。 如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。 返回值 返回解析后的数字。 说明 当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。 举例，如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。 提示和注释 注释：只有字符串中的第一个数字会被返回。 注释：开头和结尾的空格是允许的。 提示：如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。 实例 在本例中，我们将使用 parseInt() 来解析不同的字符串：
|
1 2 3 4 5 6 |
parseInt("10"); //返回 10 parseInt("19",10); //返回 19 (10+9) parseInt("11",2); //返回 3 (2+1) parseInt("17",8); //返回 15 (8+7) parseInt("1f",16); //返回 31 (16+15) parseInt("010"); //未定：返回 10 或 8 |
IE：filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 谷歌：-webkit-filter: grayscale(100%);
View Details如果不是不可能，你也很难拒绝承认性能目前已是任何正规网站项目的最关键方面之一，无论它是一个小型的网站组合，一个移动优先的web应用，一直到一个大规模的商业项目。研究，论文和个人体验都告诉我们快速是最好的。 性能不仅仅是非常重要，它也相当的有趣，而且这也是我越来越投入的事，不仅在工作方面（我一直在烦我们的首席性能工程师），也在项目与CSS魔法网站方面（我一直在烦Andy Davies）。 在这篇长文章中，我将分享收获，关于快速，简单且非常有趣的性能知识的点点滴滴，以便使你的行为可以像一个初级的网页设计师和前端开发者；希望对任何想开始学习性能的人，这篇文章可以成为一个正规的介绍，并使它们的前端变得超快。这些技巧是你能非常容易实现的。它只需要一点小技巧，以及一些浏览器怎样工作的基础知识，你就能开始玩转系统了！ 这篇长帖子不会讲到模糊图像的加载和数据处理，取而代之的是有关理论与第一手的性能方面的技术资料，这些技术是我通过阅读，观察，搜集和整理获得的（我花费了许多时间沉浸于CSS魔法的瀑布图）。我也会链接到其它相似话题的文章，以便帮助强化一些关键要点。享受吧！ 注意 本文需要预先知晓一些基础的性能知识，如果有任何你不熟悉的就Google搜索一下好了！ 基础 顶部的Styles,底部的scripts 更少的请求 尽可能并行 HTTP 请求与 DNS查询 DNS 预取 资源预取 CSS与性能 压缩与简化 优化图像 精灵 视网膜图像 渐进的 JPGs 完全不用图片 进一步阅读 基础知识 关于性能，有一些知识在所有的设计师和前端开发者中广为传播。例如，尽可能少的请求，优化图片，把样式表(stylesheets)放在<head>, 把JS放在</body>之前, 最小化(minifying) JS 和 CSS 等等。这些基础知识已经被用来加快用户响应了，但还有更多更多需要学习。 虽然在我们每天的工作生活中，浏览器给我们制造麻烦，使我们头疼，但请记住，他们也是很聪明的; 它们为我们做了很多性能优化工作, 所以大量的性能调优知识不但要知道浏览器在哪里给我们做了优化，还要知道怎么更好的挖掘它们。大量性能调优诀窍只是理解，利用和操纵浏览器已经替我们做好的优化工作。 顶部的Styles, 底部的scripts 这真的是一条基本规则，每个人都能非常容易的在大多数时间遵守，但为什么它重要？简短的说： CSS 块渲染, 因此你需要立即处理它（即在文档的顶部，在你的<head>之中）。 JS 块下载, 因此你需要最后处理它们，以确保它们没有耽误页面中任何其它东西。 CSS块渲染是因为浏览器总是试图渐进式的渲染页面；它们想在元素到达的时候顺序的渲染它。如果style在距离很远的页面下部，浏览器在获得它之前没有办法渲染那个CSS。因为这个原因，如果浏览器在渲染文档过程中，改变了之前渲染的东西，它们可以避免style的重绘。浏览器在它获得所有需要的style信息之前不会渲染页面，如果你将style放在文档底部，你就是在使浏览器等待，阻塞了渲染。 所以，只要你将CSS放在页面的顶部，那么浏览器就可以立刻开始渲染。 JavaScript块下载是由于好几个原因（这又是浏览器聪明之处），但首先我们需要知道浏览器里的资源下载是如何实际发生的；简单的说，浏览器会从一个单一的域名并行的尽可能多的下载资源。它从越多的域名下载，就能在一瞬间并行的获得更多的资源。 JavaScript中断了这个过程，阻塞了从任何一个域名的并行的下载，因为： 被调用的脚本可能改变页面，即浏览器在继续别的事情以前，将不得不处理它。因此为了处理那个不测事件，浏览器停止了任何其它东西的下载，以便集中精力关注于它。 脚本正常工作经常需要依照一定的顺序加载，例如，要在加载一个插件之前加载jQuery。浏览器阻止了JavaScript的并行下载，因此它不会同时下载jQuery和你的插件；很显然如果你同时并行下载二者，你的插件会在jQuery之前到达。 所以，由于浏览器在获取JavaScript的时候停止了所有其他下载，将你的JavaScript脚本放在文档中尽可能晚加载的地方是一个好主意。我相信你们都看到过页面中的空白片段，在那里第三方的JS脚本被花时间加载，并且它还阻止了页面其他资源的获取和渲染；这就是JavaScript的阻塞在作用了。 但是显然，现代浏览器还是变得聪明了。我将给你一个Andy Davies寄给我的电子邮件的摘录，因为他解释的比我清楚： 现代浏览器将并行下载JS，只有在脚本被执行的时候阻塞渲染（显然脚本必须也被下载了）。 脚本下载常常被浏览器的预加载器所完成。 当浏览器页面渲染被阻塞，即等待CSS，或JS被执行，预分析器将扫描页面剩余部分，寻找它能下载的资源。 有些浏览器如 Chrome, 将分先后下载资源，例如，如果脚本与图片同时在等待下载，它将先下载脚本。 漂亮的内容！ 所以，要使页面被尽可能快的渲染，将styles放在顶部。为了阻止JS的阻塞影响到渲染，将scripts放在底部。 更少的请求 另一个明显而基本的性能优化方法是少下载。页面需要的每一个资源就是一次额外的HTTP请求；浏览器不得不停下来去获取每一个用于渲染页面所需的资源。每一次HTTP请求都可能引发DNS查询，重定向，404，等等。每一次HTTP请求，无论为了样式表，图片，web字体，JS文件还是其它你能想到的，都可能是一次非常昂贵的操作。尽量减少这些请求是你可以做的最快的优化方法中的一种. 再谈到浏览器和并行；大多数浏览器一次只从每个引用的域下载一些资源，而JS会阻塞这些下载。所以，你做的每一个HTTP请求都应该仔细考虑，而不是随便随便做的。 尽可能并行 为了让浏览器能并行的下载更多资源，你可以由不同的域名提供服务。如果说，浏览器只能一次从一个域名获取两个资源，那么由两个域名提供服务意味着它可以一次性获取四个资源；三个域名意味着六个并行下载。 许多网站有静态/资源 域名；你可以发现， Twitter, 用 si0.twimg.com 来做静态资源：
|
1 |
<link rel="stylesheet" href="https://si0.twimg.com/a/1358386289/t1/css/t1_core.bundle.css" type="text/css" media="screen"> |
Facebook 用fbstatic-a.akamaihd.net：
|
1 |
<link rel="stylesheet" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yi/r/76f893pcD3j.css"> |
通过这些静态的资源域名， Twitter与Facebook能提供更多的并行资源服务；来自twitter.com和si0.twimg.com的资源可以协作方式下载。这真的是使你的页面上获得更多并发下载的简单方法，如果再加上实际的CDN技术就会更好，CDN技术通过从一个更加合适的物理位置提供资源服务的方法来减少延迟。 这全部都很好，但后面我们将讨论在特定环境下，怎样从子域名提供服务却会实际上对性能有害。 因此，现在有了我们关于性能的基础知识： 将样式表放在文档的顶部 将JavaScript放在底部（可能的地方） 尽可能减少HTTP请求 从多个域名提供资源服务能增加浏览器并行下载的资源数量。 HTTP 请求与 […]
View Details