JavaScript
关注
分享
扫一扫
文章平均质量分 91
clear1984
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
JavaScript 图片滑动切换效果
序一（08/07/06）看到alibaba的一个图片切换效果，感觉不错，想拿来用用。但代码一大堆的，看着昏，还是自己来吧。由于有了做图片滑动展示效果的经验，做这个就容易得多了。序二（09/03/19）自写了Tween缓动之后就很想重新写过这个效果，近来有点时间，终于可以动手了。除了改成Tween缓动，也改进了程序算法，不过原理还是一样的。 前台效果预览完整实例下载 ...2008-07-06 01:25:00 · 436 阅读 · 0 评论 -
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 · 356 阅读 · 0 评论 -
JavaScript 浮动定位提示效果
本来想做一个集合浮动定位和鼠标跟随的tooltips效果，但发现定位和鼠标跟随在一些关键的地方还是不同的，还是分开来吧。 这个效果本身难度不大，主要在程序结构和扩展中下了些功夫，务求用起来更方便，能用在更多的地方。 程序特点 1，同一个提示框用在多个触发元素时，只需一个实例； 2，显示和隐藏分别有点击方式和触发方式选择； 3，能设置延时显示和隐藏； 4，有25种预设定位位置； 5，可在预设定位基础...2009-07-07 08:23:00 · 202 阅读 · 0 评论 -
JavaScript 图片预览效果
随着浏览器安全性的提高，要实现图片预览也越来越困难。不过群众的智慧是无限的，网上也有很多变通或先进的方法来实现。在研究了各种预览方法后，作为总结，写了这个程序，跟大家一起分享。上次写的简便无刷新文件上传系统最初的目的就是用来实现这个图片预览效果。兼容：ie6/7/8, firefox 3.5.5后台支持下还兼容：opera 10.10, safari 4.0.4, chrome 3.0 详细程序说...原创 2009-12-30 21:31:22 · 199 阅读 · 0 评论 -
ImageZoom 图片放大效果
这个效果也叫放大镜效果，最早好像在ppg出现的，之后就有了很多仿制品出来了。一般用于放大查看商品图片，在凡客，京东商城，阿里巴巴等都有类似的效果。好处是能在原图附近对图片进行局部放大查看，而且可以通过鼠标控制查看的部位。这个程序有以下特点：1，支持使用原图放大或新图片设置大图；2，大图完成载入前使用原图放大代替，减少操作等待时间；3，支持鼠标滚动缩放大图；4，可以通过设...2010-04-07 21:03:26 · 345 阅读 · 0 评论 -
JavaScript 多级联动浮动菜单 (第二版)
上一个版本（第一版请看这里）基本实现了多级联动和浮动菜单的功能，但效果不是太好，使用麻烦还有些bug，实用性不高。 这次除了修改已发现的问题外，还对程序做了大幅调整和改进，使程序实用性更高，功能更强大。 详细程序说明和效果预览请看这里 完整实例下载 程序原理程序最关键的地方是多级联动，先大概说明一下：首先第一级的菜单元素整理好后，从他们开始，当某个菜单元素触发显示下级菜单时...2009-08-10 00:54:00 · 273 阅读 · 0 评论 -
ImageZoom 图片放大效果（扩展篇）
上一篇ImageZoom已经对图片放大效果做了详细的分析，这次在ImageZoom的基础上进行扩展，实现更多的效果。 主要扩展了原图和显示框的展示模式，有以下几种模式： "follow" 跟随模式：显示框能跟随鼠标移动的效果； "handle" 拖柄模式：原图上有一个拖柄来标记显示范围； "cropper" 切割模式：原图用不透明的来标记显示范围，其他部分用半透明显示； "handle-cropp...2010-04-16 21:32:08 · 240 阅读 · 0 评论 -
SlideView 图片滑动（扩展/收缩）展示效果
滑动展示效果主要用在图片或信息的滑动展示，也可以设置一下做成简单的口风琴（Accordion）效果。这个其实就是以前写的图片滑动展示效果的改进版，那是我第一篇比较受关注的文章，是时候整理一下了。有如下特色：1，有四种方向模式选择；2，结合tween算法实现多种滑动效果；3，能自动根据滑动元素计算展示尺寸；4，也可自定义展示或收缩尺寸；5，可扩展自动切换功能；6，可扩展滑动提示功能。兼容：ie6/7...2010-07-30 08:52:23 · 295 阅读 · 0 评论 -
Lazyload 延迟加载(缓载)效果
Lazyload是通过延迟加载来实现按需加载，达到节省资源，加快浏览速度的目的。网上也有不少类似的效果，这个Lazyload主要特点是：支持使用window（窗口）或元素作为容器对象；对静态（位置大小不变）元素做了大量的优化；支持垂直、水平或同时两个方向的延迟。由于内容比较多，下一篇再介绍图片延迟加载效果。兼容：ie6/7/8, firefox 3.5.5, opera 10.10, safari...原创 2010-02-22 09:58:25 · 257 阅读 · 0 评论 -
ccs3/滤镜/canvas的图片旋转/缩放/翻转变换效果
以前要实现图片的旋转或翻转，只能用ie的滤镜来实现，虽然canvas也实现，但ie不支持而且不是html标准。css3出来后，终于可以用标准的transform来实现变换，而canvas也已成为html5标准的一部分。css3和html5使web变得越来越强大，各种新奇的技术正等待我们发掘。本程序分别通过滤镜(ie)、ccs3和canvas来实现图片的旋转、缩放和翻转变换效果，可以用作...2010-08-21 13:48:00 · 420 阅读 · 0 评论 -
JavaScript 图片3D展示空间（3DRoom）
一般的平面效果，通过改变水平和垂直坐标就能实现，再加上深度，就能在视觉上的产生3D（三维）的效果。程序就是模拟这样一个三维空间，里面的图片会根据三维坐标显示在这个空间。很久以前就看过一个[url=http://www.dhteumeuleu.com/mandatory-upgrade/]3DRoom[/url]效果，是用复杂的计算实现的。在上一篇[url=http://www.itey...2010-09-20 09:59:21 · 183 阅读 · 0 评论 -
JavaScript 滑动条效果
这个滑动条（拖动条）效果，一开始是参考了BlueDestiny的slider和Apple产品展示的样式，做了程序的原型。 在做了拖放效果之后，我想应该可以做一个更好的了，所以重做一遍，完善和扩展了一些功能。 碍于时间没有做得很强大，都是一些基本功能，希望各位多提意见！ 完整实例下载 欢迎来我的blog交流 效果预览（代码太多只能贴个图了） 预览效果1： 这个是仿Apple滑动条产品展示效果。 除了...2008-12-24 08:27:00 · 571 阅读 · 0 评论 -
JavaScript 拖拉缩放效果
拖拉缩放效果，实现通过鼠标拖动来调整层的面积（宽高）大小。例如选框效果。 这里的拖拉缩放比一般的选框复杂一点，能设置八个方位（方向）的固定触发点，能设置最小范围，最大范围和比例缩放。 跟拖放效果一样，程序的原型也是在做图片切割效果的时候做出来的。但这个效果的参考少的多，基本上靠自己摸索，走了不少弯路，现在总算把自己想要的效果做出来了，程序跟上一个版本比较也已经“面目全非”，还是觉得有很多需要改进的...2008-12-03 09:07:00 · 169 阅读 · 0 评论 -
JavaScript blog式日历控件
近来要做一个记事本系统，想找一个合适的日历控件，但网上的都是那种日历选择控件。于是到qq的记事本系统找了一个，但里面的算法有点落后，所以用了它的样式自己写了个。 前台效果预览 完整实例下载 程序说明 【Date】这个日历控件运用了很多Date相关操作和方法。先说说Date对象几个有用的属性：getFullYear：返回年份值getMonth：返回月份值get...2008-08-23 00:25:00 · 153 阅读 · 0 评论 -
JavaScript 颜色梯度和渐变效果
近来看了Dean的“Convert any colour value to hex in MSIE”，终于解决了根据关键字获取颜色rgb值的问题。顺便把程序也重新整理一番，并使用了最近整理的工具库。 效果预览 效果在线演示 完整实例下载 程序说明【ColorGrads颜色梯度】程序ColorGrads的作用是根据颜色集合和渐变级数生成颜色梯度集合。渐变级...2009-03-11 08:24:00 · 439 阅读 · 0 评论 -
JavaScript Table排序
程序的实现的是在客户端对表格进行排序，有以下特点：1，自定义排序列、排序属性（例如innerHTML）、排序数据类型（包括int、float、date、string）、排序顺序（顺序和倒序）；2，自定义排序函数；3，可同时设置多个排序列；网上也有很多其他的table排序函数，但有的是基于数组，有的不够灵活。本程序是在原有table结构上加入功能，套用一个流行词叫“无侵入”。 新版本主要...2008-10-06 08:24:00 · 93 阅读 · 0 评论 -
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 · 122 阅读 · 0 评论 -
JavaScript 图片滑动展示效果
看到jQuery实例：图片展示效果后，我也想拿来试试，但我不太喜欢用框架，所以自己做了个。其中的难点在于怎么设计各个滑动对象进行想要的滑动。一开始我想的是利用滑动对象的宽度的变化来实现滑动，但实行起来发现这个只能在理想状态下实现，一般实现起来很困难。所以还是参照了实例中的方法，利用left的变化来实现滑动。 效果预览下载完整测试代码 程序原理：设计之初，先不...2008-05-13 01:34:00 · 433 阅读 · 0 评论 -
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 · 149 阅读 · 0 评论 -
JavaScript 图片变换效果(ie only)
仿照常见的那个图片变换flash做的效果，纯js。不过滤镜变换只对应ie，ff只能看到一般的切换。这个js做的效果最早在sina看到，这里把这个效果封装好方便使用。 前台效果预览 下载完整程序ps：由于有些绿色版ie6会把滤镜功能去掉，所以用这类ie6会看不到效果的，用正宗版本就可以正常浏览了。程序说明：图片未开始转换时，由于没有图片会显示一个红x，所以隐藏图片：this._i...2008-05-23 12:02:00 · 150 阅读 · 0 评论 -
JavaScript Table行定位效果
近来有客户要求用table显示一大串数据，由于滚动后就看不到表头，很不方便，所以想到这个效果。上次做table排序对table有了一些了解，这次更是深入了解了一番，发现table原来是这么不简单。还不清楚这个效果叫什么，就叫行定位吧，本来想把列定位也做出来，但暂时还没这个需求，等以后有时间再弄吧。在淘宝的商品搜索页也看到类似的效果，但淘宝的不是table，只是li，在table相对会复杂一些。要说...2009-05-18 14:02:00 · 263 阅读 · 0 评论 -
图片延迟加载(按需加载)效果
之前在做一个图片浏览效果时，要看后面的小图必须等到前面的加载完，而且大图的位置是在大量的小图后面，导致大图要等到小图都加载完才能显示，为了解决这个问题，就想到了Lazyload效果。现在很多网站都用了类似的效果，如淘宝、Bing等。这个图片延迟加载效果是在Lazyload的基础上扩展的，主要扩展了获取img元素，获取src和图片加载的部分。兼容：ie6/7/8, firefox 3.5.5, op...2010-03-11 21:13:31 · 170 阅读 · 0 评论 -
简便无刷新文件上传系统
之前写过一个仿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 · 121 阅读 · 0 评论 -
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 · 188 阅读 · 0 评论