1.可以向两边滑动的选项卡菜单

今天制作了一款选项卡菜单，其实本质上和普通的选项卡没什么区别，对于菜单项有hover效果，有选中效果，所增加的就是，菜单项可以有无数个，当总菜单项的宽度之和超出选项卡的固定宽度时，会出现向右移动按钮，这时，多出的菜单项会被隐藏掉。然后，可以点击移动按钮来移动菜单项，这样隐藏的菜单项就出来了，并且菜单项可以无数多个，自由增加。

在线演示 源码下载

2.CSS文字环绕图片

文字环绕是Microsoft Office Word软件的一种排版方式，主要用于设置Word文档中的图片、文本框、自选图形、剪贴画、艺术字等对象与文字之间的位置关系。一般包括四周型、紧密型、衬于文字下方、浮于文字上方、上下型、穿越型等多种文字环绕方式。但我们做网页布局时，有时也需要这样的样式，那么怎么办呢？其实是很简单的，主要就是float的使用，具体请看下面例子：

在线演示 源码下载

3.CSS自定义select下拉选择框(不用其他标签模拟)

在css里让select“隐藏”，但不能display:none;，不然select元素不存在了，在这里我们可以把select的透明度改为0，这样就看不见了，但并不影响下拉框，点击时下拉框还会出现；这样貌似是可行了，但这是会发现每次选择选项后，选项并未显示，这就是select隐藏的原因了，连着文字也隐藏了，因此我们需要一个额外的标签储存每次选择的选项。

在线演示 源码下载

4.CSS自定义文件上传按钮

用一个标签套着文件域，然后调整文件域外边的元素，设置成按钮样式，然后，在把文件域“隐藏”掉（这里的隐藏只是把透明度改为0，这样元素还是存在的），这样，当点击“按钮”时就会触发文件域，就可以选择文件了

在线演示 源码下载

5.CSS Hack大全-可区分出IE6-IE10、FireFox、Chrome、Opera

今天把一些常用的CSS Hack整理了一下，包括常用的IE hack以及火狐、Chrome、Opera浏览器的Hack，并把这些CSS Hack综合的一起，写了一个小的浏览器测试器。

在线演示 源码下载

6.仿新浪游戏导航条制作

今天仿着新浪游戏门户网站的导航条，自己也制作了一个，感觉也不太难，就是比较麻烦，主要就是鼠标移入移出事件的应用以及菜单定位的处理，代码就不贴了，把演示链接及下载链接贴在这里吧。

在线演示 源码下载

7.实现有横竖滚动条的表格，纵向滚动时表头不动

实现这样一个表格，有横竖滚动条，竖滚动条不包括头部，横滚动条包括头部，竖滚动条滚动时头部不动，横滚动条滚动时头部动，表格单元格宽度不固定。

在线演示 源码下载

8.Javascript摆动运动（同一水平线往复运动）

摆动运动，即一个物体绕一定轴线在一定角度范围内做往复运动。现在用js模拟，实现原理就是用setInterval或setTimeout动态改变一个元素与一个轴线的距离，先从某一位置(速度为0)做靠近轴线的加速度运动，当到达轴线后(速度达到最大值)，再做远离轴线的减速度运动，当达到一定的距离后(速度为0)，再做反向的运动，这样就形成了摆动运动。

在线演示 源码下载

9.Javascript控制多个图片逐渐放大缩小/Javascript简易相册

小相册，鼠标移入时图片逐渐放大，鼠标移出时逐渐缩小。感觉上有两个需要注意的地方，一个是图片放大，某张图片放大时不能影响它周围的图片，并且还要从中心开始放大；另外一个就是放大与缩小动画的实现。对于前者，主要是布局这一块，用到的是js控制浮动布局转绝对定位布局；对于后者，主要就是setInterval的应用了，需要封装一个小型的运动框架，涉及到对css样式的控制与操作、缓冲运动的实现以及json的应用。

在线演示 源码下载

10.CSS3+Js制作的一款响应式导航条

今天制作了一个响应式导航条，能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式，这里主要用到的就是CSS3的Media Query。具体可以查看浅谈响应式布局这篇文章，这里就不花费大量的篇幅介绍了，主要看一下这个导航条该怎么做。另外需要提到的是，ie6-ie8是不支持CSS3的Media Query的，因此对于ie6-ie8我们需要特殊处理，就让他们保持默认样式，这对于布局及样式上都要考虑到这一点。

在线演示 源码下载

收集10款不同的web前端特效的源码预览