分类目录 ‘Prototype’

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

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

HTML, , 2

CSS2 Cheat Sheet


(全文 …)

Google AJAX Libraries API

作者: seasun

什么是

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

(全文 …)

是一个基于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 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

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

Element对象的方法:

(全文 …)