日志分类:Javascript

推荐:facebox demo效果

2009/04/26 16:39  |  分类:Javascript

上次发了一个鼠标链接的图示效果,今天就放一个Facebox的效果,确实很值得推荐。

还是废话不说,直接看截图:

当然,这个可用的不仅仅是这样的,由于时间的关系,我就不直接做截图了。可以放出一个DEMO大家又兴趣的可以自己去看预览

预览效果

简单的介绍一个用法吧:
1.调用图片的时候很简单,在你需要的地方放置图片,然后添加标价即可。

Girl listening to music

2.调用DIV和图片几乎是以一样的,也是

这里将弹出一个ID为mydiv的DIV容器

这里一定要搞对这个#mydiv ,还有就是要设置弹出的这个DIV,
[code]

这里是一个DIV,设置ID为 mydiv,当然,不可能一开始就让它显示,得现设置隐藏,呵呵。

[/code]

3.通过AJAX弹出一个网页

通过Ajax技术,出来一个内嵌的网页

4.也是和3基本是一样的,不过可以设置内嵌页面的样式:

[code]

通过Ajax调用一个"d.htm" ,并改变内嵌页面的样式

最重要似乎忘记说了:一定要在网页的HEAD部分加人
[code]< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

[/code]

这里也放出下载吧:下载此压缩包

……

一个带图片的提示效果

2009/04/24 10:25  |  分类:Javascript

经常会用到链接加提示的效果,比如文字,链接等等。还见到不用图片的圆角效果,都很不错。今天我放一个带图片的提示效果,推荐!

效果:

这里是预览:

http://www.sonyes.cn/demo/2009-04-24/1/

简要说明:

var tipFollowMouse= true;
var tipWidth= 160;
var offX= 20; // how far from mouse to show tip
var offY= 12;
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "8pt";
var tipFontColor= "#000000";
var tipBgColor= "#DDECFF";
var tipBorderColor= "#000080";
var tipBorderWidth= 3;
var tipBorderStyle= "ridge";
var tipPadding= 4;

var messages = new Array();
messages[0] = new Array('1.gif','这里是白色背景',"#FFFFFF");
messages[1] = new Array('2.gif','这里是蓝色背景',"#DDECFF");
messages[2] = new Array('test.gif','Test description','black','white');

这里是设置提示框的基本代码

其他的多余不解释,主要修改的地方大概是:

第一段–文字名称 大小 颜色 背景颜色 边框颜色 宽度 风格 以及填充

第二段-'1.gif' 这里设置图片的路径,中文部分是设置提示语言文字,后面是设置提示框的背景
颜色

如果有兴趣的可以这里下载点击这里下载

给图片加阴影效果

2009/04/07 23:09  |  分类:Javascript

前一段时间实际工作中用到了图片加阴影的效果,当时是用定位曾做的图片的阴影效果,加了多余的代码进去的。具体例子我下一节贴出来,今天和大家分享另一个图片加阴影的效果。


不过也是各有利弊,请慎之酌之

由浅到深了解JavaScript类

2009/02/26 17:03  |  分类:Javascript

最近在无忧脚本混了一阵子,回复了一些贴子,自己却没有做出什么东东让大家看看,心里有些不安,于是写了下边的一点东西,本来应该发在类封装区的,考虑到那里比较冷,而这篇文章我希望能够帮助到更多的朋友,因此放到这里来了。

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
类是什么?

许多刚接触编程的朋友都可能理解不了类,其实类是对我们这个现实世界的模拟,把它说成“类别”或者“类型”可能会更容易理解一些。比如“人”这种动物就是一个类,而具体某一个人就是“人”这个类的一个实例,“人”可以有许多实例(地球人超过六十亿了),但“人”这个类只有一个。你或许会说那男人和女人不也是人么?怎么只能有一个?其实这里要谈到一个继承的东西,后边才讲,请继续看下去。

如何建立一个类?
在C++中是以class来声明一个类的,JavaScript与C++不同,它使用了与函数一样的function来声明,这就让许多学Jscript的朋友把类与函数混在一起了,在Jscript中函数与类确实有些混,但使用久了自然而然会理解,这篇文章是针对想进攻面向对象编程的朋友而写,就不打算一下子讨论得太深了。
请看下边这个类的定义:

function WuYouUser()
{
this.Name; //名字
}

上边的代码定义了一个WuYouUser(无忧用户)类,它有个属性:Name(名字)。Name就是WuYouUser类的一个属性。
一个类有固定的属性,但类的实例却有不同的属性值,就像我是属于“人”这个类的,性别是男,而我有一个女同学,她也属于“人”类,但她的性别属性值却为女。
那么如何声明某个类的一个实例呢?非常简单:

var Wo = new WuYouUser(); //实例一:“我”
var Biyuan = new WuYouUser(); //实例二:“碧原”(Biyuan哥,不好意思。。。嘿嘿)

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
类的属性

这个Wo(我)就是WuYouUser类的一个实例,它拥有WuYouUser给它的一切:Name属性、Sex属性以及Age属性,我们可以这样子来设置它的属性:

Wo.Name = "泣红亭";

很简单是不是?试着运行

window.document.write(Wo.Name);

看看,是不是输出了我的名字:泣红亭?

同样设置一下碧原兄的属性

Biyuan.Name = "碧原";

运行

window.document.write(Biyuan.Name);

可以看到输出了"碧原",也就说明了Biyuan与Wo同样是WuYouUser类的实例,但却是不同的实体,具有不同的属性值。

属性是可以设置默认值的,无忧里都有记录大家各自发了多少贴子,我们也同样给WuYouUser类添加一个发贴数量的属性ArticleCount

function WuYouUser()
{
this.Name;
this.ArticleCount = 0;
}

一个无忧新用户刚注册完之后他的发贴数量为0,在上边的代码中可以看到直接给属性ArticleCount设置值为0。

可以运行一下这样的代码:

var Wo = new WuYouUser();
window.document.write(Wo.ArticleCount);

可以看到输出了0,说明ArticleCount属性被我们成功设置默认值为0

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
类的方法

方法这个词不大好理解,我觉得说成行为会更容易理解。一个人具有许多共同的行为,比如睡觉、吃饭、走路等等,现在我们给WuYouUser类添加一个发贴的方法。

function WuYouUser()
{
this.Name;
this.ArticleCount = 0;

this.NewArticle = function()
{
/*
*
* 具体如何发贴我们大家都知道,不就是打打字,加加图片再按一下保存之类的按钮么?
* 关于具体如何发贴的代码没有必要在这里写出来,我们要了解的仅仅是方法的定义与使用
* 我们在这里实现一个最简单的功能,也是很重要的功能:给我们的发贴数量加上1!
* 注意:恐龙等级就是这样加出来的,因此呀……大家狂发贴吧。。。
*/

this.ArticleCount++;
}
}

既然定义好了这个方法,我们来试试效果如何:

var Wo = new WuYouUser();
Wo.NewArticle();
document.write(Wo.ArticleCount);

可以看到输出了1,说明我们发贴成功了!真是有历史纪念意义的一刻,离恐龙等级又近一步了。

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
静态属性

静态属性又称公共属性,它不属于某个类的实例,而是直接属于某个类。

比如说无忧用户有一个属性:注册用户的数量,它是属于整个无忧用户的,而不是属于泣红亭或者谁的
静态属性的声明方法是:

类名.prototype.属性名 = 属性值;

比如给WuYouUser类定义一个注册用户的数量Count:

WuYouUser.prototype.Count = 0;

那么如何读取它呢?有两种方法:

1. 直接用 WuYouUser.prototype.Count
2. 使用Wo.Count

这两者没有区别,都是得到0

虽然读取方法可以有两种,但在改变它的时候却得特别小心了,请看下边代码

var Biyuan = new WuYouUser();
WuYouUser.prototype.Count++;
document.write(Wo.Count);
document.write(Biyuan.Count);

你会发现两者的Count属性都是1,也就是说WuYouUser.prototype.Count改变了会影响到各个实例的相应属性,其实原理就是Wo、Biyuan的Count属性与WuYouUser.prototype.Count根本就是同一个!

