zhenzhai

The ultimate jQuery Plugin List jQuery插件 240多个

www@webcss.cn(zhenzhai) — Wed, 03 Feb 2010 12:40:02 +0800

概述

jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ，这是其它的 js 库所不及的，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML documents、events、实现动画效果，并且方便地为网站提供 AJAX 交互。 jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆js来调用命令了，只需定义 id 即可。今天在Kollermedia.at上发现了一篇JQuery插件列表的文章，特推荐如下。

文件上传(File upload)

Ajax File Upload.
jQUploader.
Multiple File Upload plugin.
jQuery File Style.
Styling an input type file.
Progress Bar Plugin.

表单验证(Form Validation)

jQuery Validation.
Auto Help.
Simple jQuery form validation.
jQuery XAV - form validations.
jQuery AlphaNumeric.
Masked Input.
TypeWatch Plugin.
Text limiter for form fields.
Ajax Username Check with jQuery.

表单－选取框(Form - Select Box stuff)

jQuery Combobox.
jQuery controlled dependent (or Cascadign) Select List.
Multiple Selects.
Select box manipulation.
Select Combo Plugin.
jQuery - LinkedSelect
Auto-populate multiple select boxes.
Choose Plugin (Select Replacement).

表单基本、输入框、选择框等(Form Basics, Input Fields, Checkboxes etc.)

jQuery Form Plugin.
jQuery-Form.
jLook Nice Forms.
jNice.
Ping Plugin.
Toggle Form Text.
ToggleVal.
jQuery Field Plugin.
jQuery Form’n Field plugin.
jQuery Checkbox manipulation.
jTagging.
jQuery labelcheck.
Overlabel.
3 state radio buttons.
ShiftCheckbox jQuery Plugin.
Watermark Input.
jQuery Checkbox (checkboxes with imags).
jQuery SpinButton Control.
jQuery Ajax Form Builder.
jQuery Focus Fields.
jQuery Time Entry.

时间、日期和颜色选取(Time, Date and Color Picker)

jQuery UI Datepicker.
jQuery date picker plugin.
jQuery Time Picker.
Time Picker.
ClickPick.
TimePicker.
Farbtastic jQuery Color Picker Plugin.
Color Picker by intelliance.fr.

投票插件(Rating Plugins)

jQuery Star Rating Plugin.
jQuery Star Rater.
Content rater with asp.net, ajax and jQuery.
Half-Star Rating Plugin.

搜索插件(Search Plugins)

jQuery Suggest.
jQuery Autocomplete.
jQuery Autocomplete Mod.
jQuery Autocomplete by AjaxDaddy.
jQuery Autocomplete Plugin with HTML formatting.
jQuery Autocompleter.
AutoCompleter (Tutorial with PHP&MySQL).
quick Search jQuery Plugin.

编辑器(Inline Edit & Editors)

jTagEditor.
WYMeditor.
jQuery jFrame.
Jeditable - edit in place plugin for jQuery.
jQuery editable.
jQuery Disable Text Select Plugin.
Edit in Place with Ajax using jQuery.
jQuery Plugin - Another In-Place Editor.
TableEditor.
tEditable - in place table editing for jQuery.

多媒体、视频、Flash等(Audio, Video, Flash, SVG, etc)

jMedia - accessible multi-media embedding.
JBEdit - Ajax online Video Editor.
jQuery MP3 Plugin.
jQuery Media Plugin.
jQuery Flash Plugin.
Embed QuickTime.
SVG Integration.

图片(Photos/Images/Galleries)

ThickBox.
jQuery lightBox plugin.
jQuery Image Strip.
jQuery slideViewer.
jQuery jqGalScroll 2.0.
jQuery - jqGalViewII.
jQuery - jqGalViewIII.
jQuery Photo Slider.
jQuery Thumbs - easily create thumbnails.
jQuery jQIR Image Replacement.
jCarousel Lite.
jQPanView.
jCarousel.
Interface Imagebox.
Image Gallery using jQuery, Interface & Reflactions.
simple jQuery Gallery.
jQuery Gallery Module.
EO Gallery.
jQuery ScrollShow.
jQuery Cycle Plugin.
jQuery Flickr.
jQuery Lazy Load Images Plugin.
Zoomi - Zoomable Thumbnails.
jQuery Crop - crop any image on the fly.
Image Reflection.

Google地图（Google Map）

jQuery Plugin googlemaps.
jMaps jQuery Maps Framework.
jQmaps.
jQuery & Google Maps.
jQuery Maps Interface forr Google and Yahoo maps.
jQuery J Maps - by Tane Piper.

游戏(Games)

Tetris with jQuery.
jQuery Chess.
Mad Libs Word Game.
jQuery Puzzle.
jQuery Solar System (not a game but awesome jQuery Stuff).

表格等(Tables, Grids etc.)

UI/Tablesorter.
jQuery ingrid.
jQuery Grid Plugin.
Table Filter - awesome!.
TableEditor.
jQuery Tree Tables.
Expandable “Detail” Table Rows.
Sortable Table ColdFusion Costum Tag with jQuery UI.
jQuery Bubble.
TableSorter.
Scrollable HTML Table.
jQuery column Manager Plugin.
jQuery tableHover Plugin.
jQuery columnHover Plugin.
jQuery Grid.
TableSorter plugin for jQuery.
tEditable - in place table editing for jQuery.
jQuery charToTable Plugin.
jQuery Grid Column Sizing.
jQuery Grid Row Sizing.

统计图(Charts, Presentation etc.)

jQuery Wizard Plugin .
jQuery Chart Plugin.
Bar Chart.

边框、圆角、背景(Border, Corners, Background)

