- 博客(47)
- 收藏
- 关注
RSS订阅AlertBox 弹出层（信息提示框）效果
弹出层就是相对文档或窗口定位的一个层，一般用来显示提示信息、广告等内容，还可以配合覆盖层来锁定页面。在[url=http://www.cnblogs.com/cloudgamer/archive/2008/09/15/1290954.html]仿Lightbox效果[/url]中，已经基本实现了这个效果，这次主要改进了ie6在fixed时的抖动问题。此外，还增加了一个用来兼容ie6的fix...
2010-10-11 11:06:00
128
JavaScript 图片3D展示空间（3DRoom）
一般的平面效果，通过改变水平和垂直坐标就能实现，再加上深度，就能在视觉上的产生3D（三维）的效果。程序就是模拟这样一个三维空间，里面的图片会根据三维坐标显示在这个空间。很久以前就看过一个[url=http://www.dhteumeuleu.com/mandatory-upgrade/]3DRoom[/url]效果，是用复杂的计算实现的。在上一篇[url=http://www.itey...
2010-09-20 09:59:21
124
ccs3/滤镜/canvas的图片旋转/缩放/翻转变换效果
以前要实现图片的旋转或翻转，只能用ie的滤镜来实现，虽然canvas也实现，但ie不支持而且不是html标准。css3出来后，终于可以用标准的transform来实现变换，而canvas也已成为html5标准的一部分。css3和html5使web变得越来越强大，各种新奇的技术正等待我们发掘。本程序分别通过滤镜(ie)、ccs3和canvas来实现图片的旋转、缩放和翻转变换效果，可以用作...
2010-08-21 13:48:00
321
SlideView 图片滑动（扩展/收缩）展示效果
滑动展示效果主要用在图片或信息的滑动展示，也可以设置一下做成简单的口风琴（Accordion）效果。这个其实就是以前写的图片滑动展示效果的改进版，那是我第一篇比较受关注的文章，是时候整理一下了。有如下特色：1，有四种方向模式选择；2，结合tween算法实现多种滑动效果；3，能自动根据滑动元素计算展示尺寸；4，也可自定义展示或收缩尺寸；5，可扩展自动切换功能；6，可扩展滑动提示功能。兼容：ie6/7...
2010-07-30 08:52:23
207
ImageZoom 图片放大效果（扩展篇）
上一篇ImageZoom已经对图片放大效果做了详细的分析，这次在ImageZoom的基础上进行扩展，实现更多的效果。 主要扩展了原图和显示框的展示模式，有以下几种模式： "follow" 跟随模式：显示框能跟随鼠标移动的效果； "handle" 拖柄模式：原图上有一个拖柄来标记显示范围； "cropper" 切割模式：原图用不透明的来标记显示范围，其他部分用半透明显示； "handle-cropp...
2010-04-16 21:32:08
150
ImageZoom 图片放大效果
这个效果也叫放大镜效果，最早好像在ppg出现的，之后就有了很多仿制品出来了。一般用于放大查看商品图片，在凡客，京东商城，阿里巴巴等都有类似的效果。好处是能在原图附近对图片进行局部放大查看，而且可以通过鼠标控制查看的部位。这个程序有以下特点：1，支持使用原图放大或新图片设置大图；2，大图完成载入前使用原图放大代替，减少操作等待时间；3，支持鼠标滚动缩放大图；4，可以通过设...
2010-04-07 21:03:26
277
图片延迟加载(按需加载)效果
之前在做一个图片浏览效果时，要看后面的小图必须等到前面的加载完，而且大图的位置是在大量的小图后面，导致大图要等到小图都加载完才能显示，为了解决这个问题，就想到了Lazyload效果。现在很多网站都用了类似的效果，如淘宝、Bing等。这个图片延迟加载效果是在Lazyload的基础上扩展的，主要扩展了获取img元素，获取src和图片加载的部分。兼容：ie6/7/8, firefox 3.5.5, op...
2010-03-11 21:13:31
108
原创 Lazyload 延迟加载(缓载)效果
Lazyload是通过延迟加载来实现按需加载，达到节省资源，加快浏览速度的目的。网上也有不少类似的效果，这个Lazyload主要特点是：支持使用window（窗口）或元素作为容器对象；对静态（位置大小不变）元素做了大量的优化；支持垂直、水平或同时两个方向的延迟。由于内容比较多，下一篇再介绍图片延迟加载效果。兼容：ie6/7/8, firefox 3.5.5, opera 10.10, safari...
2010-02-22 09:58:25
180
原创 JavaScript 图片预览效果
随着浏览器安全性的提高，要实现图片预览也越来越困难。不过群众的智慧是无限的，网上也有很多变通或先进的方法来实现。在研究了各种预览方法后，作为总结，写了这个程序，跟大家一起分享。上次写的简便无刷新文件上传系统最初的目的就是用来实现这个图片预览效果。兼容：ie6/7/8, firefox 3.5.5后台支持下还兼容：opera 10.10, safari 4.0.4, chrome 3.0 详细程序说...
2009-12-30 21:31:22
122
简便无刷新文件上传系统
之前写过一个仿163网盘无刷新多文件上传系统，已经对无刷新上传文件的原理做了详细的分析。而这次的系统主要是针对单个file控件的，便携版，使用更简单，还有更深入的分析。兼容：ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0效果预览完整实例下载（.net版本） 完整实例下载（asp版本） var QuickUpload =...
2009-12-03 09:51:32
70
JavaScript 工具库：Cloudgamer JavaScript Library v0.1 发布
研究了一年多的js，也差不多写一个自己的js库了。 我写这个不算框架，只是一个小型的js工具库，所以我用的名字是Library。 主要集合了我写js时一些常用的方法，并参考了prototype.js，jquery，google，百度，有啊等框架。 这个工具库的主要特点是： [b]【跨浏览器】 [/b]能在以下浏览器使用：IE6，IE7，IE8，Firefox 3.5...
2009-10-29 08:19:00
98
JavaScript 多级联动浮动菜单 (第二版)
上一个版本（第一版请看这里）基本实现了多级联动和浮动菜单的功能，但效果不是太好，使用麻烦还有些bug，实用性不高。 这次除了修改已发现的问题外，还对程序做了大幅调整和改进，使程序实用性更高，功能更强大。 详细程序说明和效果预览请看这里 完整实例下载 程序原理程序最关键的地方是多级联动，先大概说明一下：首先第一级的菜单元素整理好后，从他们开始，当某个菜单元素触发显示下级菜单时...
2009-08-10 00:54:00
174
JavaScript 浮动定位提示效果
本来想做一个集合浮动定位和鼠标跟随的tooltips效果，但发现定位和鼠标跟随在一些关键的地方还是不同的，还是分开来吧。 这个效果本身难度不大，主要在程序结构和扩展中下了些功夫，务求用起来更方便，能用在更多的地方。 程序特点 1，同一个提示框用在多个触发元素时，只需一个实例； 2，显示和隐藏分别有点击方式和触发方式选择； 3，能设置延时显示和隐藏； 4，有25种预设定位位置； 5，可在预设定位基础...
2009-07-07 08:23:00
139
JavaScript Table行定位效果
近来有客户要求用table显示一大串数据，由于滚动后就看不到表头，很不方便，所以想到这个效果。上次做table排序对table有了一些了解，这次更是深入了解了一番，发现table原来是这么不简单。还不清楚这个效果叫什么，就叫行定位吧，本来想把列定位也做出来，但暂时还没这个需求，等以后有时间再弄吧。在淘宝的商品搜索页也看到类似的效果，但淘宝的不是table，只是li，在table相对会复杂一些。要说...
2009-05-18 14:02:00
195
JavaScript 颜色梯度和渐变效果
近来看了Dean的“Convert any colour value to hex in MSIE”，终于解决了根据关键字获取颜色rgb值的问题。顺便把程序也重新整理一番，并使用了最近整理的工具库。 效果预览 效果在线演示 完整实例下载 程序说明【ColorGrads颜色梯度】程序ColorGrads的作用是根据颜色集合和渐变级数生成颜色梯度集合。渐变级...
2009-03-11 08:24:00
327
JavaScript Tween算法及缓动效果
Flash做动画时会用到Tween类，利用它可以做很多动画效果，例如缓动、弹簧等等。我这里要教大家的是怎么利用flash的Tween类的算法，来做js的Tween算法，并利用它做一些简单的缓动效果。前台效果预览完整实例下载效果说明首先大家到这里下载flash的as脚本（建议看看这里的demo），1.0和2.0都可以（里面的算法都一样）。例如打开2.0的可以看到几个as文件，每个文件对应一个Tw...
2009-01-06 09:17:00
265
JavaScript 滑动条效果
这个滑动条（拖动条）效果，一开始是参考了BlueDestiny的slider和Apple产品展示的样式，做了程序的原型。 在做了拖放效果之后，我想应该可以做一个更好的了，所以重做一遍，完善和扩展了一些功能。 碍于时间没有做得很强大，都是一些基本功能，希望各位多提意见！ 完整实例下载 欢迎来我的blog交流 效果预览（代码太多只能贴个图了） 预览效果1： 这个是仿Apple滑动条产品展示效果。 除了...
2008-12-24 08:27:00
452
JavaScript 拖拉缩放效果
拖拉缩放效果，实现通过鼠标拖动来调整层的面积（宽高）大小。例如选框效果。 这里的拖拉缩放比一般的选框复杂一点，能设置八个方位（方向）的固定触发点，能设置最小范围，最大范围和比例缩放。 跟拖放效果一样，程序的原型也是在做图片切割效果的时候做出来的。但这个效果的参考少的多，基本上靠自己摸索，走了不少弯路，现在总算把自己想要的效果做出来了，程序跟上一个版本比较也已经“面目全非”，还是觉得有很多需要改进的...
2008-12-03 09:07:00
108
JavaScript 拖放效果
拖放效果，也叫拖拽、拖动，学名Drag-and-drop ，是最常见的js特效之一。如果忽略很多细节，实现起来很简单，但往往细节才是难点所在。这个程序的原型是在做图片切割效果的时候做出来的，那时参考了好几个同类的效果，跟muxrwc和BlueDestiny学习了不少东西。虽然每次整理都觉得很好了，不过每隔一段时间又会发现得某个地方可以改善，某个地方有错误，某些需求需要实现，就像自己学习的知识那样。...
2008-11-17 08:48:00
97
JavaScript 日期联动选择器
一个日期联动选择器，年月日联动显示，准确显示日期（包括闰年日期），可自定义日期范围。 [url=http://www.cnblogs.com/cloudgamer/archive/2008/10/28/1040403.html]效果预览[/url][url=http://files.cnblogs.com/cloudgamer/DateSelector.rar]完整实例下载[/ur...
2008-10-28 10:30:00
73
仿163网盘无刷新多文件上传系统
这个仿163网盘无刷新文件上传系统，并没有用使用.net的控件，完全的手工制作。前台基本上是静态的，跟后台没有关系，所以后台用什么语言做都可以（后面有各个版本的实例下载）。本来觉得这个系统会很复杂，但把每个部分都分析清楚后，其实需要的技术并不高。不过当我把各个功能函数都整理好准备进行封装时，却发现要把程序封装不是那么容易，因为程序跟html的耦合度太高。然后我逐步把程序中操作html相关的部分分离...
2008-10-20 08:20:00
162
JavaScript Table排序
程序的实现的是在客户端对表格进行排序，有以下特点：1，自定义排序列、排序属性（例如innerHTML）、排序数据类型（包括int、float、date、string）、排序顺序（顺序和倒序）；2，自定义排序函数；3，可同时设置多个排序列；网上也有很多其他的table排序函数，但有的是基于数组，有的不够灵活。本程序是在原有table结构上加入功能，套用一个流行词叫“无侵入”。 新版本主要...
2008-10-06 08:24:00
62
图片切割系统
上一阵子做过一个图片切割效果，得到很多人关注。其中有很多人向我询问如何做一个真正的图片切割（裁剪），这里需要声明一下：首先js是不能操作客户端文件的（除非特殊情况），所以图片的切割必须在后台处理，对于客户端的图片可以先上传再切割或者把图片和切割参数一起传递到服务器再处理（上传文件不在本次讨论范围，请自行修改）；还有是通过客户端传递的参数来处理图片，确实能得到展示图或预览图的效果（这是针对有些提...
2008-10-05 00:20:00
358
JavaScript 仿LightBox内容显示效果
近来要做一个LightBox的效果（也有的叫Windows关机效果），不过不用那么复杂，能显示一个内容框就行了。这个效果很久以前就做过，无非就是一个覆盖全屏的层，加一个内容显示的层。不过showbo教了我position:fixed这个新特性，决定重写一遍。先看效果：<script type="text/javascript"><!--var isIE = (document....
2008-09-15 02:57:00
93
JavaScript 渐变效果
程序集合了宽度、高度、透明度、top、left的渐变，可以自定义渐变项目和各个项目的初始值结束值，还能以任意点（定点）为中心渐变。使用该程序能实现很多常见的动画特效，包括大小变换、位置变换、渐显渐隐等等。 效果： <script type="text/javascript">var isIE = (document.all) ? true : false;var $$...
2008-08-27 00:17:00
329
JavaScript blog式日历控件
近来要做一个记事本系统，想找一个合适的日历控件，但网上的都是那种日历选择控件。于是到qq的记事本系统找了一个，但里面的算法有点落后，所以用了它的样式自己写了个。 前台效果预览 完整实例下载 程序说明 【Date】这个日历控件运用了很多Date相关操作和方法。先说说Date对象几个有用的属性：getFullYear：返回年份值getMonth：返回月份值get...
2008-08-23 00:25:00
93
JavaScript 图片切割效果
序一（08/07/21）很久之前就在一个网站的截取相片的功能中看到这个效果，也叫图片裁剪、图片剪切（设置一下也可以做出放大镜等类似的效果）。当时觉得很神奇，碍于水平有限，没做出来。前些日子突然想做一个透镜效果，就突然想到了这个效果，于是找出当年“珍藏”的代码决定一尝所愿。序二（08/12/06）自上一个版本的图片切割效果出来后，虽然也经常看到“框架开发这个如何如何容易”之类的评论，但也受到很...
2008-07-21 01:20:00
358
JavaScript 图片滑动切换效果
序一（08/07/06）看到alibaba的一个图片切换效果，感觉不错，想拿来用用。但代码一大堆的，看着昏，还是自己来吧。由于有了做图片滑动展示效果的经验，做这个就容易得多了。序二（09/03/19）自写了Tween缓动之后就很想重新写过这个效果，近来有点时间，终于可以动手了。除了改成Tween缓动，也改进了程序算法，不过原理还是一样的。 前台效果预览完整实例下载 ...
2008-07-06 01:25:00
358
JavaScript 多级联动select
能够根据自定义的菜单数据和select，自动设置联级的下拉菜单，可定义默认值。效果：<style type="text/css">.sel select{ width:100px;}</style><script type="text/javascript">var $$ = function (id) { return "string" =..
2008-06-24 10:52:00
73
JavaScript 图片变换效果(ie only)
仿照常见的那个图片变换flash做的效果，纯js。不过滤镜变换只对应ie，ff只能看到一般的切换。这个js做的效果最早在sina看到，这里把这个效果封装好方便使用。 前台效果预览 下载完整程序ps：由于有些绿色版ie6会把滤镜功能去掉，所以用这类ie6会看不到效果的，用正宗版本就可以正常浏览了。程序说明：图片未开始转换时，由于没有图片会显示一个红x，所以隐藏图片：this._i...
2008-05-23 12:02:00
95
JavaScript 图片滑动展示效果
看到jQuery实例：图片展示效果后，我也想拿来试试，但我不太喜欢用框架，所以自己做了个。其中的难点在于怎么设计各个滑动对象进行想要的滑动。一开始我想的是利用滑动对象的宽度的变化来实现滑动，但实行起来发现这个只能在理想状态下实现，一般实现起来很困难。所以还是参照了实例中的方法，利用left的变化来实现滑动。 效果预览下载完整测试代码 程序原理：设计之初，先不...
2008-05-13 01:34:00
366
我来做百科(第二十一天)
今天就做“词条预览”吧。这个我参考了百度百科的“词条预览”功能，大概原理是通过提交一个target属性是"_blank"的form，这样会在新窗口中打开目标页，并把数据提交过去。根据这个原理写了如下js代码：//Previewvar oPreview, oLemma, oDetail, oTag, oRefer;function ShowPreview(){ if(!Check(false...
2008-02-23 01:18:00
63
我来做百科(第二十天) E
期间还做了什么。我也记不清楚了，主要还是对系统的改进和修复吧。现在写写打算开发的功能和系统：1 举报系统：举报垃圾信息之类的2 收藏系统：就是会员收藏词条拉3 上传图片：词条的上传图片4 提交信息再提示登录：就是百度百科那样5 预览词条：也是百度百科那样6 做一个排行榜的页面：估计是做成生成静态html的形式暂时是这些拉，休息了。...
2008-02-19 03:56:00
58
我来做百科(第二十天) D
有朋友（注册会员）告诉我，她忘记密码了。对哦，要做一个“找回密码”的系统才行。又找了一下资料，看到一篇不错的文章，介绍了“选择何种方式帮助用户找回密码”，他的结论是： 1〉不采取密码答案和问题 2〉用邮件找回密码 3〉用户自己输入注册邮件 4〉发送到邮件中的是激活地址而非密码 5〉注册时告诉用户这个密码将来要用来找回密码，提供测试邮件帐户能否收到系统的入口。 6〉如果您将遗忘密码保...
2008-02-19 03:47:00
66
我来做百科(第二十天) C
我看到百度贴吧的评论，在会员后台点击评论后会自动跳到该评论所在的页码的页面，而不是简单的锚。我也要做做看。在csdn问了问，估计直接根据id直接取分页数据的话会比较麻烦，所以决定做法是先找到评论所在页的页码，再根据页码来获取该分页的数据。这样就只是一个问题，就是如何根据评论id获取它的所在分页页码。又取csdn问了问，高手果然很多，再结合需要，得到代码如下： /**//// <summar...
2008-02-19 03:28:00
78
我来做百科(第二十天) B
tag系统完成，再修复一些添加词条，修改内容的问题，就可以做数据采集了。数据采集网上的资料很多，再结合自己的需要，写了一下代码：protected void Button1_Click(object sender, EventArgs e) { Lemma lemma = new Lemma(); Response.Write("采集结果：<br/>...
2008-02-19 03:03:00
72
我来做百科(第二十天) A
不知道过了多少天了，凑个整的二十好了。下面写写这段时间的进展吧。上一次写到完成基本的词条管理，内容管理，会员管理，评论管理，接着我做了tag系统。tag系统分了两个表，一个记录tag的内容，一个记录tag和内容的关联。这样的好处是容易处理，也更符合范式（不知有没有说错）。后台管理也不难做。难做的是tag的搜索系统，因为我想做成百度百科那样可以tag和关键字一起查找，还可以多个tag的“和”跟“或...
2008-02-19 02:51:00
53
我来做百科(第十天)
昨天做了词条管理，今天做内容管理啦。其实也差不多，也就是要加个审核功能。接着设一些后台显示页吧。先是查看词条：接着是所有版本：然后是查看内容：词条和内容管理做好后就到会员和评论管理了。有了前面的经验，后面的就更容易了。先是会员管理：包括查看会员：所有编辑：所有评论：会员管理差不多了，接着到评论管理。现在基本是复制，粘贴，再改改，就可以了，是三层结构的结果？包括查看评论：这...
2008-01-27 17:39:00
62
我来做百科(第九天)
今天做一下后台吧。先是页面，以前用的太丑了，还是另找一个吧。网上找了一下，看到有人说动网那个后台不错，于是找来看看。搞了一轮，终于打开后台页面，一看，页面是可以啦，但作为后台是太繁杂了吧。于是改啊改，最后剩下中间那条“关闭打开左栏”是原来的，不过色彩还是保留原来的，还不错啦。再把大概的栏目搞上去就差不多了。这样把左栏搞好了，到右边的样式了。右边主要就一些表格啦。这样样式就差不多了。接着开始做后...
2008-01-26 07:43:00
61
我来做百科(第八天)
今天先来解决一下昨天留下的问题。首先是“只能提交一次的按钮”，在ff中history.back()后按钮仍然是disabled状态。这个问了很久都没有答案，于是自己试啊试，发现在ff中history.back()，页面不会执行onload，即停留在最后提交的状态，而ie会在history.back()后执行onload，但这是浏览器的问题，估计也没办法。垂死挣扎，正要放弃之际，突然发现成功了，立...
2008-01-25 05:40:00
73
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人