一般来说,我们在写博客或做网站时都需要对插图做一些效果,比如增加阴影、图片圆角、倒映等等。这些效果一般可以用3个方法实现,一是用PS实现对图片进行修改,二是使用CSS,三是使用JavaScript。使用PS会破坏原图,而且要花费一定的时间。Netzgesta上有很多实现图片特效的JavaScript提供下载,很多效果都是相当漂亮的。
1、水倒映
这个js将为图片添加水倒映的特效,时下web2.0站点很喜欢这种效果。
如果你喜欢在线生成水倒映效果,可以参考这里。
2、圆角+阴影

或许你记得用RoundPic能在线生成圆角图片,事实上用这个js也可以实现效果。
3、高光圆角阴影
这个效果可以用来做按钮。是我最喜欢的特效之一。
4、斜光阴影效果

和上面的效果看起来非常相似,但也有不同的地方。
5、相框效果
如果你在做图片博客,可以你会喜欢这个js,使用后博客文章内的图片都有相框的效果。
6、黑色相框

不喜欢白色没有立体感的相框,那试试这个立体感充足的js效果吧。
7、放大镜
一个很有趣的js,实现放大镜效果。记得在去年Google开发者日的时候,某个主讲人也有说到在GMaps里实现放大镜的有趣效果。具体效果点击这里。
8、菲林效果

如果你在写一个电影博客,这个效果或许会让你喜欢。
9、花边效果

很简单的图片花边效果。
10、翻页效果
翻页效果是很常见的,Google一下你会发现有很多相关的教程,如果你不想花时间去学,直接下载这个js吧。
安装使用方法:
将下载的压缩包解压之后上传到网站空间,然后在需要显示效果的head里添加代码,比如高光阴影效果Glossy,添加的代码是:
<script type="text/javascript" src="glossy.js"></script>
对于Wordpress,可以在header.php里添加。如果只要求文章页里出现效果,也可以考虑在single.php里添加。
然后,在想要显示特效的图片的<img>标记里添加:
class="glossy"
这样效果就出现了。
其它效果添加方法类似。
via BlogOhblog。
下载地址(eMule):http://www.verycd.com/topics/69331/
中文名称:张孝祥IT课堂-JavaScript教学视频录像
地区:大陆
语言:普通话
简介:

张孝祥IT课堂-JavaScript教学视频录像
隆重发行
经过张孝祥老师三个月的潜心制作,《张孝祥IT课堂-JavaScript教学视频录像》终于面世了。新版的《张孝祥IT课堂-JavaScript教学视频录像》 秉承《张孝祥IT课堂-Java教学视频录像(高级篇)》身临其境的手把手教学风格,并且采用了高效数字编码算法和全新的多媒体播放器,图象更清晰、操作更方便,最直观地让学员身临其境地学习和感受编程的乐趣,更能体会张孝祥老师授课的震撼力和穿透力。
光盘的内容:本教程结合大量应用实例,详细地讲解了HTML语言、CSS、JavaScript、DOM对象模型编程、正则表达式,并介绍了网页脚本编程的其它相关技术和知识,例如,VBScript、NetScape控件、ActiveX控件、Java Applet小程序等。本书力求在不减少知识信息量的情况下,能够把书写薄,同时又能把问题说透,让读者能够迅速上手,尽最大可能地扩展读者的知识面,启发读者自我思考和学习的能力,让读者感受到技术学习所带来的快乐。本教程主要面向网站开发人员,也适于普通前端网页设计人员阅读。考虑到适应实际工作中的不仅仅需要编程语言本身,还要有一些计算机相关的周边知识的特点,所以,本教程从原理和细节上着手,让读者对一些专业术语透彻理解,尽最大程度扩展读者的知识面。本教程强调用最短的时间和最浅显易懂的例子说明问题,启发读者思考和自我解决问题的能力,以知识够用为原则,重视学会的本质,能让读者做一些基本的应用开发,碰到新问题时,能自己查阅资料独立解决,就叫学会,没有任何人能掌握一门学科的每个细节。
JavaScript教学视频录像总时间为40小时左右,为了让用户了解到更为精确的信息,本站以后不再使用光盘的张数来作为产品的度量单位,而改用视频教程的时间来度量。
说明:
javascript教程进行了部分加密,加密部分在未注册的计算机上不能播放,用户需要向我们索取注册码后对计算机进行注册,每台计算机的注册码都不一样。 如果计算机的CPU识别信息、硬盘序列号、硬盘分区、内存等这四个内容之一发生了变化,就可能导致软件认为是在另外一台计算机上运行,为此,我们可以为每个用户从购买之日算起的每年都提供三个注册码。 我们每年为用户提供三个注册码,主要是为了方便用户硬件升级或更改后能继续使用,希望大家不要随意替他人索取注册码,以免影响自己使用。
由于加密后的视频具有对计算机资源要求高、启动时间长等缺点,所以,本套视频教程采用了部分视频片段加密、部分视频片段不加密的混合方式发行。
如何理解JavaScript、Java、Jsp、J2ee之间的关系与区别
很多初学习者对JavaScript、Java、Jsp、J2ee之间的关系与区别总是感到很困惑,为了帮助大家快速理解几者之间的关系,我们进行了如下解释说明:
1. JavaScript用于编写嵌入在网页文档中的程序,它由浏览器负责解释和执行,可以在网页上产生动态的显示效果和实现与用户交互的功能,譬如,让一串文字跟着鼠标移动,让一个图标在网页漂浮移动,验证用户输入的信用卡号的格式正确与否,等等特效网页功能。
2. Java则是一种基础性的语言,学习jsp,j2ee都要有java的基础。无论你是想成为诗人,还是小说家,还是散文家,甚至就是当记者,你都要学习语文吧,Java就相当于语文、Jsp、J2ee则相当于小说、散文等。学好了语文,你能否就会有一份好的职业呢?不见得吧,但至少机会要多多了,语文学得越好,就更容易成为小说家,或是记者等等了。要想成为记者、散文家等等,没有语文是怎么都不行的。
3. jsp用于让www服务器产生出内容可以变化的网页文档和对用户提交的表单数据进行处理,例如,显示留言内容,留言内容总是在增加的,所以,传递给用户浏览器的网页文件内容是需要改变的,这就是jsp来实现的。将用户留言插入到数据库中,也是jsp来实现的。
4. j2ee用于开发大型的商业系统,例如,你在各个银行之间的取款,存款,银行之间要互通有无,执行存取款的记录操作,还要进行安全性检查,不能谁都可以来查帐,还要考虑网络断线等问题。使用j2ee,你就不用编写这些底层的细节程序代码了,而将精力集中到应用的业务流程设计上。
<INPUT onfocus="oRng=this.createTextRange();oRng.collapse(true);oRng.moveStart('character',3);oRng.select()" value=abcdefg type=text name=text1>
当焦点移至文本框时光标定位在位置3。
如果要直接定位在文本末尾,把上面的数字 3 改为 this.value.length 即可。
代码:
function check(){
s.disabled = (t1.value == '' || t2.value == '' || t3.value == '')
}
</script>
<input name="t1" onpropertychange="check();">
<input name="t2" onpropertychange="check();">
<input name="t3" onpropertychange="check();">
<input type="submit" name="s" disabled>
效果:
<div style="width: 120px; height: 50px; border: 1px solid blue; text-overflow: ellipsis; overflow: hidden;"> <nobr>就是比如有一行文字,很长,表格内一行显示不下.</nobr> </div>
如何避免别人把你的网页放在框架中 <script>
<!--
if (top.location != self.location) {top.location=self.location;}
//-->
</script>
针对上述屏蔽,有以下解决方法:
<script>
<!--
var location="";
//-->
</script>
连续的英文或者一堆感叹号!!!不会自动换行的问题
只要在CSS中定义了如下句子,可保网页不会再被撑开了
table{table-layout: fixed;}
td{word-break: break-all; word-wrap:break-word;}
注释一下:
1.第一条table{table-layout: fixed;},此样式可以让表格中有!!!(感叹号)之类的字符时自动换行。
2.td{word-break: break-all},一般用这句这OK了,但在有些特殊情况下还是会撑开,因此需要再加上后面一句{word-wrap:break-word;}就可以解决。此样式可以让表格中的一些连续的英文单词自动换行。
以“在表中取出现IP次数最多的IP”为例,表数据如下:
ID xIP xTIME
1 1.1.1.1 2007.1.3
2 1.1.1.3 2008.2.3
3 1.1.1.1 2008.2.4
4 1.1.1.1 2007.1.3
如果是查出现IP日次数最多的IP
注 count() 内的字段 需根据 group by 的内容 再研究,没试过。
我们只是对aspx页面进行压缩 ,当然也可以压缩js和css . 但你也想用来对图片也进行压缩的话就错了 ,效果和用winzip压缩图片一样, 只能增大体积.
首先来看看一个实例 aspx页面压缩前和压缩后的页面信息
压缩前

压缩后