现在来看另外一段代码:

var Biyuan = new WuYouUser();

Biyuan.Count++; //特别注意一下这里,这是直接改变Biyuan的Count属性
document.write(Biyuan.Count); // 输出 1
document.write(WuYouUser.prototype.Count); //输出 0
document.write(Wo.Count); //同样输出0,为什么?

可以看到如果直接修改实例的静态属性值,那么会出现其它实例甚至类的静态属性与它不同步了?这是因为直接修改的时候,该实例会生成一个属于该实例的属性Count,这个时候Biyuan.Count不再与WuYouUser.prototype.Count是同一个了,也不与Wo.Count是同一个,这个Count属性是属于Biyuan自己所有的,以后改变了它也只是影响它自己而已。

因此如果不是特别的需要,建议不管在读取还是赋值的时候,都统一使用WuYouUser.prototype.Count这样的方式,以做到万无一失!

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
静态方法

与静态属性相似,它也有个另称:公共方法,同样属于类本身的。

静态方法的定义方式是:

类名.方法名 = function(参数1,参数2…参数n)
{
//方法代码
}

我们现在就来定义一个无忧用户类的注册新用户静态方法:

WuYouUser.prototype.AddOne = function()
{
//*** 同样具体代码不写出来,给静态属性Count增加1,表示注册用户数量又多一个
WuYouUser.prototype.Count++;
}

现在我们来看看如何用它,同样有两种方法:

1.直接使用WuYouUser.prototype.AddOne()
2.使用某实例的AddOne()

这两种方法没有什么不同:

var Wo = new WuYouUser();
var Biyuan = new WuYouUser();
document.write(WuYouUser.prototype.Count); // 0

Wo.AddOne();
document.write(WuYouUser.prototype.Count); // 1
document.write(Wo.Count); // 1
document.write(Biyuan.Count); // 1

WuYouUser.prototype.AddOne();
document.write(WuYouUser.prototype.Count); // 2
document.write(Wo.Count); // 2
document.write(Biyuan.Count); // 2

可以看出不管是使用Wo.AddOne()还是WuYouUser.prototype.AddOne()效果都是一样的,都是给WuYouUser.prototype.Count加上1

现在再看一段代码:
function NewClass() //由于上边的WuYouUser类不合适当这个例子的代码,我声明了一个新类NewClass
{
this.Name = "泣红亭"; //这里默认值为我的名字
}

NewClass.prototype.ChangeName = function(NewName)
{
this.Name = NewName;
}

var Wo = new NewClass();
Wo.ChangeName("郑运涛"); //我的真名

可以看到Wo.Name确实已经变成了"郑运涛",这个方法似乎是可以用的,但里边是不是内有天机呢?
再看下边的代码,类的定义以及ChangeName的定义我们照样,但改变一下下边的代码:

NewClass.prototype.ChangeName("郑运涛");
document.write(NewClass.Name); //undefined,即未定义
document.write(NewClass.prototype.Name); //郑运涛
var Wo = new NewClass();
document.write(Wo.Name); //泣红亭

可以看到我们并没有定义NewClass.prototype.Name这个静态属性,但编译器给我们自己加了一个。
可是再看下边输出Wo.Name,它并不是为"郑运涛",而是原来的默认值"泣红亭",说明了什么?
其实很简单,看一下NewClass的定义里已经有Name这个属性,因此Wo也有自己的Name属性,它跟NewClass.prototype.Name并不是同一个的,因此就还是那样子。

那为什么前一个例子运行了Wo.ChangeName("郑运涛")却能够实现改变Wo.Name属性呢?其实在这里跟改变Wo.Count的值是同一个道理,编译器自动给Wo增加了一个方法ChangeName,这个方法代码与NewClass.prototype.ChangeName一样,但Wo.ChangeName是Wo这个实例所特有的,而非NewClass.prototype.ChangeName!

分析可知道在静态方法里尽量不要使用this这样的关键字来引用实例本身的属性,除非你有特别的目的,而且能够清楚地明白这里边的运行机制!

如果真的需要在静态方法里使用this,可以直接把this当作参数传进去:

NewClass.ChangeName = function(This,NewName) //注意这里是This,不是this
{
This.Name = NewName;
}

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
构造函数

一个类在初始化的时候其实也是一个函数的执行过程,这个函数就是构造函数,我们看一下下边的代码:

function WuYouUser()
{
this.Name = "泣红亭"; //默认定义为泣红亭
alert(this.Name);
}
var Wo = new WuYouUser();//可以看到出现一个窗口显示泣红亭三个字

可以看出类的定义不仅仅是定义了它的属性与方法,还同时可以加入一些代码,而这些代码就是该类的构造函数的代码,在实例声明过程中被执行!
其实说起来,类的属性与类的方法都是在构造函数里执行定义的,看下边的代码:

function WuYouUser()
{
this.Name = "泣红亭";
return;
this.Sex = "男";
}
var Wo = new WuYouUser();
document.write(Wo.Name); //泣红亭
document.write(Wo.Sex); //undefined,即未定义

看得出什么?Sex属性是在return;之后的,而WuYouUser类的构造函数遇到return即停止运行,换句话说this.Sex = "男";这一行是没有被执行,即Sex属性根本没有被定义!

构造函数可以有参数,参数值在声明实例的时候被传入:
function WuYouUser(Name)
{
this.Name = Name;
}
var Wo = new WuYouUser("泣红亭");
document.write(Wo.Name); //泣红亭

构造函数不需要返回值,但如果你设置了返回值,可以把它当成一个函数来使用。
function Sum(a, b)
{
this.a = a;
this.b = b;
return this.a + this.b;
}
document.write(Sum(12, 23)); //输出的是12与23的和35
var Obj = new Sum(12,23);
document.write(Obj.a) // 12
document.write(Obj.b) // 23

感觉挺奇妙,对吧?我写这文章写着写着也觉得挺奇妙的,呵呵!

但强烈建议不要把一个类当成一个函数来使用!如果你需要的是一个函数,请直接写成函数而不要写成类,以免搞混了。

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
继承

继承这个词在面向对象的编程里是非常重要的,虽然JavaScript并不是真正面向对象的语言,而是跟VB一样是基于对象的语言,它同样提供了继承机制。

文章开头时谈到了男人与女人,这也同样是两个不同的类,但却具有相同的一些属性以及方法,而这些相同的特性是来自“人”这个类的,换句话说男人与女人继承了“人”的所有特性!但是男人与女人却有其不同的地方,编程语言里的继承也一样,一个类A继承了另一个类B,那么类B就是类A的父类,类A就是类B的派生类,也称为子类。比如男人就是人的派生类,而人就是男人的父类。最高一级的类称为基类,想象一下就可以明白,男人继承自人,男孩继承自男人,人就是男孩的基类,男人就是男孩的父类。

>>>>>>>>>>>>>>>>>>>>
题外:多重继承

这里再涉及一个多重继承的话题,但如果你仅仅是学JavaScript的话就没有必要看下去,因为JavaScript不提供多重继承,准确一点说没有一种简单而标准的方法来实现多重继承(其实是有办法实现的,只不过麻烦了一点,而且确实没有必要)。

在C++中是有多重继承的概念的,这里是讨论JavaScript,因此不打算讲,只是说说它的一点点思想以供参考。

在上边男孩的继承问题中,男孩其实不仅仅是继承自男人,还继承自孩子(有男孩子,也有女孩子)这个类,因此,它同时继承了两个类:男人与男孩,这就是所谓的多重继承。

好,这个问题打住,我们还是回归主题。
>>>>>>>>>>>>>>>>>>>>

先看第一个类的定义:

function A()
{
this.Name = "泣红亭";
alert(this.Name);
}

这个类定义了一个属性Name,默认值为"泣红亭"

现在看第二个类的定义:

function B()
{
this.Sex = "男";
alert(this.Sex);
}

定义了一个属性Sex,默认值为"男"

继承的方式就是 子类.prototype = new 父类();
现在我们来让B类继承A类:

B.prototype = new A();

运行这一段代码:

var Obj = new B(); //首先打开警告窗口显示"泣红亭",再显示"男"

