摘要:效果预览:半径:颜色:速度:弹性(0-1):入射角(0-360):起始X坐标(0-400):起始Y坐标(0-400):功能说明:一个基于HTML5 canvas的小球物理测试系统,用户可以手动为新的小球设置不同的属性值(颜色,半径,速度等),从而在canvas中发射小球,小球在运动过程中会收到重力,弹性以及摩擦力的影响。实现原理:在小球飞行过程中,以初始速度,入射角以及重力系数作为依据,正交分解得出小球X轴和Y轴上的分速度,通过定时器不断刷新canvas,显示出小球飞行的动画。当小球和墙壁产生碰撞时,以小球弹性为依据计算能量损耗,当小球在墙壁滚动时,以墙壁摩擦系数为依据计算其能量损耗。代码分析 阅读全文
posted @ 2011-06-30 17:57 Cson 阅读 (3120) 评论 (22) 编辑
摘要: 前些天无意中看到的一条阿里巴巴前端面试题,该题目如下: 当鼠标略过某个区块的时候,该区块会放大25%,并且其他的区块仍然固定不动。 发现这种效果还是挺常用的,所以用纯css做了个类似的效果,但放大是通过设置新的宽和高而非放大百分比来实现,如果需要按题目那样通过百分比来控制放大倍数,就个人觉得就需要用js来进行动态计算,但原理是一样的。 实现原理: 由于这种图片的排列一般通过浮动来控制,所以在图片放大的时候,被放大的图片会影响到后续图片的位置。因此,我们要实现的就是在改变图片大小的同时改变图片位置。又由于图片并非绝对或相对定位,所以我觉得最适合通过margin来实现位置的调整。 阅读全文
posted @ 2011-04-04 23:42 Cson 阅读 (4375) 评论 (9) 编辑
摘要: 功能说明: 鼠标移动到不同图片上,该图片滑动展开,其它图片折叠。 支持IE 6 7 8 firefox chrome 实现原理: 当鼠标移动到某张图片,该图片以及该图片前的图片以相同速度向左运动,该图片之后的图片也以相同速度向右运动,形成展开选中图片的效果。 阅读全文
posted @ 2011-04-03 20:01 Cson 阅读 (2240) 评论 (19) 编辑
摘要:一个不常见的闭包陷阱:var test1 = { name: 'Cson' }; var name = 'noName'; with (test1) { function setName() { name = 'xiaoc'; } setName(); } alert(test1.name); alert(name);我们常常在资料中看到类似这样的描述:with打开对象闭包,在对象闭包里设置属性和方法等于为该对象添加属性以及方法。按这种思路理解,上面的结果应该分别是:'xiaoc'以及'noName'.但是实验结果 阅读全文
posted @ 2011-03-31 23:18 Cson 阅读 (754) 评论 (4) 编辑
摘要: 功能说明: 在GMC实习的时候,写过一个图片滚动切换的控件,现在也发布一下。 1。支持点击左右按钮滚动图片。 2。支持点击右上角的选择按钮进行图片滚动。 支持IE 6 7 8 FireFox Chrome 实现原理: 把所有对象包含在单行,并且通过按钮的点击,控制单行的移动,实现图片滚动效果。 阅读全文
posted @ 2011-03-30 16:45 Cson 阅读 (1836) 评论 (7) 编辑
摘要: 功能说明: 1.点击图片使其成为可缩放状态。 2.拖动句柄改变图片大小,拖动过程图片为半透明状态。 3.点击图片外的区域取消图片可缩放状态。 支持 IE 6 7 8 firefox chrome 实现原理: 捕获图片的点击事件,根据图片的尺寸以及位置生成对应的拖动手柄,拖动过程中根据鼠标的坐标,经过一系列计算,改变图片的位置和大小以及手柄的位置。 阅读全文
posted @ 2011-03-29 22:20 Cson 阅读 (1392) 评论 (7) 编辑
摘要: 功能说明: 在淘宝,京东之类的电子商务网站一般会有商品放大浏览功能,帮助顾客分析产品质量,这次的放大器程序正是模仿了这种效果,并支持如下功能: 1.图片局部放大。 2.鼠标滚轮调整放大倍数。 支持IE6 7 8 firefox chrome 阅读全文
posted @ 2011-03-28 00:53 Cson 阅读 (1102) 评论 (3) 编辑
摘要:学习web开发有一段时间了,还有一年多就毕业,把以前弄过的一些作品放上来,欢迎交流~~你们的建议会是我最大的财富。thanks~ 阅读全文
posted @ 2011-03-28 00:27 Cson 阅读 (267) 评论 (2) 编辑
摘要: 功能说明: 通过鼠标上下左右的移动,翻转呈现相册。支持浏览器IE6 7 8(IE8下会比较卡,IE6 7则不会) firefox chrome 实现原理: 根据鼠标的坐标,以及层与层之间缩放的倍数,早鼠标移动时重新计算每层图片的宽度,高度以及位置,形成3D翻转效果。翻转角度和鼠标移动位移占页面一半宽度的比例成正比。 阅读全文
posted @ 2011-03-27 22:57 Cson 阅读 (885) 评论 (3) 编辑