cloudgamer的专栏

图片(旋转/缩放/翻转)变换效果(ccs3/滤镜/canvas)

cloudgamer — Tue, 12 Oct 2010 15:13:00 +0800

以前要实现图片的旋转或翻转，只能用ie的滤镜来实现，虽然canvas也实现，但ie不支持而且不是html标准。 css3出来后，终于可以用标准的transform来实现变换，而canvas也已成为html5标准的一部分。 css3和html5使web变得越来越强大，各种新奇的技术正等待我们发掘。本程序分别通过滤镜(ie)、ccs3和canvas来实现图片的旋转、缩放和翻转变换效果，可以用作图片查看器。

JavaScript 多级联动浮动菜单 (第二版)

cloudgamer — Mon, 11 Oct 2010 10:34:00 +0800

上一个版本（第一版请看这里）基本实现了多级联动和浮动菜单的功能，但效果不是太好，使用麻烦还有些bug，实用性不高。这次除了修改已发现的问题外，还对程序做了大幅调整和改进，使程序实用性更高，功能更强大。预览图前台效果预览请下载完整实例查看更多例子程序原理程序最关键的地方是多级联动，先大概说明一下：首先第一级的菜单元素整理好后，从他们开始，当某个菜单元素触发显示下级菜单时，准备好下一级的容器元素，并把下一级的菜单元素放进去，再定位并显示容器元素。里面的菜单元素又可以触发显示下级菜单，然后按上面的步骤执行下去。这样一级一级的递推下去，形成多级的联动菜单。程序说明【容器对象】在多级联动中，每一级都需要一个容器元素来存放菜单元素。程序中每个容器元素都对应一个容器对象，用来记录该容器的相关信息。

AlertBox 弹出层（信息提示框）效果

cloudgamer — Mon, 11 Oct 2010 10:13:00 +0800

弹出层就是相对文档或窗口定位的一个层，一般用来显示提示信息、广告等内容，还可以配合覆盖层来锁定页面。在仿Lightbox效果中，已经基本实现了这个效果，这次主要改进了ie6在fixed时的抖动问题。此外，还增加了一个用来兼容ie6的fixed的方法，覆盖层也重新“包装”，程序也改成组件的结构。兼容：ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0效果预览覆盖select测试AlertBox右下角消息框关闭关闭点击拖动程序说明【实现原理】弹出层的基本原理在仿Lightbox效果中已经说的差不多了。关键的地方就是定位，一般相对文档的定位用absolute就行了。要随屏移动，即相对窗口定位，就用fixed定位。这些实现起来都很简单，除了不支持fixed的ie6。【兼容ie6的fixe

JavaScript 图片3D展示空间（3DRoom）

cloudgamer — Wed, 22 Sep 2010 11:35:00 +0800

一般的平面效果，通过改变水平和垂直坐标就能实现，再加上深度，就能在视觉上的产生3D（三维）的效果。程序就是模拟这样一个三维空间，里面的图片会根据三维坐标显示在这个空间。很久以前就看过一个3DRoom效果，是用复杂的计算实现的。在上一篇图片变换研究过css3的transform之后，就想到一个更简单的方法来实现。

ImageZoom 图片放大效果（扩展篇）

cloudgamer — Wed, 14 Apr 2010 09:49:00 +0800

上一篇ImageZoom已经对图片放大效果做了详细的分析，这次在ImageZoom的基础上进行扩展，实现更多的效果。主要扩展了原图和显示框的展示模式，有以下几种模式："follow" 跟随模式：显示框能跟随鼠标移动的效果；"handle" 拖柄模式：原图上有一个拖柄来标记显示范围；"cropper" 切割模式：原图用不透明的来标记显示范围，其他部分用半透明显示；"handle-cropper" 拖柄切割模式：拖柄模式和切割模式的混合版，同时用透明度和拖柄来标记显示范围。当然更多的扩展等待你的想象力来发掘。兼容：ie6/7/8, firefox 3.6.2, opera 10.51, safari 4.0.4, chrome 4.1效果预览程序说明【扩展模式】上次ImagesLazyLoad使用了继承做扩展，这次用插件的形式来做扩展。先看看基础模式，这些模式是保存在ImageZoom._MODE中的，类似这样的

ImageZoom 图片放大效果