可以从上边的结果看出B类继承了A类,拥有了A类的属性Name,并且执行了A类的构造函数,而且A类的构造函数在B类的构造函数执行之前执行。因此我们利用这个可以实现重写父类的方法以及重设置父类某属性的默认值:

function A()
{
this.Name = "泣红亭";
this.Show = function()
{
alert("这是A类的Show方法");
}
alert(this.Name);
}

function B()
{
this.Name = "郑运涛";
this.Show = function()
{
alert("这是B类的Show方法");
}
alert(this.Name);
}

var Obj = new B();
Obj.Show();

结果出现了三次警告窗口,第一个内容为泣红亭,是执行A类的构造函数里的alert(this.Name),那时候Name属性值还为"泣红亭",因为B类的构造函数还没执行,第二次内容为"郑运涛",这是B类里的alert(this.Name),因为B类的构造函数里给Name重赋值为"郑运涛"。最后是调用了Obj.Show(),执行了不是A类的Show方法里的Show(显示"这是A类的Show方法"),而是执行了B类的Show(显示"这是B类的Show方法"),很明显Show方法被重写了。

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
类作为一个对象时的属性与方法(不知道如何简洁地表达,因此用了这么长的题目)

不知道在这里谈这个话题是否有点混人耳目,但又觉得不谈这篇文章就不算完整,因为文章目的就是要让人搞清楚类的方方面面。

看了这一小节的题目,或许你会觉得奇怪,类就是类,怎么会“作为一个对象”呢?在JavaScript里,一切都是对象,包括类!对象可以有属性,可以有方法,类也同样可以有,但这个非常容易跟前边说到的静态属性与静态方法搞混了,因此要仔细看清楚两者的分别!

定义一个类:
function WuYouUser()
{
this.Name = "泣红亭";
}

定义类作为一个对象时的属性:

WuYouUser.Url = "http://www.51js.com"; //静态属性的定义是:WuYouUser.prototype.Url = "http://www.51js.com";
var Wo = new WuYouUser();
document.write(WuYouUser.Url); //http://www.51js.com
document.write(Wo.Url); //undefined,即未定义!注意这里的未定义

从这里可以看出Url这个属性是WuYouUser自个所有,改变了它与其它类以及它的子类完全无关!

引用类的属性只有一个办法,就是类名.属性名,改变它也一样。

定义类作为一个对象时的方法:

WuYouUser.ChangeUrl = function()
{
this.Url = "http://51js.com";
}

你或许会觉得奇怪,这里的this是什么?因为ChangeUrl这个方法是属于对象WuYouUser的,因此this指的就是WuYouUser本身!

可以运行下边的代码试试:

document.write(WuYouUser.Url); // http://www.51js.com
WuYouUser.ChangeUrl();
document.write(WuYouUser.Url); // http://51js.com

明显ChangeUrl直接修改了WuYouUser.Url的值,因此后边才能输出http://51js.com

如果你这一节看不明白,也不要着急,编程嘛,许多东东都只能意会不能言传,而且我又没口才,说不清楚,只要以后多写写代码,多用用类自然而然会体会到这一些,还有可以去看看JSVM的代码,里边几乎每个类都有用到类作为一个对象时的属性与方法。

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
后言

首先感谢你能够有耐心看到这里,我也没想到写了这么多才能够写得像样一点,请别介意。

不管是哪种语言,只要是支持类的,类都在这种语言中占了非常重要的地位,但不是谁都能够掌握它,为了让无忧还没学过类以及对类这个东东还搞不清楚的网友能够清楚一点了解类的概念以及用法,也为了对无忧做点贡献,我写了这篇文章,希望大家能够喜欢。

自己觉得非常有帮助,所以先贴过来保存,同时也谢谢玛兄的大力帮助!

本手册由一揪整理编辑,并保持长期更新,最新版本请自行查找

