摘要： 效果预览：半径:颜色:速度:弹性(0-1):入射角(0-360):起始X坐标(0-400):起始Y坐标(0-400):功能说明：一个基于HTML5 canvas的小球物理测试系统，用户可以手动为新的小球设置不同的属性值（颜色，半径，速度等），从而在canvas中发射小球，小球在运动过程中会收到重力，弹性以及摩擦力的影响。实现原理：在小球飞行过程中，以初始速度，入射角以及重力系数作为依据，正交分解得出小球X轴和Y轴上的分速度，通过定时器不断刷新canvas，显示出小球飞行的动画。当小球和墙壁产生碰撞时，以小球弹性为依据计算能量损耗，当小球在墙壁滚动时，以墙壁摩擦系数为依据计算其能量损耗。代码分析 阅读全文

摘要： 前些天无意中看到的一条阿里巴巴前端面试题,该题目如下： 当鼠标略过某个区块的时候，该区块会放大25%，并且其他的区块仍然固定不动。 发现这种效果还是挺常用的，所以用纯css做了个类似的效果，但放大是通过设置新的宽和高而非放大百分比来实现，如果需要按题目那样通过百分比来控制放大倍数，就个人觉得就需要用js来进行动态计算，但原理是一样的。 实现原理： 由于这种图片的排列一般通过浮动来控制，所以在图片放大的时候，被放大的图片会影响到后续图片的位置。因此，我们要实现的就是在改变图片大小的同时改变图片位置。又由于图片并非绝对或相对定位，所以我觉得最适合通过margin来实现位置的调整。 阅读全文

摘要： 功能说明： 鼠标移动到不同图片上，该图片滑动展开，其它图片折叠。 支持IE 6 7 8 firefox chrome 实现原理： 当鼠标移动到某张图片，该图片以及该图片前的图片以相同速度向左运动，该图片之后的图片也以相同速度向右运动，形成展开选中图片的效果。 阅读全文

摘要： 一个不常见的闭包陷阱：var test1 = { name: 'Cson' }; var name = 'noName'; with (test1) { function setName() { name = 'xiaoc'; } setName(); } alert(test1.name); alert(name);我们常常在资料中看到类似这样的描述：with打开对象闭包，在对象闭包里设置属性和方法等于为该对象添加属性以及方法。按这种思路理解，上面的结果应该分别是：'xiaoc'以及'noName'.但是实验结果 阅读全文

摘要： 功能说明： 在GMC实习的时候，写过一个图片滚动切换的控件，现在也发布一下。 1。支持点击左右按钮滚动图片。 2。支持点击右上角的选择按钮进行图片滚动。 支持IE 6 7 8 FireFox Chrome 实现原理： 把所有对象包含在单行，并且通过按钮的点击，控制单行的移动，实现图片滚动效果。 阅读全文

摘要： 功能说明： 1.点击图片使其成为可缩放状态。 2.拖动句柄改变图片大小，拖动过程图片为半透明状态。 3.点击图片外的区域取消图片可缩放状态。 支持 IE 6 7 8 firefox chrome 实现原理： 捕获图片的点击事件，根据图片的尺寸以及位置生成对应的拖动手柄，拖动过程中根据鼠标的坐标，经过一系列计算，改变图片的位置和大小以及手柄的位置。 阅读全文

摘要： 功能说明： 在淘宝，京东之类的电子商务网站一般会有商品放大浏览功能，帮助顾客分析产品质量，这次的放大器程序正是模仿了这种效果，并支持如下功能： 1.图片局部放大。 2.鼠标滚轮调整放大倍数。 支持IE6 7 8 firefox chrome 阅读全文

摘要： 学习web开发有一段时间了，还有一年多就毕业，把以前弄过的一些作品放上来，欢迎交流~~你们的建议会是我最大的财富。thanks~ 阅读全文

摘要： 功能说明： 通过鼠标上下左右的移动，翻转呈现相册。支持浏览器IE6 7 8(IE8下会比较卡，IE6 7则不会） firefox chrome 实现原理： 根据鼠标的坐标，以及层与层之间缩放的倍数，早鼠标移动时重新计算每层图片的宽度，高度以及位置，形成3D翻转效果。翻转角度和鼠标移动位移占页面一半宽度的比例成正比。 阅读全文