jQuery Corner.
jQuery Curvy Corner.
Nifty jQuery Corner.
Transparent Corners.
jQuery Corner Gallery.
Gradient Plugin.

鼠标提示（Tooltips）

jQuery Plugin - Tooltip.
jTip - The jQuery Tool Tip.
clueTip.
BetterTip.
Flash Tooltips using jQuery.
ToolTip.

菜单和导航(Menus, Navigations)

jQuery Tabs Plugin - awesome! . [demo nested tabs.]
another jQuery nested Tab Set example (based on jQuery Tabs Plugin).
jQuery idTabs.
jdMenu - Hierarchical Menu Plugin for jQuery.
jQuery SuckerFish Style.
jQuery Plugin Treeview.
treeView Basic.
FastFind Menu.
Sliding Menu.
Lava Lamp jQuery Menu.
jQuery iconDock.
jVariations Control Panel.
ContextMenu plugin.
clickMenu.
CSS Dock Menu.
jQuery Pop-up Menu Tutorial.
Sliding Menu.

http://stilbuero.de/jquery/tabs_3/

幻灯、翻转等(Accordions, Slide and Toggle stuff)

jQuery Plugin Accordion.
jQuery Accordion Plugin Horizontal Way.
haccordion - a simple horizontal accordion plugin for jQuery.
Horizontal Accordion by portalzine.de.
HoverAccordion.
Accordion Example from fmarcia.info.
jQuery Accordion Example.
jQuery Demo - Expandable Sidebar Menu.
Sliding Panels for jQuery.
jQuery ToggleElements.
Coda Slider.
jCarousel.
Accesible News Slider Plugin.
Showing and Hiding code Examples.
jQuery Easing Plugin.
jQuery Portlets.
AutoScroll.
Innerfade.

拖放插件(Drag and Drop)

UI/Draggables.
EasyDrag jQuery Plugin.
jQuery Portlets.
jqDnR - drag, drop resize.
Drag Demos.

XML XSL JSON Feeds

XSLT Plugin.
jQuery Ajax call and result XML parsing.
xmlObjectifier - Converts XML DOM to JSON.
jQuery XSL Transform.
jQuery Taconite - multiple Dom updates.
RSS/ATOM Feed Parser Plugin.
jQuery Google Feed Plugin.

浏览器(Browserstuff)

Wresize - IE Resize event Fix Plugin.
jQuery ifixpng.
jQuery pngFix.
Link Scrubber - removes the dotted line onfocus from links.
jQuery Perciformes - the entire suckerfish familly under one roof.
Background Iframe.
QinIE - for proper display of Q tags in IE.
jQuery Accessibility Plugin.
jQuery MouseWheel Plugin.

对话框、确认窗口(Alert, Prompt, Confirm Windows)

jQuery Impromptu.
jQuery Confirm Plugin.
jqModal.
SimpleModal.

CSS

jQuery Style Switcher.
JSS - Javascript StyleSheets.
jQuery Rule - creation/manipulation of CSS Rules.
jPrintArea.

DOM、AJAX和其它JQuery插件（DOM, Ajax and other jQuery plugins）

FlyDOM.
jQuery Dimenion Plugin.
jQuery Loggin.
Metadata - extract metadata from classes, attributes, elements.
Super-tiny Client-Side Include Javascript jQuery Plugin.
Undo Made Easy with Ajax.
JHeartbeat - periodically poll the server.
Lazy Load Plugin.
Live Query.
jQuery Timers.
jQuery Share it - display social bookmarking icons.
jQuery serverCookieJar.
jQuery autoSave.
jQuery Puffer.
jQuery iFrame Plugin.
Cookie Plugin for jQuery.
jQuery Spy - awesome plugin.
Effect Delay Trick.
jQuick - a quick tag creator for jQuery.
Metaobjects.
elementReady.

准确检验你安装运行的 XP 或 VISTA 究竟是原版，还是？？？

www@webcss.cn(zhenzhai) — Sun, 22 Feb 2009 08:43:24 +0800

网上下载的 WindowsXP pro和 VISTA 的各类版本。实验结果，分三种情况：一是顺利执行，并显示完整、稳定、清晰的数据；二是能够执行，但结果显示一闪即逝无从得见；三是不能执行，或者无动于衷或者跳出什么“错误”提示。结论：只有第一种结果，才是正宗的原版(至少没有对原版进行“大手术”)。

检验办法非常简单(只需一分钟)——

1。启动“命令提示符”（在:开始/所有程序/“附件”里）；
2。输入：systeminfo ，然后回车；
3。即可看到一大溜你未必完全掌握的信息(界面稳定、清晰)。

以上如能正确显示，请按照上述办法试试这个命令—— systeminfo > systeminfo.txt
——运行后，请到“Documents and Settings ”的用户文件夹中，你一定会找到一个系统给你的“小小的礼物” ！

产品展示左右平滑滚动效果

www@webcss.cn(zhenzhai) — Wed, 11 Feb 2009 16:12:34 +0800

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>产品展示左右平滑滚动效果</title>
<script language="javascript">

</script>
<style type="text/css">

</style>
</head>
<body>

