仿QQ个人中心图片展示效果

网络中的相册应用经常会遇到这种情况:用户上传的图片经过服务器等比缩小后,前端把图片放在固定大小的格子里显示。由于用户上传的图片宽高比例不受限制,那么前端的显示处理不是裁剪就是留白。
不知何时,我看到QQ个人中心的图片展示添加了一种效果,鼠标移动,有超出格子范围的图片也跟着动。这样有个好处就是可以让用户看得到整张图片的信息。
我也来模拟一下这个效果,首先理一下思路:用户上传图片后服务端先是判断图片大小,若图片没有超出格子大小,不作处理;超过固定的格子大小的,再判断图片的横竖,若是横向图片,将图片等比缩小至高度跟格子高度一致,若是竖向图片(这里正方形也归为竖向图片),将图片等比缩小至宽度跟格子宽度一致。缩小后的图片放入格子中一个方向显示完整另一个方向的多余部分则被隐藏。
服务器处理后的图片显示情况
QQ中的移动效果是靠改变margin值来实现的,当然也可以通过定位来实现。这里我模仿QQ的,代码贴出来,欢迎指正。

提示:你可以先修改部分代码再运行。

仿谷歌眼睛追踪效果

昨天无聊的时候翻了下以前保存的东西,看到了谷歌的眼睛追踪效果DEMO,感觉自己也可以写写,就写出来了,最终效果上稍微有些差别。
先看一下谷歌的例子:眼睛追踪效果
这里的主要难点的获取圆的坐标值,如果有公式的话,就能用代码写了。于是我翻阅了以前同事发我的PPT“极坐标系”,有兴趣可以下载看看。
这里圆(眼珠运动的轨迹)的坐标就可以用x = r * cosθ,y = r * sinθ来表示。
Math.atan2()函数返回点(x,y)和原点(0,0)之间直线的倾斜角。那么如何计算倾斜角θ呢?只需要将两点x,y坐标分别相减得到一个新的点(x2-x1,y2-y1),然后利用他求出角度就可以了,使用下面的一个转换可以实现计算出两点间连线的夹角。

下面我们完整的代码贴出来:

提示:你可以先修改部分代码再运行。

一道js题目

昨天在微博上看到一个js的题目:

我们来分析一下:
b是一个引用对象,并不是false这个直接量。
!操作符可以应用于ECMAScript中的任何值,无论这个值是什么数据类型,这个操作符都会返回一个布尔值。这道题中的操作数是一个对象,返回false。
==操作符,会做自动转换后判断。而===只在两个操作数未经转换就相等的情况下返回true。

firefox的offsetLeft/offsetTop问题

obj.offsetLeft是相对于”offsetParent”的左边距离,offsetParent是除了position:static以外的定位元素,若其父级中不存在定位元素则相对于整个页面。
在火狐下,当父元素(position:relative)的border和overflow:hidden同时出现时,其子元素(position:absolute)的offsetLeft/offsetTop值会减去border的值,而IE则正常。

提示:你可以先修改部分代码再运行。

例子中,box2的offsetLeft值在火狐下为150,IE为160,若去掉overflow:hidden或者box1的border,火狐和IE就显示的一样了。

js模拟窗口抖动

目前一般的聊天工具都会带一个有意思的功能——窗口抖动,最近研究了下,下面我来模拟一个比较简单的抖动功能。
原理很简单,就是让一个窗口相对于它原来的位置朝四个方向顺时针或者逆时针迅速地偏移几个像素。
首先我们写一个空的div来模拟一个窗口,下面是这个div的基本样式(注意,这里的抖动元素应该设置为绝对定位):

下面是js代码:

其中s[p[i % 2]] = f[i % 2] + ((i++) % 4 < 2 ? -2 : 2) + "px";是关键代码。一开始看起来可能有点困难,我们可以把它当代数一样代入相应的数字或代码,比如当i=0时:o.style['left']=o.offsetLeft+(-2)+'px';也就是向左偏移2像素,这样就比较清楚了。 查看示例