用户体验 速度最重要
今天下午看到WordPress 2.2发布了，加了不少新功能。“让您可以只需要鼠标简单拖放操作便可重新安排和自定义您的 Blog (通常是侧边栏)。此功能最初是 Widgets 插件引入的，现在成为了 WordPress 的默认核心代码，做了大量的优化，并且默认主题启用了这个功能。”很不错的功能。一直很喜欢WP，由于最初一开始就选中了F2也没有好换，就一直坚持用，我相信我也会一直坚持一下去。只要自己喜欢就好！ WP给我的感觉就是不太合我们国人的习惯，虽然他各方面都很优秀也有中文版，但总觉得用起来不太顺手。
前几天换了电信服务器本以为速度上会有很大提升，但这并不和我当初想像的那样。据说能好不少。我在学校干线上的，网通还是电信速度都还不错，具体他们说的慢，有多慢我自己也不知道。 为了改提高速度，关了所有没有实用价值的插件 Google PR、AleX排名等，反正就是能不用的尽量关了。现在还开着的比较影响速度的有 lightbox2和首面上面的Flash图片展示。我真的很喜欢 lightbox2的效果，很帅！所以一直还开着。为喜欢的东西或许多少得付出些代价。
看来年用双线的服务器吧，单线的总没办法。也不知道什么通和什么信的为什么要这样。
Sqirlz Water Reflections汉化版 Flash水波生成器
下面这个水波效果还让你满意吧。昨晚加班做的，学校东湖美景。其实这只要两分钟就能完成，你信吗？
我公需要Sqirlz Water Reflections就能很容易的完成。
【软件说明】
功能介绍：Sqirlz Water Reflections专门用来给图片做动态美工的件,用该软件做出来的flash水波纹效果极棒。
SWR提供了5种动画类型，其参数也相当丰富，如水波幅度、波纹方向亮度、透视、透明度及涟漪特性等。各参数的配合、调整可以使你到极其丰富的波纹效果，能够满足自然界各种波纹景象，SWR的使用很简单，如果你只考虑缺省效果，那么产生一个作品只需载入图片、定区域、保存swf文件这三步。选区的操作除了移动，还有平滑和组合”选区（比如可以组合出一个类似“马蹄形”的选区）等。
除了可以保存为SWF文件，它还能为AVI视频动画添加波纹，当然还有静的水波效果。
很好用吧，快下载回去试试吧！ Let’s go……
本站下载：94
超酷圆形边框 div +css 做法
[code]
[color=royalblue]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>新建网页</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="robots" content="all" />
<meta name="author" content="lybykw | www.vistathink.com" />
<meta name="Copyright" content="Copyright (c) 2000-2005
www.vistathink.com" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" media="screen"
/>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"
media="screen" />
<meta name="description" content="网页制作" />
<meta name="keywords" content="木瓜S Blog，Ardy.CN， www.ardy.cn" />
<style type="text/css">
</style>
<script language="javascript">
</script>
</head>
<body>
<br><br><br><br><br>
<div class="p100">
<div class="round1">
<div class="tl"></div>
<div class="tr"></div>
<div class="bl"></div>
<div class="br"></div>
<div style=" position:absolute; top:-35px; _top:-22px; left:-25px;">
<ul class="ovt">
<li><span><img name="" src="" width="1" height="22"
align="absmiddle" />
<img
src="http://cn.yimg.com/i/ks/060928/tab_knowledge.gif" hspace="3" />知识
</span></li>
</ul>
</div>
<div style="padding:10px;">通过下列链接访问参考资料，可帮助你创建引人注目
的 Web 页面。<br>动态 HTML (DHTML) 对象模型参考<br></div>
</div>
</div>
</body>
</html>
[/color]
[/code]
经典 CSS技巧 20个
===============================================
本文作者是：Trenton Moss。
发表网站是：http://www.webcredible.co.uk。
===============================================
1. CSS字体属性简写规则
一般用CSS设定字体属性是这样做的：
font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif
但也可以把它们全部写到一行上去：
font: bold italic small-caps 1em/1.5em verdana,sans-serif
真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。
2. 同时使用两个类
一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：
<p class=”text side”>…</p>
同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。
3. CSS border的缺省值
通常可以设定边界的颜色，宽度和风格，如：
border: 3px solid #000
这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。
如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。
4. CSS用于文档打印
许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。
也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：
<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” media=”screen” />
<link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” />
第1行就是显示，第2行是打印，注意其中的media属性。
但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。
5. 图片替换技巧
一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。
比如你想整个卖东西的图标，你就用了这个图片：
<h1><img src=”widget-image.gif” alt=”Buy widgets” /></h1>
这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：
<h1>Buy widgets</h1>
但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：
h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}
注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。
6. CSS box模型的另一种调整技巧
这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：
#box
{
width: 100px;
border: 5px;
padding: 20px
}
这样调用它：
<div id=”box”>…</div>
这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。
但用CSS也可以达到同样的目的，让它们显示效果一致。
#box
{
width: 150px
}
#box div
{
border: 5px;
padding: 20px
}
这样调用：
<div id=”box”><div>…</div></div>
这样，不管什么浏览器，宽度都是150点了。
7. 块元素居中对齐
如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：
#content
{
width: 700px;
margin: 0 auto
}
你会使用 <div id=”content”> 来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：
body
{
text-align: center
}
#content
{
text-align: left;
width: 700px;
margin: 0 auto
}
这会把网页内容都居中，所以在Content中又加入了
text-align: left 。
8. 用CSS来处理垂直对齐
垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。
CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。
9. CSS在容器内定位
CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：
#container
{
position: relative
}
这样容器内所有的元素都会相对定位，可以这样用：
<div id=”container”><div id=”navigation”>…</div></div>
如果想定位到距左30点，距上5悖梢哉庋?BR>
#navigation
{
position: absolute;
left: 30px;
top: 5px
}
当然，你还可以这样：
margin: 5px 0 0 30px
注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。
10. 直通到屏幕底部的背景色
在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：
#navigation
{
background: blue;
width: 150px
}
较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？
不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。
body
{
background: url(blue-image.gif) 0 0 repeat-y
}
此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。
11. Block和inline元素对比
所有的HTML元素都属于block和inline之一。block元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。相反地，inline元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
用code class=”inline”>display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？
让一个inline元素从新行开始；
让块元素和其他元素保持在一行上；
控制inline元素的宽度（对导航条特别有用）；
控制inline元素的高度；
无须设定宽度即可为一个块元素设定与文字同宽的背景色。
12. 再来一个box黑客方法
之所以有这么多box黑客方法，是因为IE在6之前对box的理解跟别人都不一样，它的宽度要包含边线宽和空白。要想让IE5等同其他浏览器保持一致，可以用CSS的方法：
padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;
第一个宽度所有浏览器都认得，但IE5.x不认得第2行的宽度设置，只因为那一行上有空白的注释符号（多么蠢的语法分析！），所以IE5.x就用20减掉一些空白，而其他浏览器会用14这个宽度，因为它是第2行，会覆盖掉第1行。
13. 页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：
<body>
<div class=”container“>
然后CSS这样设计：
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? “600px”: “auto” );
}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
同样的办法也可以为IE实现最大宽度：
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? “600px” : document.body.clientWidth > 1200? ”1200px“ : ”auto”);
}
14. IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
.box
{
width: 80px;
height: 35px;
}
html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
所有的浏览器都可以使用第一个box设置，但IE不认得第2段设置，因为其中用到了子选择器命令。第2个设置更特殊些，所以它会覆盖掉第1个设置。
5. 字体变形命令
text-transform 命令很有用，它有3个值：text-transform: uppercase, text-transform: lowercase 和 text-transform: capitalize。第1个会把文字变成全大写，第2个变成全小写，第3个变成首字母大写。这对拼音文字非常有用，即使输入时有大小写错误，在网页上也看不到。
16. IE中图片文字消失的问题
有时会遇到文字或背景图突然消失的问题，刷新一下又出现了，这在靠近漂浮元素时更容易发生（注：没见过）。此时，可以为消失的元素设定： position: relative ，如果不行，再考虑为这些元素指定一个宽度试试。
17. 不可见文字
不论因为何种原因希望某些网页文字不在浏览器中显示，比如为了打印或为了小屏幕而让某些文字不显示，都可以用 display: none 。这非常简单，但有时对某些人这有点没用，他们能去掉这个控制，这时就要用到： position: absolute; left: -9000px 。
这实际上是把文字指定在页面以外显示。
18. 为手持设备设计专门的CSS
也就是手机／PDA等小屏幕用户，可以专门设计一个CSS来让网页显示更舒服些。为此，可以把浏览器窗口调整到150点宽来看效果。指定专门的手持设备的CSS的语法是：
<link type=”text/css” rel=”stylesheet” href=”handheldstyle.css” media=”handheld” />
也可以阅读专门的手持设备可用性。
19. 3D效果的按钮
以前要想制作带有3D效果，并且点击下去还会变化的按钮，就得用图片替换的方法，现在CSS就可以了：
a
{
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}
a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
至于效果，还可以自己调整了。
20. 在不同页面上使用同样的导航代码
许多网页上都有导航菜单，当进入某页时，菜单上相应这一项就应该变灰，而其他页亮起来。一般要实现这个效果，需要写程序或专门为每一页做设计，现在靠CSS就可以实现这个效果。
首先，在导航代码中使用CSS类：
<ul>
<li><a href=”#” class=”home”>Home</a></li>
<li><a href=”#” class=”about”>About us</a></li>
<li><a href=”#” class=”contact”>Contact us</a></li>
</ul>
然后分别为每一页的Body指定一个id，和上面类同名。如<body id=”contact”>。
然后设计CSS如下：
#home .home, #about .about, #about .about
{
commands for highlighted navigation go here
}
这里，当id设为home时，.home就会起作用，也就是class设为home的那一行导航条就会显示出特殊效果来。其他页也是如此。
XAMPP配zend optimizer的问题
最近有项目要搭建PHP＋MySQL，为了方便选用了XAMPP。
xampp1.6.0a包括：
Apache 2.2.4, MySQL 5.0.33, PHP 5.2.1 + 4.4.5 + PEAR + Switch, Openssl 0.9.8d, phpMyAdmin 2.9.2, XAMPP Control Panel 2.4, Webalizer 2.01-10, Mercury Mail Transport System für Win32 und NetWare Systems v4.01a, FileZilla FTP Server 0.9.22, SQLite 2.8.15, ADODB 4.93a, Zend Optimizer 3.2.2
安装 X-Space 3.0/SupeSite 5.5 时候提示”Attention: Zend Optimizer not Installed ”
重新下载了zend optimizer3.2.2来安装，还是提示zend没有安装
后来找到了解决方法。
php.ini中找
zend_optimizer.encoder_loader=0
把0改为1
重启web
还有，在装Zend时，配的PHP.ini是在xampp/apache/bin，选的Root是你要优化的Web目录
ASP何屏敝输入的HTML代码
Function Newstring(wstr,strng)
Newstring=Instr(lcase(wstr),lcase(strng))
if Newstring<=0 then Newstring=Len(wstr)
End Function
Function RemoveHTML(strHTML)
Dim objRegExp, Match, Matches
Set objRegExp = New Regexp
objRegExp.IgnoreCase = True
objRegExp.Global = True
‘取闭合的<>
objRegExp.Pattern = ”<.+?>”
‘进行匹配
Set Matches = objRegExp.Execute(strHTML)
‘ 遍历匹配集合，并替换掉匹配的项目
For Each Match in Matches
strHTML=Replace(strHTML,Match.Value,”")
Next
RemoveHTML=strHTML
Set objRegExp = Nothing
End Function
Ajax程序中,自己实现页面前进、后退、与标签功能(asp.net2.0)
大家知道用Ajax时，前进后退是件难事，现把网上看到的实现方法转发。
我把实现功能的主要程序代码写在imitateHistory.js这个文件中
imitateHistory.js
1 //定义一个全局数组
2 var hashList = new Array();
3 //定义一个全局变量，用来作为hash的编号
4 var hashNO = 0;
5 //初始化数组，将初次装载的页面的hash添加进数组
6 hashList[0] = window.location.hash.replace(‘#’,”);
7 //将Hash填加到数组
8 function addHash(newHash)
9 {
10 //这个判断是检测是否在点击后退按钮后，再点击了新的链接
11 if(hashNO!=(hashList.length – 1))
12 {
13 //删除此页标识以后的数组项
14 hashList.splice(hashNO+1,(hashList.length-(hashNO+1)));
15 }
16 hashList[hashList.length] = newHash;
17 //指向本页hash的编号
18 hashNO = hashList.length – 1;
19 //将Hash赋值给浏览器
20 makeHistory(newHash);
21 //根据浏览器的hash，加载数据
22 urlCode();
23 checkLinkButton();
24 }
25 //将Hash赋值给浏览器
26 function makeHistory(newHash)
27 {
28 window.location.hash = newHash;
29 }
30 //检测导航按钮状态（按钮是否可用）
31 function checkLinkButton()
32 {
33 if(hashList.length>1)
34 {
35 if(hashNO>0)
36 {
37 document.getElementById(‘Back’).disabled=”;
38 }
39 else
40 {
41 document.getElementById(‘Back’).disabled=’disabled’;
42 }
43 if(hashNO<(hashList.length-1))
44 {
45 document.getElementById(‘Next’).disabled=”;
46 }
47 else
48 {
49 document.getElementById(‘Next’).disabled=’disabled’;
50 }
51 }
52 }
53 //后退按钮onclick事件
54 function linkBack()
55 {
56 hashNO = hashNO – 1;
57 makeHistory(hashList[hashNO]);
58 //根据浏览器的hash，加载数据
59 urlCode();
60 checkLinkButton();
61 }
62 //前进按钮onclick事件
63 function linkNext()
64 {
65 hashNO = hashNO + 1;
66 makeHistory(hashList[hashNO]);
67 //根据浏览器的hash，加载数据
68 urlCode();
69 checkLinkButton();
70 }
71 //根据浏览器的hash，加载数据
72 function urlCode()
73 {
74 var TempHash = window.location.hash;
75 //下面的”home”、”msgList”只是做个标识，可以自己定义
76 //根据浏览器的hash，加载数据
77 switch(TempHash)
78 {
79 case”":
80 alert(‘调用你的首页’);
81 break;
82 case”home”:
83 alert(‘调用你的首页’);
84 break;
85 }
86 //如果是留言本的页码标签
87 if (TempHash.substr(1,7)==”msgList”)
88 {
89 var page;
90 //取得当前页码
91 page = window.location.hash.substr(8,window.location.hash.length);
92 alert(‘根据页码调用你的留言列表’);
93 }
94 //当然如果是论坛的帖子标签，我想也只是对TempHash这个字符串多玩几个花样而已，具体我就不介绍了。
95 }
以上主要是用到JS数组的存储功能，用window.location.hash这个方法来操作浏览器的碎片标识。
下面是一个测试用的HTML文件，向大家描述一下具体的使用方法。
文件名test.html
test.html
1 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
2 <html xmlns=”http://www.w3.org/1999/xhtml” >
3 <head>
4 <meta http-equiv=”Content-Type” content=”text/html; charset=GB2312″ />
5 <title>测试</title>
6 <script language=”javascript” src=”imitateHistory.js” type=”text/javascript”></script>
7 <script language=”javascript” type=”text/javascript”>
8 <!–
9 //页面装载完后,通过浏览器的Hash初始化你的Ajax程序。
10 function window.onload()
11 {
12 urlCode();
13 }
14 //我用下面这个方法来模拟AJAX回调不同的模块。
15 function imitateAjax(mode)
16 {
17 switch(mode)
18 {
19 case “home”:
20 document.getElementById(‘divAjax’).innerHTML=”你现在调用的是首页模块”;
21 &nb
sp; break;
22 case “news”:
23 document.getElementById(‘divAjax’).innerHTML=”你现在调用的是新闻模块”;
24 break;
25 case “photo”:
26 document.getElementById(‘divAjax’).innerHTML=”你现在调用的是图片模块”;
27 break;
28 case “music”:
29 document.getElementById(‘divAjax’).innerHTML=”你现在调用的音乐是模块”;
30 break;
31 case “msgList1″:
32 document.getElementById(‘divAjax’).innerHTML=”你现在调用的是留言列表的第 1 页<br /><br /><span>上一页
33
34 </span> <span style=’cursor:hand;’ onclick=addHash(‘msgList2′)>下一页</span>”;
35 break;
36 case “msgList2″:
37 document.getElementById(‘divAjax’).innerHTML=”你现在调用的是留言列表的第 2 页<br /><br /><span
38
39 style=’cursor:hand;’ onclick=addHash(‘msgList1′)>上一页</span> <span style=’cursor:hand;’
40
41 onclick=addHash(‘msgList3′)>下一页</span>”;
42 break;
43 case “msgList3″:
44 document.getElementById(‘divAjax’).innerHTML=”你现在调用的是留言列表的第 3 页<br /><br /><span
45
46 style=’cursor:hand;’ onclick=addHash(‘msgList2′)>上一页</span> <span>下一页</span>”;
47 break;
48 }
49 }
50 –>
51 </script>
52 </head>
53 <body>
54 <input id=”Back” onclick=”linkBack();” type=”button” disabled=”disabled” value=”←” />
55 <input id=”Next” onclick=”linkNext();” type=”button” disabled=”disabled” value=”→” />
56 <br />
57 <br />
58 <br />
59 <input onclick=”addHash(‘home’);” type=”button” value=”首页” />
60 <input onclick=”addHash(‘news’);” type=”button” value=”新闻” />
61 <input onclick=”addHash(‘photo’);” type=”button” value=”图片” />
62 <input onclick=”addHash(‘music’);” type=”button” value=”音乐” />
63 <input onclick=”addHash(‘msgList1′);” type=”button” value=”留言” />
64 <br />
65 <br />
66 <div id=’divAjax’ style=”background-color:#CCCCCC; height:100px;”></div>
67 </body>
68 </html>
Web2.0图片特效脚本 lightbox 【推荐】
Lightbox JS 是一个简单方便的用来把图片覆盖在当前页面上的脚本,它能被快速安装并且运作于所有流行的浏览器.
最新更新 Version 2.0#
图片集: 分组相关的图片并且能轻松的导航它们
# 视觉特效: 奇特的自适应调整
# 向后兼容: yes!
http://www.ardy.cn/lightbox/test.html
http://www.ardy.cn/lightbox/lightbox2.html
v2.03 Released 4/10/07
- Improved keyboard navigation. Animation off toggle.
Hides Flash movies under overlay. Imagemap support. Valid CSS.
官方地址(演示+最新2.03版本下载):
http://www.huddletogether.com/projects/lightbox2/
建议新手先下载蓝色理想汉化版,有中文说明(版本非最新2.03,而是2.02)
http://www.blueidea.com/articleimg/2006/08/3904/lightbox2.02.zip
如何使用:
步骤 1 – 安装
- Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header.
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script>
- 外调 Lightbox CSS 文件 (或添加 Lightbox 样式到你现行的样式表中).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
- 检查 CSS 并确定调用的 prev.gif 和 next.gif 文件在正确的位置. 同样要确定调用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正确的位置.
步骤 2 – 激活
- 添加 rel=”lightbox” 属性到任何一个链接标签去激活lightbox. 例如:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
可选择项: 使用 title 属性加上说明.
- 如果你有一套你想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名. 例如:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
没有限定每个页面的图片组数量和每个图片组图片的数量. 疯了！
有什么不明白的可以和我留言！
· 