<DIV class=blk_18><A onmouseup=ISL_StopUp_1() class=LeftBotton 
onmousedown=ISL_GoUp_1() onmouseout=ISL_StopUp_1() href="javascript:void(0);" 
target=_self></A>
<DIV class=pcont id=ISL_Cont_1>
<DIV class=ScrCont>
<DIV id=List1_1><A class=pl 
href="<a href="http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn" target="_blank">http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn</a>" 
target=_blank>http://www.liaozhenxin.com/skins/zhenzhai/logo.gif</a>" width=96>记录经典 珍藏回忆</A><A class=pl 
href="<a href="http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn" target="_blank">http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn</a>" 
target=_blank>http://www.liaozhenxin.com/skins/zhenzhai/logo.gif</a>" width=96>最没价值非专业</A><A class=pl 
href="<a href="http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn" target="_blank">http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn</a>" 
target=_blank>http://www.liaozhenxin.com/skins/zhenzhai/logo.gif</a>" width=96>展示欣赏秀网站</A><A class=pl 
href="<a href="http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn" target="_blank">http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn</a>" 
target=_blank>http://www.liaozhenxin.com/skins/zhenzhai/logo.gif</a>" width=96>展示欣赏国外优</A><A class=pl 
href="<a href="http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn" target="_blank">http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn</a>" 
target=_blank>http://www.liaozhenxin.com/skins/zhenzhai/logo.gif</a>" width=96>记录经典 珍藏回忆</A><A class=pl 
href="<a href="http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn" target="_blank">http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn</a>" 
target=_blank>http://www.liaozhenxin.com/skins/zhenzhai/logo.gif</a>" width=96>国外优秀网站</A><A class=pl 
href="<a href="http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn" target="_blank">http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn</a>" 
target=_blank>http://www.liaozhenxin.com/skins/zhenzhai/logo.gif</a>" width=96>展示优秀网站</A><A class=pl 
href="<a href="http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn" target="_blank">http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn</a>" 
target=_blank>http://www.liaozhenxin.com/skins/zhenzhai/logo.gif</a>" width=96>最没价值非专业</A><A class=pl 
href="<a href="http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn" target="_blank">http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn</a>" 
target=_blank>http://www.liaozhenxin.com/skins/zhenzhai/logo.gif</a>" width=96>展示优秀网站</A> </DIV>
<DIV id=List2_1></DIV></DIV></DIV><A onmouseup=ISL_StopDown_1() 
class=RightBotton onmousedown=ISL_GoDown_1() onmouseout=ISL_StopDown_1() 
href="javascript:void(0);" target=_self></A></DIV>
<SCRIPT type=text/javascript>

</SCRIPT>

</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

PS人物美化之磨皮

www@webcss.cn(zhenzhai) — Mon, 19 Jan 2009 15:40:07 +0800

素材

最终效果

1.打开下载的人物素材。

2.选择仿制图章工具，将脸上（图2）的斑点去除，修改后如图3

修改后：

3。在通道里（模式要RGB模式）复制一层绿色通道

绿副本——滤镜 ——高反差保留 7 左右

3。绿副本——图像 ——计算——混合选强光

4、计算三次

把ctrl 按住点第三次计算出来的通道（即Alpha3)

6、回到图层里按反选（shift +ctrl+i) 再调曲线

国外优秀摄影网站

www@webcss.cn(zhenzhai) — Fri, 16 Jan 2009 09:50:21 +0800

有很多摄影师苦于搜索不到国外优秀的摄影师的个人网站。这次给大家很多参考，在拍片的时候提高自己的技术和创意。最终把中国人像、时尚摄影摄影提升到一个新的高度。

wordpress在iis下静态化设置

www@webcss.cn(zhenzhai) — Mon, 12 Jan 2009 14:17:07 +0800

首先是到（http://www.binaryfortress.com/wordpress-url-rewrite/）下载WordPressURLRewrite
也可以点它下载，先安装vcredist_x86再把解压出来的WordPressURLRewrite.ini和 WordPressURLRewrite32.dll 放在wordpress的文件目录里，
然后在IIS6的网站下加载WordPressURLRewrite32.dll，
最后进入后台把永久链接改成 /%post_id%形式。

Dreamweaver替换正则表达式表

www@webcss.cn(zhenzhai) — Wed, 19 Nov 2008 09:32:34 +0800

字符	匹配	示例
^	输入或行的起始部分。	^T 匹配“This good earth”中的“T”，但不匹配“Uncle Tom's Cabin”中的“T”。
$	输入或行的结尾部分。	h$ 匹配“teach”中的“h”，但是不匹配“teacher”中的“h”
*	0 个或多个前置字符。	um* 匹配“rum”中的“um”、“yummy”中的“umm”以及“huge”中的“u”
+	1 个或多个前置字符。	um+ 匹配“rum”中的“um”和“yummy”中的“umm”，但在“huge”中没有任何匹配项
?	前置字符最多出现一次（即，指示前置字符是可选的）。	st?on 匹配“Johnson”中的“son”和“Johnston”中的“ston”，但在“Appleton”和“tension”中没有任何匹配项
.	除换行符外的任何单字符。	.an 匹配短语“bran muffins can be tasty”中的“ran”和“can”
x\|y	x 或 y。	FF0000\|0000FF 匹配 bgcolor=”#FF0000” 中的“FF0000”和 font color=”#0000FF” 中的“0000FF”
{n}	恰好 n 个前置字符。	o{2} 匹配“loom”中的“oo”和“mooooo”中的前两个“o”，但在“money”中没有任何匹配项
{n,m}	至少 n 个、至多 m 个前置字符。	F{2,4} 匹配“#FF0000”中的“FF”和“#FFFFFF”中的前四个“F”
[abc]	用括号括起来的字符中的任何一个字符。用连字符指定某一范围的字符（例如， [a-f] 等效于 [abcdef]）。	[e-g] 匹配“bed”中的“e”、“folly”中的“f”和“guard”中的“g”
[^abc]	未在括号中括起来的任何字符。用连字符指定某一范围的字符（例如，[^a-f] 等效于[^abcdef]）。	[^aeiou] 最初匹配“orange”中“r”、“book”中的“b”和“eek！”中的“k”
\b	词边界（例如空格或回车符）。	\bb 匹配“book”中的“b”，但在“goober”和“snob”中没有任何匹配项
\B	词边界之外的任何内容。	\Bb 匹配“goober”中的“b”，但在“book”中没有任何匹配项
\d	任何数字字符。等效于 [0-9]。	\d 匹配“C3PO”中的“3”和“apartment 2G”中的“2”
\D	任何非数字字符。等效于 [^0-9]。	\D 匹配“900S”中的“S”和“Q45”中的“Q”
\f	换页符。
\n	换行符。
\r	回车符。
\s	任何单个空白字符，包括空格、制表符、换页符或换行符。	\sbook 匹配“blue book”中的“book”，但在“notebook”中没有任何匹配项
\S	任何单个非空白字符。	\Sbook 匹配“notebook”中的“book”，但在“blue book”中没有任何匹配项
\t	制表符。
\w	任何字母数字字符，包括下划线。等效于 [A-Za-z0-9_]。	b\w* 匹配“the barking dog”中的“barking”以及“the big black dog”中的“big”和“black”
\W	任何非字母数字字符。等效于 [^A-Za-z0-9_]。	\W 匹配“Jake&Mattie”中的

