cloudgamer
- 浏览: 61055 次
- 性别:
- 来自: 顺德
-
最新评论
-
liuxf1122：
不支持最新的IE9、10和11！修改了也不行，不知如何是好啊！ ...
JavaScript 工具库：Cloudgamer JavaScript Library v0.1 发布 -
gongyeye：
$$E.addEvent( this._container, ...
JavaScript 工具库：Cloudgamer JavaScript Library v0.1 发布 -
kingliu：
很好，很强大，学习了
JavaScript 工具库：Cloudgamer JavaScript Library v0.1 发布 -
lwkjob：
非常强大谢谢
图片延迟加载(按需加载)效果 -
zxh277100963：
判断ie版本 错误，我明细是IE8的判断出来是IE7
JavaScript 工具库：Cloudgamer JavaScript Library v0.1 发布
文章列表
弹出层就是相对文档或窗口定位的一个层，一般用来显示提示信息、广告等内容，还可以配合覆盖层来锁定页面。
在仿Lightbox效果中，已经基本实现了这个效果，这次主要改进了ie6在fixed时的抖动问题。
此外，还增加了一个用来兼容ie6的fixed的方法，覆盖层也重新“包装”，程序也改成组件的结构。
兼容：ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0
前台效果预览
完整实例下载
程序说明
【实现原理】
弹出层的基本原理在仿Lightbox效果中已经说的差不多了。
关键的地方就是定位，一般相对文档的定位用ab ...
一般的平面效果，通过改变水平和垂直坐标就能实现，再加上深度，就能在视觉上的产生3D（三维）的效果。
程序就是模拟这样一个三维空间，里面的图片会根据三维坐标显示在这个空间。
很久以前就看过一个3DRoom效果，是用复 ...
以前要实现图片的旋转或翻转，只能用ie的滤镜来实现，虽然canvas也实现，但ie不支持而且不是html标准。
css3出来后，终于可以用标准的transform来实现变换，而canvas也已成为html5标准的一部分。
css3和html5使web变得越来越强大，各种新奇的技术正等待我们发掘。
本程序分别通过滤镜(ie)、ccs3和canvas来实现图片的旋转、缩放和翻转变换效果，可以用作图片查看器。
有如下特色：
1，用滤镜、ccs3和canvas实现相同的变换效果；
2，可任意角度旋转；
3，可任意角度翻转；
4，可扩展滚轮缩放；
5，可扩展拖动旋转。
兼容：ie6/7/8, firefo ...
滑动展示效果主要用在图片或信息的滑动展示，也可以设置一下做成简单的口风琴（Accordion）效果。这个其实就是以前写的图片滑动展示效果的改进版，那是我第一篇比较受关注的文章，是时候整理一下了。有如下特色：1，有四 ...
上一篇ImageZoom已经对图片放大效果做了详细的分析，这次在ImageZoom的基础上进行扩展，实现更多的效果。 主要扩展了原图和显示框的展示模式，有以下几种模式： "follow" 跟随模式：显示框能跟随鼠标移动的效果； "handle" 拖柄模式：原图上有一个拖柄来标记显示范围； "cropper" 切割模式：原图用不透明的来标记显示范围，其他部分用半透明显示； "handle-cropper" 拖柄切割模式：拖柄模式和切割模式的混合版，同时用透明度和拖柄来标记显示范围。 当然更多的扩展等待你的想象力来发掘。 ...
这个效果也叫放大镜效果，最早好像在ppg出现的，之后就有了很多仿制品出来了。
一般用于放大查看商品图片，在凡客，京东商城，阿里巴巴等都有类似的效果。
好处是能在原图附近对图片进行局部放大查看，而且可以通过鼠标控制查看的部位。
这个程序有以下特点：
1，支持使用原图放大或新图片设置大图；
2，大图完成载入前使用原图放大代替，减少操作等待时间；
3，支持鼠标滚动缩放大图；
4，可以通过设置显示范围或显示框大小设置显示尺寸；
5，可以设置是否自动隐藏显示框；
6，支持插件形式的扩展来实现更多的功能（下一篇再详细介绍）。
兼容：ie6/7/8, firefox 3.6.2, opera 10.51, s ...
之前在做一个图片浏览效果时，要看后面的小图必须等到前面的加载完，而且大图的位置是在大量的小图后面，导致大图要等到小图都加载完才能显示，为了解决这个问题，就想到了Lazyload效果。现在很多网站都用了类似的效果，如淘宝、Bing等。这个图片延迟加载效果是在Lazyload的基础上扩展的，主要扩展了获取img元素，获取src和图片加载的部分。兼容：ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0其中safari和chrome部分功能不支持。
效果图
在线效果预览
程序说明【获取图片】先定义filt ...
Lazyload是通过延迟加载来实现按需加载，达到节省资源，加快浏览速度的目的。网上也有不少类似的效果，这个Lazyload主要特点是：支持使用window（窗口）或元素作为容器对象；对静态（位置大小不变）元素做了大量的优化；支持 ...
随着浏览器安全性的提高，要实现图片预览也越来越困难。不过群众的智慧是无限的，网上也有很多变通或先进的方法来实现。在研究了各种预览方法后，作为总结，写了这个程序，跟大家一起分享。上次写的简便无刷新文件上传系统最初的目的就是用来实现这个图片预览效果。兼容：ie6/7/8, firefox 3.5.5后台支持下还兼容：opera 10.10, safari 4.0.4, chrome 3.0 详细程序说明和效果预览请看这里完整实例下载（asp.net版）完整实例下载（asp版）
由felsenlee提供的jsp版：完整实例下载（jsp版）
程序说明【基本原理】图片预览主要包括两个部分 ...
之前写过一个仿163网盘无刷新多文件上传系统，已经对无刷新上传文件的原理做了详细的分析。而这次的系统主要是针对单个file控件的，便携版，使用更简单，还有更深入的分析。兼容：ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0效果预览完整实例下载（.net版本） 完整实例下载（asp版本）
var QuickUpload = function(file, options) {
this.file = $$(file);
this._sending = false;//是否正在上传
this._tim ...
研究了一年多的js，也差不多写一个自己的js库了。
我写这个不算框架，只是一个小型的js工具库，所以我用的名字是Library。
主要集合了我写js时一些常用的方法，并参考了prototype.js，jquery，google，百度，有啊等框架。
这个工具库的主要特点是：
【跨浏览器】
能在以下浏览器使用：IE6，IE7，IE8，Firefox 3.5.3，Chrome 3.0，Safari 4.0.3，Opera 10.10
ie系列是必须的，其他能支持最新版本就够了。
【使用命名空间】
当然不是真正“命名空间”，只是一些全局变量，用途相似而已。
有如下命名空间：
...
上一个版本（第一版请看这里）基本实现了多级联动和浮动菜单的功能，但效果不是太好，使用麻烦还有些bug，实用性不高。 这次除了修改已发现的问题外，还对程序做了大幅调整和改进，使程序实用性更高，功能更强大。
详细程序说明和效果预览请看这里 完整实例下载
程序原理程序最关键的地方是多级联动，先大概说明一下：首先第一级的菜单元素整理好后，从他们开始，当某个菜单元素触发显示下级菜单时，准备好下一级的容器元素，并把下一级的菜单元素放进去，再定位并显示容器元素。里面的菜单元素又可以触发显示下级菜单，然后按上面的步骤执行下去。这样一级一级的递推下去，形成多级的联动菜单。程序说明【容器对象 ...
本来想做一个集合浮动定位和鼠标跟随的tooltips效果，但发现定位和鼠标跟随在一些关键的地方还是不同的，还是分开来吧。 这个效果本身难度不大，主要在程序结构和扩展中下了些功夫，务求用起来更方便，能用在更多的地方 ...
近来有客户要求用table显示一大串数据，由于滚动后就看不到表头，很不方便，所以想到这个效果。上次做table排序对table有了一些了解，这次更是深入了解了一番，发现table原来是这么不简单。还不清楚这个效果叫什么，就叫行定位吧，本来想把列定位也做出来，但暂时还没这个需求，等以后有时间再弄吧。在淘宝的商品搜索页也看到类似的效果，但淘宝的不是table，只是li，在table相对会复杂一些。要说明一下的是，我这个效果是用在一些普通的产品列表，当数据比较多时提高用户体验，而不是单单做数据显示，跟excel那样的方式是不同的。效果预览 完整实例下载程序原理
一开始的需求只是表头部分在滚动时能一直 ...
近来看了Dean的“Convert any colour value to hex in MSIE”，终于解决了根据关键字获取颜色rgb值的问题。顺便把程序也重新整理一番，并使用了最近整理的工具库。
效果预览
效果在线演示
完整实例下载
程序说明
【ColorGrads颜色梯度】
程序ColorGrads的作用是根据颜色集合和渐变级数生成颜色梯度集合。渐变级数的意思是分多少步完成渐变。
网页设计中的颜色是用RGB色彩模式呈现的。在这个模式中每种颜色可以用三个代表红(r)、绿(g)、蓝(b)的颜色值（0到255）来表示。
从w3c的Colors部分看到标 ...