分类目录 ‘Prototype’

JavaScript 是 Web 开发与设计中不可或缺的东西,不管是一个简单的网页还是一个专业的站点,也不管你是高手还是菜鸟,如今 JavaScript 库越来越强大,可以胜任许多复杂的工作,然而同时,人们在众多 JavaScript 库面前又觉得无所适从,本文,我们将使用 Google 搜索出排名前 10 位的 JavaScript 库,并对它们逐一进行介绍。
(全文…)

Cheat Sheet 一词在中文中并没有很贴切的对译,大概是考试作弊条一类的东西,这要求 Cheat Sheet 必须短小精悍又覆盖广泛,作为 Web 开发与设计师,免不了在工作时查询大量资料,某个 Web 色值,某个 JavaScript 库的核心语法,这类资料如果攒齐了,怕有半间屋子那么多,如果用 Cheet Sheet 也许几十页纸就够了,本文收集了近百份用于 Web 开发与设计的 Cheet Sheet,你会发现他们非常实用。

HTML, XHTML, CSS2

CSS2 Cheat Sheet


(全文…)

Google AJAX Libraries API

作者: seasun

什么是 AJAX 库 API

AJAX 库 API 是一种内容分布网络,可加载最受欢迎的开源 JavaScript 库的架构。通过使用 Google AJAX API 加载程序的 google.load() 方法,您的应用程序能够迅速从全球任何位置访问不断增长的、最受欢迎的 JavaScript 开源库列表,包括:

(全文…)

phototype 是一个基于prototype的一个处理图片的js扩展脚本,支持旋转、缩放、翻转以及一些特殊等效果。目前是GPL协议,可以点击这里 下载下面为一些例子:

原图如下:

缩放功能的代码及效果如下:

  1. l_oPhoto = new Photo( ) ;
  2. l_oPhoto.resize ( { width:200 } ) ;
  3. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;

翻转功能的代码及效果如下:

  1. l_oPhoto = new Photo( ) ;
  2. l_oPhoto.resize ( { width:200 } ) ;
  3. l_oPhoto.flipV ( ) ; // Flip vertical, use flipH to flip horizontal
  4. document.body .appendChild ( l_oImage.fetch ( ) ) ;

旋转功能的代码及效果如下:

  1. l_oPhoto = new Photo( ) ;
  2. l_oPhoto.resize ( { width:200 } ) ;
  3. l_oPhoto.flipV ( ) ;
  4. l_oPhoto.rotate ( 3 ) ; // rotate 3 degrees
  5. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;

模糊化功能的代码及效果如下:

  1. l_oPhoto = new Photo( ) ;
  2. l_oPhoto.resize ( { width:200 } ) ;
  3. l_oPhoto.flipV ( ) ;
  4. l_oPhoto.rotate ( 3 ) ;
  5. l_oPhoto.dropShadow ( ) ;
  6. l_oPhoto.makeSketchy ( ) ;
  7. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;

灰色调功能的代码及效果如下:

  1. l_oPhoto = new Photo( ) ;
  2. l_oPhoto.resize ( { width:200 } ) ;
  3. l_oPhoto.flipV ( ) ;
  4. l_oPhoto.rotate ( 3 ) ;
  5. l_oPhoto.dropShadow ( ) ;
  6. l_oPhoto.toGreyScale ( ) ;
  7. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;

添加文字功能的代码及效果如下:

  1. l_oPhoto = new Photo( ) ;
  2. l_oPhoto.resize ( { width:200 } ) ;
  3. l_oPhoto.rotate ( 3 ) ;
  4. l_oPhoto.dropShadow ( ) ;
  5. l_oPhoto.addCaption ( ‘Get ajaxorized!’ , ‘1942.ttf’ ) ;
  6. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;

添加图形对象功能的代码及效果如下:

  1. l_oPhoto = new Photo( ) ;
  2. l_oPhoto.resize ( { width:200 } ) ;
  3. l_oPhoto.rotate ( 3 ) ;
  4. l_oPhoto.dropShadow ( ) ;
  5. l_oPhoto.addCaption ( ‘Cheers, Chuck’ , ‘1942.ttf’ ) ;
  6. l_oPhoto.addChuckNorris ( ) ; // every library should have this function imo
  7. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;

另外,Phototype支持链式方法调用。如下:

  1. l_oPhoto = new Photo( ) .load ( “test.jpg” ) .dropShadow ( ) .flipH ( ) .makeSketchy ( ) ;
  2. document.body .appendChild ( l_oPhoto.fetch ( ) ) ;

DOM 模型和 Prototype

作者: seasun

今天介绍一下 DOM 模型和 Prototype框架的一些对象和类,
什么是 DOM模型 –Document Object Module 就是文档对象类型,可以看成是结构化的树形的数据
,闲言少叙书归正传,下面是我最近学习js搜集到的一些document的方法,很实用的。下面将介绍它包含的对象方法。
下面有下载文件:能读懂的就看看下面的prototype.js

Element对象的方法:

(全文…)