Lytebox很好用的LightBox效果库

www@webcss.cn(zhenzhai) — Fri, 19 Sep 2008 18:10:45 +0800

在网页中，尤其是在用来显示图像的网页中，使用LightBox已经司空见惯了。一直都在使用经典的Lightbox2
http://www.blueidea.com/articleimg/2006/08/3904/lightbox.html

不过最近遇到一个网站的修改，其原有的图片点击放大后不再是显示独立的一张大图，而是有内容的网页，用户也认同了LightBox效果，不过Lightbox2不能满足所需，所以在网络上寻了个新的LightBox效果JS库：Lytebox。

Lytebox不仅能支持图像展示，还比Lightbox2多了“自动播放图像”的功能，当然最主要的是Lytebox支持弹出网页的效果。

Lytebox最新的版本为v3.22 http://dolem.com/lytebox/

1，下载 Lytebox v3.22的源码及相关图像素材

http://dolem.com/lytebox/lytebox_v3.22.zip

2，把如下代码拷贝到网页的<head>...</head>之间

程序代码

这可比Lightbox2引用简单多了（Lightbox2引用了三个JS和一个CSS）

第3步就是应用Lytebox了。

a,对于图像应用而言，Lytebox提供了三种方案，即：单张图像的显示，多张图像的翻页显示和多种图像以自动播放的幻灯式显示。
分别在超级连接中以 rel="lytebox" 、 rel="lytebox[vacation]" 和 rel="lyteshow[vacation]" 来表示。

HTML代码

<html>
<head>
<title>lytebox demo</title>
<script type="text/javascript" language="javascript" src="/lytebox/lytebox.js"></script>
<link rel="stylesheet" href="/lytebox/lytebox.css" type="text/css" media="screen" />
</head>
<body>
<div>
<h2>单独图像显示，图像打开后之间没有链接翻页浏览：rel="lytebox"</h2>
<a href="<a href="http://www.liaozhenxin.com/attachments/month_0801/d2008123211411.jpg" target="_blank">http://www.liaozhenxin.com/attachments/month_0801/d2008123211411.jpg</a>" rel="lytebox" title="2008-1.jpg">2008-1.jpg</a>
<a href="<a href="http://www.liaozhenxin.com/attachments/month_0801/t2008123211444.jpg" target="_blank">http://www.liaozhenxin.com/attachments/month_0801/t2008123211444.jpg</a>" rel="lytebox" title="2008-2.jpg">2008-2.jpg</a>
</div>

<div>
<h2>一系列图像打开后，鼠标移动至图像左侧或右侧进行图像的切换浏览：rel="lytebox[vacation]"</h2>
<a href="<a href="http://www.liaozhenxin.com/attachments/month_0801/22008123211459.jpg" target="_blank">http://www.liaozhenxin.com/attachments/month_0801/22008123211459.jpg</a>" rel="lytebox[vacation]" title="2008-3.jpg">2008-3.jpg</a>
<a href="<a href="http://www.liaozhenxin.com/attachments/month_0801/w2008123211514.jpg" target="_blank">http://www.liaozhenxin.com/attachments/month_0801/w2008123211514.jpg</a>" rel="lytebox[vacation]" title="2008-4.jpg">2008-4.jpg</a>
<a href="<a href="http://www.liaozhenxin.com/attachments/month_0801/52008123211351.jpg" target="_blank">http://www.liaozhenxin.com/attachments/month_0801/52008123211351.jpg</a>" rel="lytebox[vacation]" title="2008-5.gif">2008-5.gif</a>
</div>

<div>
<h2>一系列图像打开后，不仅能进行图像的切换浏览，lytebox还允许了自动播放的功能：rel="lyteshow[vacation]"</h2>
<a href="<a href="http://www.liaozhenxin.com/attachments/month_0801/i2008123211426.jpg" target="_blank">http://www.liaozhenxin.com/attachments/month_0801/i2008123211426.jpg</a>" rel="lyteshow[vacation]" title="2008-6.gif">2008-6.gif</a>
<a href="<a href="http://www.liaozhenxin.com/attachments/month_0801/52008123211351.jpg" target="_blank">http://www.liaozhenxin.com/attachments/month_0801/52008123211351.jpg</a>" rel="lyteshow[vacation]" title="2008-7.jpg">2008-7.jpg</a>
<a href="<a href="http://www.liaozhenxin.com/attachments/month_0801/d2008123211411.jpg" target="_blank">http://www.liaozhenxin.com/attachments/month_0801/d2008123211411.jpg</a>" rel="lyteshow[vacation]" title="2008-8.jpg">2008-8.jpg</a>
</div>

</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

b,对于网页应用而言，Lytebox提供了两种方案，即：单页面和可以翻页的多页面效果。