自从jQuery面世以来,它以其快速、简洁,能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果等打动着所有关注它的人的心,本人也不例外,但长期以来,类似与本手册的(带查询功能),仅仅只有kuomart(这里不太清楚具体名称,仅仅从本人拥有的手册上找到这个名称,暂时先这样称呼,如有知道请告知!)制作的,但长期没有更新,给大家学习jQuery带来不便。为方便自己也为方便所有爱好jQuery的朋友,本人将CHM重新整理,并和jQuery中文API的整理者 Shawphy 同步更新本CHM手册,以便大家能及时了解其最新资讯!由于本人精力有限,难免出现差错,请谅解并告知 Email !
本CHM手册旨在帮助广大jQuery爱好者快速了解jquery库和jquery开发人员提供一份速查手册。
jQuery能快速,简洁的使用HTML documents, handle events, perform animations,并且能把Ajax交互应用到网页,jQuery能够改变你书写JavaScript的方式,这里提供一下中文版的API手册,1.2版本的,送给大家!

下载地址:http://www.rayfile.com/files/ef90e099-96d4-11dd-97e3-0019d11a795f/

大家经常要把自己感到疑问的代码贴出来,让别的伙伴看一下.别的伙伴还得把它copy下来,然后,再运行,有些麻烦.
现在 jsbin.com 能够保存你的代码,并生成一个链接. 以后你再有什么自己感到疑问的代码,直接写在上面,把链接贴出来
就行了. 如 自己感到疑问的代码贴出来,还能进行AJAX调试,超强,这是我保存的一个例子 : http://jsbin.com/apive/edit

首先请在之间粘贴如下代码:

Step2:

然后在需要加入特效的图片的标签里加入如下代码;
onMouseOver=nereidFade(this,100,10,3) style="FILTER: alpha(opacity=10)" onMouseOut=nereidFade(this,10,10,3)

具体代码是下边的,最近也是一直在努力看这个jQuery插件

JavaScript代码
$( "#example_1" ).accessNews({
headline : "Candy Coated",
speed : "normal",
slideBy : 1
});

其中:
headline:是标题;
speed :是速度;
slideBy :滚动几个;

下载:http://www.reindel.com/accessible_news_slider/accessible-news-slider-1.4.zip

官方:http://www.reindel.com/accessible_news_slider/

js滚动的进度条的4种编程方式

2008/12/28 00:01  |  分类:Javascript

第一种方式,函数式:

XML/HTML代码
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


你的经验是1000,下级是2000


第二种方式,数组式:

XML/HTML代码
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


你的经验是1000,下级是2000



第三种方式,面向对象:

XML/HTML代码
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


你的经验是1000,下级是2000

你的经验是1000,下级是2000


第一,第二种方式扩展不好,第三种方式,面向对象就比较容易扩展。

第四种方式,面向对象二:

XML/HTML代码
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


你的经验是1000,下级是2000

你的经验是1000,下级是2000


这个方式是网友demo在本文中留言的那种烦死,和是第二种方式和第三种方式的“杂交”;这种方式目前比较流行,YUI框架就是使用这种方式的。再次感谢网友demo!!!

期待有更多的好的方式。

让IE支持PNG格式的JS库

2008/11/19 20:23  |  分类:Javascript

介绍

http://www.schillmania.com/content/projects/png/

Demo

http://www.schillmania.com/projects/png/

原理
1.为PNG格式的图片建立一个完全相同的gif格式,在编码里面使用gif图片
2.利用IE支持DXImageTransform.Microsoft.AlphaImageLoader滤镜来使用PNG格式转换gif为png图片,并将png图片作为背景显示,首先检测浏览器,接下来判断class为png的元素,完成替换

使用
1.在调用png.js
下载地址:http://www.schillmania.com/projects/png/png-demo.zip
2.用类png标记需要使用png格式的地方
首先建立两张同样的图片格式为别为png和gif,一是类库需要,二是防止IE被禁后破坏视觉效果
前景图片
背景图片

3.在之前加入

总结
这样做png图片使用起来就方便多了,不用重复的去使用IE滤镜,比起手动使用IE滤镜同时加载的图片数量加倍,增加并发连接数

注:现在有了这种好办,完全可以抛弃以前那种特别古老原始的办法了!

此文转自:http://www.css88.com/article.asp?id=128

Pages: Prev 1 2 3 Next