随笔分类 -  Javascript

Javascript Technic
摘要:序二(09/05/03) 近来还是那么忙,趁五一更新一下程序吧。这个版本主要增加和改进了以下东西:1,对字符串改用localeCompare来比较;2,一次排序中能使用多个排序对象(用于值相等时再排序);3,修正一些发现的问题;4,改进程序结构,个人觉得是更灵活更方便了;5,增加bool类型比较;6,添加attribute/property的内容;7,修正ie6/7的radio/checkbox状... 阅读全文
posted @ 2008-10-06 08:24 cloudgamer 阅读(67426) 评论(82) 推荐(15) 编辑
摘要:上一阵子做过一个图片切割效果,得到很多人关注。其中有很多人向我询问如何做一个真正的图片切割(裁剪),这里需要声明一下:首先js是不能操作客户端文件的(除非特殊情况),所以图片的切割必须在后台处理,对于客户端的图片可以先上传再切割或者把图片和切割参数一起传递到服务器再处理(上传文件不在本次讨论范围,请自行修改);还有是通过客户端传递的参数来处理图片,确实能得到展示图或预览图的效果(这是针对有些提出在... 阅读全文
posted @ 2008-10-05 00:20 cloudgamer 阅读(74215) 评论(196) 推荐(19) 编辑
摘要:相关推荐:AlertBox 弹出层(信息提示框)效果 近来要做一个LightBox的效果(也有的叫Windows关机效果),不过不用那么复杂,能显示一个内容框就行了。这个效果很久以前就做过,无非就是一个覆盖全屏的层,加一个内容显示的层。不过showbo教了我position:fixed这个新特性,决定重写一遍。先看效果:LightBox 内容显示 ps:“定位效果”的意思是... 阅读全文
posted @ 2008-09-15 02:57 cloudgamer 阅读(219454) 评论(265) 推荐(47) 编辑
摘要:程序集合了宽度、高度、透明度、top、left的渐变,可以自定义渐变项目和各个项目的初始值结束值,还能以任意点(定点)为中心渐变。使用该程序能实现很多常见的动画特效,包括大小变换、位置变换、渐显渐隐等等。效果: 程序说明: 渐变效果的原理就是利用定时器不断设置值,如果要减速效果就设置一个步长(详细看JavaScript 弹簧效果) 。这里只是把能渐变的属性(透明度、宽、高、left、top)整合在... 阅读全文
posted @ 2008-08-27 00:17 cloudgamer 阅读(37987) 评论(60) 推荐(6) 编辑
摘要:近来要做一个记事本系统,想找一个合适的日历控件,但网上的都是那种日历选择控件。于是到qq的记事本系统找了一个,但里面的算法有点落后,所以用了它的样式自己写了个。效果:<<>>年 月 日一二三四五六 程序说明【Date】这个日历控件运用了很多Date相关操作和方法。先说说Date对象几个有用的属性:getFullYear:返回年份值getMonth:返回月份值getDate:... 阅读全文
posted @ 2008-08-23 00:25 cloudgamer 阅读(53364) 评论(80) 推荐(13) 编辑
摘要:由于asp的cookie是经过url编码的,所以读之前要unescape一下。下面是我用正则的方法取cookie,包括单值和多值:[代码]有不完善的话,欢迎指出。 阅读全文
posted @ 2008-08-08 16:35 cloudgamer 阅读(8491) 评论(23) 推荐(5) 编辑
摘要:序一(08/07/21)很久之前就在一个网站的截取相片的功能中看到这个效果,也叫图片裁剪、图片剪切(设置一下也可以做出放大镜等类似的效果)。当时觉得很神奇,碍于水平有限,没做出来。前些日子突然想做一个透镜效果,就突然想到了这个效果,于是找出当年“珍藏”的代码决定一尝所愿。序二(08/12/06)自上一个版本的图片切割效果出来后,虽然也经常看到“框架开发这个如何如... 阅读全文
posted @ 2008-07-21 01:20 cloudgamer 阅读(180811) 评论(238) 推荐(35) 编辑
摘要:序一(08/07/06)看到alibaba的一个图片切换效果,感觉不错,想拿来用用。但代码一大堆的,看着昏,还是自己来吧。由于有了做图片滑动展示效果的经验,做这个就容易得多了。序二(09/03/19)自写了Tween缓动之后就很想重新写过这个效果,近来有点时间,终于可以动手了。除了改成Tween缓动,也改进了程序算法,不过原理还是一样的。效果预览 仿淘宝/alibaba图片切换: 程序说明原理就是... 阅读全文
posted @ 2008-07-06 01:25 cloudgamer 阅读(890874) 评论(441) 推荐(68) 编辑
摘要:请到这里看09-08-18更新版本类似的多级浮动菜单网上也很多实例,但大部分都是只针对一种情况或不够灵活,简单说就是做死了的。所以我就想到做一个能够自定义菜单的,有更多功能的多级浮动菜单。而其中的关键就是怎么根据自定义的菜单结构来生成新菜单,关键中的难点就是怎么得到下级菜单结构和容器对象的使用。理想的做法是每次有下级菜单时,从对象直接取得下级菜单结构,放到容器对象中,并且容器能重用,而不是每次都重... 阅读全文
posted @ 2008-06-28 11:32 cloudgamer 阅读(50846) 评论(38) 推荐(5) 编辑
摘要:能够根据自定义的菜单数据和select,自动设置联级的下拉菜单,可定义默认值。效果: 其中参数1是菜单结构:[代码]参数2是select的id集合(按顺序):[代码]可设置默认值(按顺序):[代码]源码:[代码] 阅读全文
posted @ 2008-06-24 10:52 cloudgamer 阅读(77213) 评论(36) 推荐(13) 编辑
摘要:仿照常见的那个图片变换flash做的效果,纯js。不过滤镜变换只对应ie,ff只能看到一般的切换。这个js做的效果最早在sina看到,这里把这个效果封装好方便使用。效果: 程序说明: 图片未开始转换时,由于没有图片会显示一个红x,所以隐藏图片: [代码] ps:以前我用this._img.src="javascript:void(0);";但这个在ie8会出错。 这个变换效果需要滤镜,所以只支持i... 阅读全文
posted @ 2008-05-23 12:02 cloudgamer 阅读(467990) 评论(324) 推荐(37) 编辑
摘要:上次做图片滑动展示效果时做了减速效果,就想做一个加速效果。结合起来就想到了下面这个东西,当然只是类似弹簧,而不是真正的弹簧。先看效果: 固定范围反弹: 范围渐变反弹: 自定范围反弹:范围: 程序说明:虽然说的是弹簧效果,但实际上要实现的是定点坐标之间的加速和减速移动。 点到点的移动应该都知道怎么做,这里是通过设置滑动对象的left来实现的。 而减速效果,一般的做法是通过用目标值减当前值除以一个系数... 阅读全文
posted @ 2008-05-17 14:41 cloudgamer 阅读(22471) 评论(42) 推荐(4) 编辑
摘要:这里说的滑移其实就是减速效果,能根据设定的坐标平面移动。 效果自动滑移: 定点滑移:(鼠标点击) 定线滑移:(鼠标拖动轨迹) 代码: <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns... 阅读全文
posted @ 2008-05-16 15:14 cloudgamer 阅读(17241) 评论(22) 推荐(6) 编辑
摘要:更新版本:SlideView 图片滑动(扩展/收缩)展示效果看到jQuery实例:图片展示效果后,我也想拿来试试,但我不太喜欢用框架,所以自己做了个。其中的难点在于怎么设计各个滑动对象进行想要的滑动。一开始我想的是利用滑动对象的宽度的变化来实现滑动,但实行起来发现这个只能在理想状态下实现,一般实现起来很困难。所以还是参照了实例中的方法,利用left的变化来实现滑动。 效果:1111111 2222... 阅读全文
posted @ 2008-05-13 01:34 cloudgamer 阅读(199436) 评论(147) 推荐(18) 编辑
摘要:根据无缝滚动和八向滚动修改而来,特点是能同一程序中分别向四个方向移动。对滚动框内的样式设置有些要求。效果:顺德于1993年被批准为广东省综合改革试点。 2006年顺德成为首个GDP超过1000亿的县级行政单位。 2000至2003年顺德均在中国百强县排名中位居榜首。 2005年顺德实现国内生产总值856.11亿元。 代码:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTM... 阅读全文
posted @ 2008-04-30 14:17 cloudgamer 阅读(157863) 评论(58) 推荐(16) 编辑
摘要:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="... 阅读全文
posted @ 2008-04-29 17:50 cloudgamer 阅读(13479) 评论(14) 推荐(5) 编辑
摘要:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="... 阅读全文
posted @ 2008-04-29 15:27 cloudgamer 阅读(12824) 评论(16) 推荐(0) 编辑
摘要:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="... 阅读全文
posted @ 2008-04-26 15:34 cloudgamer 阅读(9423) 评论(18) 推荐(0) 编辑
摘要:Javascript无缝左右滚动 阅读全文
posted @ 2008-01-15 21:14 cloudgamer 阅读(3853) 评论(4) 推荐(1) 编辑
摘要:Javascript颜色渐变效果 阅读全文
posted @ 2008-01-15 21:12 cloudgamer 阅读(16182) 评论(21) 推荐(1) 编辑