分别在超级链接中用 rel="lyteframe" 和 rel="lyteframe[catalog]" 来表示

其中还可以定义窗口大小和滚动条的显示状况 rev="width: 400px; height: 300px; scrolling: no;"

HTML代码

<html>
<head>
<title>lytebox demo</title>
<script type="text/javascript" language="javascript" src="/lytebox/lytebox.js"></script>
<link rel="stylesheet" href="/lytebox/lytebox.css" type="text/css" media="screen" />
</head>
<body>
<div>
<h2>单页面效果，打开后之间没有链接翻页浏览：rel="lyteframe"</h2>
<a href="<a href="http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn" target="_blank">http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn</a>" rel="lyteframe" title="<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css" rev="width: 800px; height: 300px; scrolling: no;"><a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css</a>
<a href="<a href="http://www.aoovoo.com" target="_blank">http://www.aoovoo.com</a>" rel="lyteframe" title="aoovoo" rev="width: 400px; height: 300px; scrolling: no;">aoovoo</a>
</div>

<div>
<h2>多页面效果，打开后之间可通过左下角的链接翻页浏览：rel="lyteframe[catalog]"</h2>
<a href="<a href="http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn" target="_blank">http://www.<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css.cn</a>" rel="lyteframe[catalog]" title="<a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css" rev="width: 1000px; height: 500px; scrolling: no;"><a href="http://www.liaozhenxin.com/blog/default.asp?cateID=4" target="_blank">web</a>css</a>
<a href="<a href="http://www.aoovoo.com" target="_blank">http://www.aoovoo.com</a>" rel="lyteframe[catalog]" title="aoovoo" rev="width: 800px; height: 400px; scrolling: no;">aoovoo</a>
<a href="<a href="http://www.szforever.com/" target="_blank">http://www.szforever.com/</a>" rel="lyteframe[catalog]" title="szforever" rev="width: 700px; height: 500px; scrolling: no;">szforever</a>
</div>

</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

4，如果把lytebox.css和lytebox.js及[images]所有文件存放的目录导致应用了lytebox效果的页面显示不了图像，即修改lytebox.css中的相关background: url

中国传统插图

www@webcss.cn(zhenzhai) — Tue, 29 Jul 2008 17:55:01 +0800

插图都是木版画，是雕刻在木版上再印出来的,往往画得既粗俗，刻得又简陋，只有极少数的例外。咸丰年间的任渭长，一般认为是我国传统版画最后的一位大师。流传下来的《卅三剑客图》，人物造型十分生动。

我国版画有很悠久的历史。最古的版画作品，是汉代的肖形印，在印章上刻了龙虎禽鸟等等图印，印在绢上纸上，成为精美巧丽的图形。版画成长于隋唐时的佛画，盛于宋元，到明末而登峰造极，最大的艺术家是陈洪绶（老莲）。清代版画普遍发展，年画盛行于民间。咸丰年间的任渭长，一般认为是我国传统版画最后的一位大师。以后的版画受到西方美术的影响，和我国传统的风格是颇为不同了。

任渭长画的版画集《卅三剑客图》，共有三十三个剑客的图形，人物的造型十分生动。偶有空闲，翻阅数页，很触发一些想象，常常引起一个念头：“最好能给每一幅图‘插’一篇短篇小说。”惯例总是画家替小说家绘插图，古今中外，似乎从未有一个写小说的人替一系列的绘画插写小说。
由于读书不多，这三十三个剑客的故事我知道得不全。但反正是写小说，不知道原来出典的，不妨任意创造一个故事。可是连写三十三个剑侠故事的心愿，永远也完成不了的。写了第一篇《越女剑》后，第二篇《虬髯客》的小说就写不下去了。写叙述文比写小说不费力得多，于是改用平铺直叙的方式，介绍原来的故事。

其中《虬髯客》、《聂隐娘》、《红线》、《昆仑奴》四个故事众所周知，不再详细叙述，同时原文的文笔极好，我没有能力译成同样简洁明丽的语体文，所以附录了原文。比较生僻的故事则将原文内容全部写了出来。

中国古籍版刻插图艺术