可以看到压缩到原来页面大小的27% 效果还是可以的.
看看具体代码
CompressionModule
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->#region Using
using System;
using System.Web;
using System.IO.Compression;
#endregion
namespace BlogEngine.Core.Web.HttpModules
{
/// <summary>
/// Compresses the output using standard gzip/deflate.
/// </summary>
public class CompressionModule : IHttpModule
{
#region IHttpModule Members
/// <summary>
/// Disposes of the resources (other than memory) used by the module
/// that implements <see cref="T:System.Web.IHttpModule"></see>.
/// </summary>
void IHttpModule.Dispose()
{
// Nothing to dispose;
}
/// <summary>
/// Initializes a module and prepares it to handle requests.
/// </summary>
/// <param name="context">An <see cref="T:System.Web.HttpApplication"></see>
/// that provides access to the methods, properties, and events common to
/// all application objects within an ASP.NET application.
/// </param>
void IHttpModule.Init(HttpApplication context)
{
if (BlogSettings.Instance.EnableHttpCompression)
context.BeginRequest += new EventHandler(context_BeginRequest);
}
#endregion
#region Compression
private const string GZIP = "gzip";
private const string DEFLATE = "deflate";
/// <summary>
/// Handles the BeginRequest event of the context control.
/// </summary>
/// <param name="sender">The source of the event.</param>
/// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
void context_BeginRequest(object sender, EventArgs e)
{
HttpApplication app = sender as HttpApplication;
//压缩aspx页面
if (app.Request.Url.OriginalString.ToUpperInvariant().Contains(".aspx"))
{
//是否支持压缩协议
if (IsEncodingAccepted(DEFLATE))
{
app.Response.Filter = new DeflateStream(app.Response.Filter, CompressionMode.Compress);
SetEncoding(DEFLATE);
}
else if (IsEncodingAccepted(GZIP))
{
app.Response.Filter = new GZipStream(app.Response.Filter, CompressionMode.Compress);
SetEncoding(GZIP);
}
}
}
/// <summary>
/// Checks the request headers to see if the specified
/// encoding is accepted by the client.
/// </summary>
private static bool IsEncodingAccepted(string encoding)
{
return HttpContext.Current.Request.Headers["Accept-encoding"] != null && HttpContext.Current.Request.Headers["Accept-encoding"].Contains(encoding);
}
/// <summary>
/// Adds the specified encoding to the response headers.
/// </summary>
/// <param name="encoding"></param>
private static void SetEncoding(string encoding)
{
HttpContext.Current.Response.AppendHeader("Content-encoding", encoding);
}
#endregion
}
}
自从有了IP数据库这种东西,QQ外挂的显示IP功能也随之而生,本人见识颇窄,是否还有其他应用不得而知,不过,IP数据库确实是个不错的东西。如今网络上最流行的IP数据库我想应该是纯真版的(说错了也不要扁我),迄今为止其IP记录条数已经接近30000,对于有些IP甚至能精确到楼层,不亦快哉。2004年4、5月间,正逢LumaQQ破土动工,为了加上这个人人都喜欢,但是好像人人都不知道为什么喜欢的显IP功能,我也采用了纯真版IP数据库,它的优点是记录多,查询速度快,它只用一个文件QQWry.dat就包含了所有记录,方便嵌入到其他程序中,也方便升级。
基本结构
QQWry.dat文件在结构上分为3块:文件头,记录区,索引区。一般我们要查找IP时,先在索引区查找记录偏移,然后再到记录区读出信息。由于记录区的记录是不定长的,所以直接在记录区中搜索是不可能的。由于记录数比较多,如果我们遍历索引区也会是有点慢的,一般来说,我们可以用二分查找法搜索索引区,其速度比遍历索引区快若干数量级。图1是QQWry.dat的文件结构图。

图1. QQWry.dat文件结构
要注意的是,QQWry.dat里面全部采用了little-endian字节序
一. 了解文件头
QQWry.dat的文件头只有8个字节,其结构非常简单,首四个字节是第一条索引的绝对偏移,后四个字节是最后一条索引的绝对偏移。
二. 了解记录区
每条IP记录都由国家和地区名组成,国家地区在这里并不是太确切,因为可能会查出来“清华大学计算机系”之类的,这里清华大学就成了国家名了,所以这个国家地区名和IP数据库制作的时候有关系。所以记录的格式有点像QName,有一个全局部分和局部部分组成,我们这里还是沿用国家名和地区名的说法。
于是我们想象着一条记录的格式应该是: [IP地址][国家名][地区名],当然,这个没有什么问题,但是这只是最简单的情况。很显然,国家名和地区名可能会有很多的重复,如果每条记录都保存一个完整的名称拷贝是非常不理想的,所以我们就需要重定向以节省空间。所以为了得到一个国家名或者地区名,我们就有了两个可能:第一就是直接的字符串表示的国家名,第二就是一个4字节的结构,第一个字节表明了重定向的模式,后面3个字节是国家名或者地区名的实际偏移位置。对于国家名来说,情况还可能更复杂些,因为这样的重定向最多可能有两次。
那么什么是重定向模式?根据上面所说,一条记录的格式是[IP地址][国家记录][地区记录],如果国家记录是重定向的话,那么地区记录是有可能没有的,于是就有了两种情况,我管他叫做模式1和模式2。我们对这些格式的情况举图说明:

图2. IP记录的最简单形式
图2表示了最简单的IP记录格式,我想没有什么可以解释的

图3. 重定向模式1
图3演示了重定向模式1的情况。我们看到在模式1的情况下,地区记录也跟着国家记录走了,在IP地址之后只剩下了国家记录的4字节,后面3个字节构成了一个指针,指向了实际的国家名,然后又跟着地址名。模式1的标识字节是0x01。

图4. 重定向模式2
图4演示了重定向模式2的情况。我们看到了在模式2的情况下(其标识字节是0x02),地区记录没有跟着国家记录走,因此在国家记录之后4个字节之后还是有地区记录。我想你已经明白了模式1和模式2的区别,即:模式1的国家记录后面不会再有地区记录,模式2的国家记录后会有地区记录。下面我们来看一下更复杂的情况。

图5. 混和情况1
图5演示了当国家记录为模式1的时候可能出现的更复杂情况,在这种情况下,重定向指向的位置仍然是个重定向,不过第二次重定向为模式2。大家不用担心,没有模式3了,这个重定向也最多只有两次,并且如果发生了第二次重定向,则其一定为模式2,而且这种情况只会发生在国家记录上,对于地区记录,模式1和模式2是一样的,地区记录也不会发生2次重定向。不过,这个图还可以更复杂,如图7:

图6. 混和情况2
图6是模式1下最复杂的混和情况,不过我想应该也很好理解,只不过地区记录也来重定向而已,有一点我要提醒你,如果重定向的地址是0,则表示未知的地区名。
所以我们总结如下:一条IP记录由[IP地址][国家记录][地区记录]组成,对于国家记录,可以有三种表示方式:字符串形式,重定向模式1和重定向模式2。对于地区记录,可以有两种表示方式:字符串形式和重定向,另外有一条规则:重定向模式1的国家记录后不能跟地区记录。按照这个总结,在这些方式中合理组合,就构成了IP记录的所有可能情况。
设计的理由
在我们继续去了解索引区的结构之前,我们先来了解一下为何记录区的结构要如此设计。我想你可能想到了答案:字符串重用。没错,在这种结构下,对于一个国家名和地区名,我只需要保存其一次就可以了。我们举例说明,为了表示方便,我们用小写字母代表IP记录,C表示国家名,A表示地区名:
有两条记录a(C1, A1), b(C2, A2),如果C1 = C2, A1 = A2,那么我们就可以使用图3显示的结构来实现重用
有三条记录a(C1, A1), b(C2, A2), c(C3, A3),如果C1 = C2, A2 = A3,现在我们想存储记录b,那么我们可以用图6的结构来实现重用
有两条记录a(C1, A1), b(C2, A2),如果C1 = C2,现在我们想存储记录b,那么我们可以采用模式2表示C2,用字符串表示A2
你可以举出更多的情况,你也会发现在这种结构下,不同的字符串只需要存储一次。
了解索引区
在"了解文件头"部分,我们说明了文件头实际上是两个指针,分别指向了第一条索引和最后一条索引的绝对偏移。如图8所示:

图8. 文件头指向索引区图示
实在是很简单,不是吗?从文件头你就可以定位到索引区,然后你就可以开始搜索IP了!每条索引长度为7个字节,前4个字节是起始IP地址,后三个字节就指向了IP记录。这里有些概念需要说明一下,什么是起始IP,那么有没有结束IP?假设有这么一条记录:166.111.0.0 - 166.111.255.255,那么166.111.0.0就是起始IP,166.111.255.255就是结束IP,结束IP就是IP记录中的那头4个字节,这下你应该就清楚了吧。于是乎,每条索引配合一条记录,构成了一个IP范围,如果你要查找166.111.138.138所在的位置,你就会发现166.111.138.138落在了166.111.0.0- 166.111.255.255 这个范围内,那么你就可以顺着这条索引去读取国家和地区名了。那么我们给出一个最详细的图解吧:

图9. 文件详细结构
现在一切都清楚了是不是?也许还有一点你不清楚,QQWry.dat的版本信息存在哪里呢? 答案是:最后一条IP记录实际上就是版本信息,最后一条记录显示出来就是这样:255.255.255.0255.255.255.255 纯真网络 2004年6月25日IP数据。OK,到现在你应该全部清楚了。
Demo
下一步:我给出一个读取IP记录的程序片断,此片断摘录自LumaQQ源文件edu.tsinghua.lumaqq.IPSeeker.java,如果你有兴趣,可以下载源代码详细看看。
/** *//**
* 给定一个ip国家地区记录的偏移,返回一个IPLocation结构
* @param offset 国家记录的起始偏移
* @return IPLocation对象
*/
private IPLocation getIPLocation(long offset) {
try {
// 跳过4字节ip
ipFile.seek(offset + 4);
// 读取第一个字节判断是否标志字节
byte b = ipFile.readByte();
if(b == REDIRECT_MODE_1) {
// 读取国家偏移
long countryOffset = readLong3();
// 跳转至偏移处
ipFile.seek(countryOffset);
// 再检查一次标志字节,因为这个时候这个地方仍然可能是个重定向
b = ipFile.readByte();
if(b == REDIRECT_MODE_2) {
loc.country = readString(readLong3());
ipFile.seek(countryOffset + 4);
} else
loc.country = readString(countryOffset);
// 读取地区标志
loc.area = readArea(ipFile.getFilePointer());
} else if(b == REDIRECT_MODE_2) {
loc.country = readString(readLong3());
loc.area = readArea(offset + 8);
} else {
loc.country = readString(ipFile.getFilePointer() - 1);
loc.area = readArea(ipFile.getFilePointer());
}
return loc;
} catch (IOException e) {
return null;
}
}
/** *//**
* 从offset偏移开始解析后面的字节,读出一个地区名
* @param offset 地区记录的起始偏移
* @return 地区名字符串
* @throws IOException 地区名字符串
*/
private String readArea(long offset) throws IOException {
ipFile.seek(offset);
byte b = ipFile.readByte();
if(b == REDIRECT_MODE_1 || b == REDIRECT_MODE_2) {
long areaOffset = readLong3(offset + 1);
if(areaOffset == 0)
return LumaQQ.getString("unknown.area");
else
return readString(areaOffset);
} else
return readString(offset);
}
/** *//**
* 从offset位置读取3个字节为一个long,因为java为big-endian格式,所以没办法
* 用了这么一个函数来做转换
* @param offset 整数的起始偏移
* @return 读取的long值,返回-1表示读取文件失败
*/
private long readLong3(long offset) {
long ret = 0;
try {
ipFile.seek(offset);
ipFile.readFully(b3);
ret |= (b3[0] & 0xFF);
ret |= ((b3[1] << 8) & 0xFF00);
ret |= ((b3[2] << 16) & 0xFF0000);
return ret;
} catch (IOException e) {
return -1;
}
}
/** *//**
* 从当前位置读取3个字节转换成long
* @return 读取的long值,返回-1表示读取文件失败
*/
private long readLong3() {
long ret = 0;
try {
ipFile.readFully(b3);
ret |= (b3[0] & 0xFF);
ret |= ((b3[1] << 8) & 0xFF00);
ret |= ((b3[2] << 16) & 0xFF0000);
return ret;
} catch (IOException e) {
return -1;
}
}
/** *//**
* 从offset偏移处读取一个以0结束的字符串
* @param offset 字符串起始偏移
* @return 读取的字符串,出错返回空字符串
*/
private String readString(long offset) {
try {
ipFile.seek(offset);
int i;
for(i = 0, buf[i] = ipFile.readByte(); buf[i] != 0; buf[++i] = ipFile.readByte());
if(i != 0)
return Utils.getString(buf, 0, i, "GBK");
} catch (IOException e) {
log.error(e.getMessage());
}
return "";
}代码并不复杂,getIPLocation是主要方法,它检查国家记录格式,并针对字符串形式,模式1,模式2采用不同的代码,readArea则相对简单,因为只有字符串和重定向两种情况需要处理。
总结
纯真IP数据库的结构使得查找IP简单迅速,不过你想要编辑它却是比较麻烦的,我想应该需要专门的工具来生成QQWry.dat文件,由于其文件格式的限制,你要直接添加IP记录就不容易了。不过,能查到IP已经很开心了,希望纯真记录越来越多~。
LumaQQ is a Java QQ client which has a reusablepure Java core and SWT-based GUI