cloudgamer — Thu, 01 Apr 2010 03:44:00 +0800

这个效果也叫放大镜效果，最早好像在ppg出现的，之后就有了很多仿制品出来了。一般用于放大查看商品图片，在凡客，京东商城，阿里巴巴等都有类似的效果。好处是能在原图附近对图片进行局部放大查看，而且可以通过鼠标控制查看的部位。这个程序有以下特点：1，支持使用原图放大或新图片设置大图；2，大图完成载入前使用原图放大代替，减少操作等待时间；3，支持鼠标滚动缩放大图；4，可以通过设置显示范围或显示框大小设置显示尺寸；5，可以设置是否自动隐藏显示框；6，支持插件形式的扩展来实现更多的功能（下一篇再详细介绍）。兼容：ie6/7/8, firefox 3.6.2, opera 10.51, safari 4.0.4, chrome 4.1前台效果预览完整实例下载程序说明【基本原理】首先要有一个img元素作为原图对象，还要有一个容器作为显示框。

ImagesLazyLoad 图片延迟加载效果

cloudgamer — Wed, 03 Mar 2010 09:07:00 +0800

之前在做一个图片浏览效果时，要看后面的小图必须等到前面的加载完，而且大图的位置是在大量的小图后面，导致大图要等到小图都加载完才能显示，为了解决这个问题，就想到了Lazyload效果。现在很多网站都用了类似的效果，如淘宝、Bing等。这个图片延迟加载效果是在Lazyload的基础上扩展的，主要扩展了获取img元素，获取src和图片加载的部分。兼容：ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0 其中safari和chrome部分功能不支持。效果预览图片延迟加载：共有图片张，未载入张程序说明【获取图片】先定义filter函数作为筛选程序：代码var getSrc = opt.getSrc, filter = $$F.bind( this._filter, this, opt["class"],

JavaScript 图片预览效果

cloudgamer — Tue, 22 Dec 2009 21:51:00 +0800

随着浏览器安全性的提高，要实现图片预览也越来越困难。不过群众的智慧是无限的，网上也有很多变通或先进的方法来实现。在研究了各种预览方法后，作为总结，写了这个程序，跟大家一起分享。上次写的简便无刷新文件上传系统最初的目的就是用来实现这个图片预览效果。兼容：ie6/7/8, firefox 3.5.5 后台支持下还兼容：opera 10.10, safari 4.0.4, chrome 3.0

JavaScript 颜色梯度和渐变效果更新

cloudgamer — Tue, 03 Nov 2009 09:58:00 +0800

近来看了Dean的“Convert any colour value to hex in MSIE”，终于解决了根据关键字获取颜色rgb值的问题。顺便把程序也重新整理一番，并使用了最近整理的工具库。看这里效果预览下载完整实例程序说明【ColorGrads颜色梯度】程序ColorGrads的作用是根据颜色集合和渐变级数生成颜色梯度集合。渐变级数的意思是分多少步完成渐变。网页设计中的颜色是用RGB色彩模式呈现的。在这个模式中每种颜色可以用三个代表红(r)、绿(g)、蓝(b)的颜色值（0到255）来表示。从w3c的Colors部分看到标准中颜色的表示形式包括：关键字形式： em { color: red } RGB形式： em { color: #f00 } em { color: #ff0000 }

JavaScript 工具库：Cloudgamer JavaScript Library v0.1 发布

cloudgamer — Thu, 29 Oct 2009 08:05:00 +0800

研究了一年多的js，也差不多写一个自己的js库了。我写这个不算框架，只是一个小型的js工具库，所以我用的名字是Library。主要集合了我写js时一些常用的方法，并参考了prototype.js，jquery，google，百度，有啊等框架。工具库已经在近几个效果中使用：JavaScript 多级联动浮动菜单 (第二版) JavaScript 浮动定位提示效果 JavaScript Table行定位效果 JavaScript Table排序这个工具库的主要特点是：【跨浏览器】能在以下浏览器使用：IE6，IE7，IE8，Firefox 3.5.3，Chrome 3.0，Safari 4.0.3，Opera 10.10ie系列是必须的，其他能支持最新版本就够了。【使用命名空间】当然不是真正“命名空间”，只是一些全局变量，用途相似而已。有如下命名空间：$$：代表Object，保存对象相关方法