古人著书立说，重视图的作用。“左图右书”、“左图右史”、“文不足以图补之，图不足以文叙之”，图文并茂，相辅相成，是中国书的一个优良传统。
中国历代刻印的书籍汗牛充栋，浩如烟海，其中不少附有精美的插图，这不仅是一份宝贵的历史文化财富，也是研究古代政治、文化、民俗的生动材料。
一、中国古籍版刻插图的起源与出现
中国的古书，以其生产形式而言，大致可以划分为写本书和印本书两个时代。在汉代以前，人们将书抄写在竹简、木牍等天然载体或缣帛等丝织品上。1942年，湖南长沙战国楚墓中出土一件帛画，上绘彩色图像及类似金文的说明文字，四周绘十二神像，象征十二个月，是我国帛书插图中的较早遗存。
所谓版刻插图，就是指用雕版印刷的方式取得的画稿复本。雕版印刷术也称整版印刷术，即指将文字或图画反刻在一整块木板或其他材质的版上，然后在版上加墨刷印的方法。这种方法，可以大批取得插图画稿复本。由于古代书版以梨、枣木为主，故这些插图，都是版画，也称为木刻画。
雕版印刷术发明之后，最先应用于佛教经籍插图的刊刻。唐代著名的高僧玄奘法师，就曾雕印佛像普惠四方。唐末冯贽《云仙散录》卷上引《僧园逸录》说：“玄奘以回锋纸印普贤像，施于四方，每岁五驮无余。”可见其数量是不少的。
现存较古老的版刻插图艺术品，为1953年在成都市东门外望江楼附近唐墓中出土的《陀罗尼经咒》。此件发现于墓主臂上所戴银镯内，上刻古梵文经咒，四周和中央均印有小佛像。据考，当刊行于唐肃宗至德二年（公元757）之后。
唐代版画遗存中，另一件更为重要的作品，是唐咸通九年（公元868）刊印的《金刚般若波罗密多经》扉页画。此件为一个长约16尺的卷子，由六页纸粘缀而成，卷端绘《祗树给孤独园》图，全图纹饰华丽，布局稳妥，线条运用纤柔中见劲挺，是雕版技艺已臻成熟的佳作。卷末有“咸通九年四月十五日王玠为二亲敬造普施”刊记，是世界上现存最早的有确切刊印日期题记的版刻插图艺术品和佛教版画名作。中国以版刻形式为图书印制插图，比欧洲早了至少五百多年，此图就是我国早期版刻插图中最负盛名的杰作。
唐初诸帝，多采取儒、佛、道三教并重的政策，佛教发展很快。女皇帝武则天改唐为周，借用《大云经》为女主受命于天的符谶，声称她的“龙兴”本是佛的预言，更是大兴佛教。当时造像建寺，遍于国中；士民刊施经卷，蔚为风气。由此而言，当时佛教版画的锓梓，数量必多。只不过因为年湮代远，唐代印品少有留传于今日者。加之唐会昌五年（公元845），唐武宗下诏灭佛，经卷刻版，皆付劫灰，传留至今的佛教版刻插图，才如吉光片羽，难寻难觅。但根据文献记载和现存实物看，初步可以肯定，中国雕版印刷术发明之后，首先在佛教经籍的印制中得到最广泛的应用，佛教题材作品，也成为中国版刻插图艺术史上最早出现的品类。
二、承先启后的五代、宋、元插图

继唐而起的五代，是中国历史上大动荡、大分裂、大混乱的时代，也是艺术史上的一个相对衰败期。但唐代开创的版刻插图艺术，却在动乱中取得了不小的进步。
五代遗存的版刻插图作品，题材仍只有佛教一种，数量亦如凤毛麟角，但和唐代相比，还是多一些了。其中最值得一提的，就是《大圣毗沙门天王像》和《大慈大悲救苦观世音菩萨像》。二图皆刊印于后晋开运四年（公元947），后者题记有“归义军节度史检校太傅曹元忠造”字样，下有刻工雷延美署名，是现存最早一幅刊刻时间、地点、刊施人、刻工姓名一应俱全的版刻插图作品；前者则为现存最早的一幅版刻插图观音像，说明虽然都是佛教艺术品，但在题材选择上，远比唐代要丰富得多。
公元960年，北宋王朝建立，经过南征北讨、削平群雄，国家复归统一。宋朝重视文治，雕版印刷术全面发展，版刻插图艺术也取得了长足的进步。
宋代版刻插图艺术遗存，仍以佛教内容为主。其中如宋太宗时刊《御制秘藏诠》插图四幅，是现存最古老的山水画版画；雍熙年间刊《弥勒佛像》、《文殊菩萨像》等四图（现存日本），皆是精品；《大随求陀罗尼曼荼罗》、《大随求陀罗尼咒经》等，也是举世闻名的遗珍。他如南宋临安刊行的《文殊指南图赞》，图版置版面上方，是现存最早的大型佛教插图组画，也可以说是传世历史最为悠久的连环画作品。南宋建安余氏勤有堂刊本《列女传》，更是值得大书特书的作品。徐康《前尘梦影录》就评论说：“绣像书籍以来，以宋刊《列女传》为最精。”本书上图下文，版式与《文殊指南图赞》相类。
与宋对峙的辽、金、西夏，都是我国少数民族建立的政权。它们在版刻插图这一艺术领域，同样取得了骄人的成就。如辽国都城燕京，就是北方佛教版刻插图艺术的一个重要创作地点。1974年7月，在山西省应县佛宫寺释迦塔内，发现了大批辽代佛教经卷刻本，其中所附插图十余幅，幅幅都是精品。金朝刻大藏经《赵城藏》（又称《金藏》）扉画，雕版严整有力，深沉浑厚，背景简洁明快，人物个性鲜明，是佛教版刻插图中不多见的佳构。
从上文所述，不难看出五代、宋及辽、金的版刻插图，无论在雕镌技艺、雕工队伍、绘制地域，还是在表现内容和手法上，进步都是明显的，为版刻插图艺术在以后的大发展打下了良好的基础。
元代，也是我国雕版印刷史上的一个重要时代，元刊书籍插图比两宋不但毫不逊色，而且又有进步。就宗教版图而言，元代完成的《碛砂藏》，扉画严整工丽，远出宋刊之上。更重要的是，中国不少品种的书籍插图，是在元代才开始出现的。如元刊《西厢记》是现存最早的戏曲插图，《全相平话五种》是最早的平话刊本插图，《事文广记》为类书有图之始，这都是版刻插图艺术史上值得大书特书的事。因此，宋元是中国版刻插图艺术史上承先启后、继往开来的重要时代。
三、璀璨夺目的明代插图
明朝，中国图书出版业全面发展，刻家林立，坊肆蜂起，版刻插图艺术也随之进入了兴旺发达的黄金时代。其特点主要表现在以下几个方面。
百花齐放，空前繁荣，是明代版刻插图的第一个特点。经过唐、宋、元几个朝代的探索，到明代，版刻插图艺术不仅在制作地域上空前扩大，而且逐渐形成了建安、金陵、新安三大艺术流派，其他如武林、苏州、吴兴等地的版刻插图，亦各具特色，环绕在三大流派周围，如群星拱月，呈现出一派勃勃生机。各流派、地区版图争妍斗艳，而又互相交流、促进，为中国版刻艺术向更广阔的天地发展，提供了很好的条件。
形式多样，各擅胜场，是明代版刻插图艺术的第二个特点。这主要表现在插图形式除宋、元的单面方式、上图下文方式外，又出现了双面连式、多面连式、月光式等诸多类型，为画家随类赋形，提供了充分的选择余地。
由稚拙无华到精丽繁缛，是明代版刻插图艺术的第三个特点，也是其艺术风格上的最大特点。一般来说，早期的建安、金陵派插图，具有粗犷质朴的民间艺术草创风格。自徽派版画崛起，绘必求其细，工必求其精，逐渐成为明代插图艺术的主流，建安、金陵等地版画亦向其靠拢，与其融合，汇为一体，使中国插图艺术更加璀灿夺目。这大抵是因为明万历中晚期之后，有大批文人学士参加到插图的创作中来，使插图不仅仅是图书的装帧、文字的图解，而且也是文人案头的清玩。知识分子的加入，对提高插图的社会地位，促其在质与量上产生飞跃，起到了决定性的作用。
插图艺术队伍专业化，是明代版刻插图艺术的第四个特点。明代插图艺苑，留下姓名的画家极多，如汪耕、汪修、蔡冲寰、何英、卢霞子、熊莲泉、张梦征等，都是一时名家。这些人辛勤耕耘，留下了难以数计的作品，如今天尚能见到的王文衡作品，即不下数十种之多。一些脍炙人口的大画家，如唐寅、仇英、钱谷、丁云鹏、陈洪绶等，也为插图绘制画稿。明代刻工，更是多如繁星。如徽派刻工的主将——安徽歙县虬川黄氏刻工，见于《虬川黄氏重修宗谱》著录的，就有近三百人。他们父子世业，兄弟相传，而且流寓南北各地，对徽派版刻风范的传播做出了卓越贡献。其他如旌德鲍承勋、郭卓然，武林项南洲，吴兴汪文佐，金陵刘素明等，皆是一代名工圣手。这样一支庞大的刻工队伍，成为明代版刻插图艺术大发展的人才基础。
技法上精益求精，突飞猛进，是明代版刻插图艺术的第五个特点。建安、金陵两派的早期插图作品，技法上仍略显粗糙，手法也变化不多。徽派崛起后，这一情况得到了彻底的改善，点染皴擦，无不运用自如，出神入化。同时，刻工们还注意从理论上进行总结，如陆禹九抄录的徽州刻工传授口决：“木板雕画不稀奇，功夫深来心要细。若要双刀提线稳，多看多刻生巧艺。多看多刻还要想，刀刻件件样样巧。武功只有十八般，雕工难处学到老。执刀自有执刀理，刷印本领有高低。□□□□大喜事，先刻人来刻山水。”言简意赅，本身就是一篇有关刻事的教科书。
发扬蹈历，推陈出新，是明代版刻插图艺术的第六个特点。这里最值得一提的，就是把套版印刷技术和版画艺术结合起来，出现了彩色版画套印术。最初，为获得彩色图版，采取的是在一块版上，根据图画内容，分别涂上不同颜色，覆纸一次印刷的方法，称单版涂色法。这种方法，在元代就有了。在此法的基础上，或者说在它的启示下，明时出现了将彩色画稿按不同颜色分别勾摹下来，每色刻成一小版，分版分色，逐次逐色套印或迭印的方法，即为套印。因其版形如餖钉，又称“餖版”。后来，又发明用凸凹两版嵌合，使纸面拱起的方法，使画面富有立体感，称为“拱花”。套印出的插图，色彩艳丽，浓淡得宜，阴阳向背之间，几可乱真。明朝不少画谱插图，如胡正言刻《十竹斋画谱》，吴发祥刻《萝轩变古笺谱》，就都是个中精品。
当然，明代版画，尤其是晚明版刻插图作品，也有不尽人意之处。如过于强调繁缛细密、富丽工致，有时看上去，反不如早期版画来得痛快淋漓、意趣天成。公式化、程式化的表现手法，也制约了它的发展天地。但瑕不掩瑜，无论从数量上还是质量上，明代插图都代表了中国古代插图艺术的最高成就，在全世界也处于领先地位。即使和以精细著称的西洋铜版插图相比，在总体上也是有过之而无不及的。
四、由盛转衰的清代书籍插图
清朝入关后，采取了极端专制的文化政策，禁书焚书，文网苛密，屡兴文字大狱。读书人为避祸，多沉溺于断简残编，孜孜于考据之学。“城门失火，殃及池鱼”，明代蓬勃发展的版刻插图艺术，也由此而逐渐衰落下来。
清代版刻插图艺术的衰落是有一个过程的，并非朝夕之间便一蹶不振。清初，承明余绪，仍有一些精美作品出现，如旌德鲍承勋所刻《扬州梦》、《秦楼月》等戏曲剧本插图，精丽典雅，被认为是徽版的殿军；四雪堂刊《隋唐演义》、《封神演义》，古吴三多斋刊《古今列女传演义》，以及《笠翁十种曲》等，均不逊兴盛时期的徽版名作。一些著名的刻工，如黄顺吉、刘荣、汤尚、汤义、蔡思璜、谭一葵等，亦不负名工之誉，使版刻插图在清乾、嘉之前，仍出现了短暂的繁荣。
清朝最先衰落下去的插图品类，恰恰是最受民众欢迎、明代最为兴盛的小说、戏曲作品插图。此类作品，历次禁书都首当其冲。康熙五十三年（公元1714），康熙皇帝就曾下谕：“治天下必先正人心，厚风俗。要正人心，厚风俗，必需崇经学。所有小说淫词，应严禁销毁。”在这种情况下，小说、戏曲类书籍插图自然也难逃厄运。乾嘉之后这类作品鲜见有精美可观者，其因盖出于此。
其实，清统治者仇视的是对大清朝不利的文献图籍，而不是插图艺术本身。相反，插图以其直现性、形象性，恰好可以作为对“圣朝”歌功颂德的工具。因此，在清政府组织刻印的图书中，多附有精美插图。清政府刻书，多由武英殿提调，这类图书的插图就被称为殿版画。其中如《御制耕织图诗》、《圆明园诗图》、《避暑山庄三十六景诗图》、《墨法集要》等，都是殿版画的代表作品。殿版画多细笔皴擦，工致娟丽，章法多变，印刷质量均为上乘。内廷刻书如此重视插图，为前朝所无。但同样因为供奉内廷，片面追求谨严工稳，这些作品又不如民间作品灵动飘逸，意趣天成。
在统治者对戏曲、小说类作品的高压政策下，清朝民间版刻插图中的两大品类——人物画和山水画，却得到了长足的进步。人物插图中的《凌烟阁功臣图》、《无双谱》、《晚笑堂画传》，以及《水浒全图》、《三国画像》等，都是这方面的佳构。明末政治黑暗，文臣昏愦，武将懦弱，终至亡国。汉族知识分子希望有古贤臣名将那样的人物出来扭转乾坤，重整山河，清前期人物画的发达，和这种心态多少有关。
清朝的山水插图（主要是方志图书中的插图），取得了前所未有的辉煌成就。大画家萧云从绘《太平山水图画》，笔力凝重，气氛沉郁，所寄托的亦是明季遗黎对故国佳山秀水的哀思，具有强烈的民族主义和爱国主义气息，在古代山水插图中，可称前无古人、后无来者。清朝诸帝喜游幸，绘有《南巡盛典》、《西巡盛典》等多种插图，上有所好，下必甚焉，故清山水记游之类的图书插图极富，成就斐然。方志中的插图，多少也与此有关。但这些插图，多受殿版影响，《太平山水图画》中的磅礴之气，无从见到了。
明代发展起来的套版彩印插图，到清代亦有佳构。清康熙年间沈因伯刊行的《芥子园画传》，“一幅之色，分别先后，凡数十版，有积至逾尺者”，至今仍被奉为画学的圭臬。《西湖佳话》卷首冠佳景十图，为金陵王衙彩色套印本，图画富丽精工，亦为套印书中的大观。
清嘉庆之后，版刻插图中的突出作品不多，除少数人物图传类书籍和记游类书籍插图外，可称述者寥寥，技法上亦少见突破。
尚值一提的是，清光绪年间，西方石印术传入中国。石版印刷对印制图画便捷省力，成本低廉，很快取代了版刻形式，成为印制图书插图的主要方法。晚清石印图书极多，图亦精丽，虽然这已不是木刻画，但在技法和构图上，仍在一定程度上因袭着版刻插图的传统，依然是弥足珍贵的文化遗产，但已非本文论述范围，故不赘。

IE6中使PNG格式图片透明显示方法

www@webcss.cn(zhenzhai) — Mon, 16 Jun 2008 14:28:34 +0800

使用了PNG图片，IE6下无法透明显示，出现难看的灰框，解决办法总结如下
一般有两种解决办法：1、CSS；2、JS

其实说到底都是使用了IE5.5+的AlphaImageLoader滤镜来实现，只不过前一种是手动添加，第二种通过JS来遍历。

一、CSS
需要手动对PNG图片容器添加样式

/* html>body 标签IE6不认，Firefox直接显示*/
html>body #div_img {
background-image: url(png.png);
}
/* * 标签IE6显示滤镜，Firefox不认*/
* #div_img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="png.png);")
}

二、JS
原理一样，只是不需要手动添加样式，直接有程序遍历PNG文件，以下代码直接加入页面头部，其他无需操作

程序代码

问题：
使用滤镜后，容器部分的连接会失效，解决办法：对连接添加以下样式

a {
position:relative;
}

附：
引用
AlphaImageLoader滤镜
语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled,sizingMethod=sSize,src=sURL )
属性：
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
例子：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="png.png);")

zhenzhai

The ultimate jQuery Plugin List jQuery插件 240多个

概述

文件上传(File upload)

表单验证(Form Validation)

表单－选取框(Form - Select Box stuff)

表单基本、输入框、选择框等(Form Basics, Input Fields, Checkboxes etc.)

时间、日期和颜色选取(Time, Date and Color Picker)

投票插件(Rating Plugins)

搜索插件(Search Plugins)

编辑器(Inline Edit & Editors)

多媒体、视频、Flash等(Audio, Video, Flash, SVG, etc)

图片(Photos/Images/Galleries)

Google地图（Google Map）

游戏(Games)

表格等(Tables, Grids etc.)

统计图(Charts, Presentation etc.)

边框、圆角、背景(Border, Corners, Background)

文字和超链接(Text and Links)

鼠标提示（Tooltips）

菜单和导航(Menus, Navigations)

幻灯、翻转等(Accordions, Slide and Toggle stuff)

拖放插件(Drag and Drop)

XML XSL JSON Feeds

浏览器(Browserstuff)

对话框、确认窗口(Alert, Prompt, Confirm Windows)

CSS

DOM、AJAX和其它JQuery插件（DOM, Ajax and other jQuery plugins）

准确检验你安装运行的 XP 或 VISTA 究竟是原版，还是？？？

产品展示左右平滑滚动效果

PS人物美化之磨皮

国外优秀摄影网站

wordpress在iis下静态化设置

Dreamweaver替换正则表达式表

Lytebox很好用的LightBox效果库

中国传统插图

IE6中使PNG格式图片透明显示方法