感觉好多前端工程师应该跟我是一样的，有着几分的代码洁癖，不忍直视那些写的过于缭乱的代码，更无法忍受自己写的代码不够规矩，最最无法忍受的恐怕是自己的前端代码被后端工程师蹂躏的面目全非。无奈的是，我遇到这种情况。每天面对着那些疯草一样的代码对于我是个不小的打击，所以在闲暇之余搞了点自己感兴趣的东西，封装了这个触屏手势库--jTouch

    关于js中的事件监听大家用的比较多了，无非是判断浏览器是否支持addEventListener和attachEvent，网上搜索关于事件监听的方法也挺多，但是总有些不是很完善。下面的方法中对于添加事件监听的方法是一样的，只不过在取消事件绑定上面做了点手术，现在可以支持匿名函数的使用，所以在绑定事件的时候不再需要给函数单独命名了。

    偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题。首先想到的是给容器的四个边添加几个块，然后看鼠标进入的时候哪个块先监听到鼠标事件。不过这样麻烦太多了。google了一下找到了一个不错的解决方法，是基于jquery的。

    之前的一篇文章JS判断从哪个方向判断进入一个容器中提到了一个效果，通过计算鼠标位置以及一些数学方法，来判断鼠标是从哪个方向进入以及离开该容器的。今天我这里搜索到一个不错的实战效果，分享给大家。是基于jquery的一个插件。该效果出品人是老外，原文地址 该效果用到的几点技术，一个是css3的动画效果，这里不是采用的js的动画效果，所以兼容性存在不足。另外就是之前提到的针对进入方向的判断。

    三角形变形记，用纯css实现的分布导航条效果 对于一些做前端开发的朋友，好多时候都会遇到各种各样的图形需要用图片做背景来实现，我个人比较倾向于css，在考虑成本后能用纯css来实现的绝对不用图片。这样的做法一是为了载入速度，二嘛就是为了耍酷（悲哀的是美女不会看代码而结识我...）。饶是如此，对于一些复杂的图形的我也束手无策，只能采用常规战术。但是对于一些比较简单的图形呢？比如正方形，长方形，三角形，如果只是纯色背景的话，我们肯定是不会去用图片做的。至于为什么，大家都是明白人不用我说了。不过某些时候需要用到一些稍微特殊的一些效果，比如上面看到的纯css实现的那种类似导航的效果，其中用到了三角形，有些朋友可能会犯难，难以琢磨这种形状是如何用css来实现的，不过不用着急，道理很简单，看了本篇教程你会恍然大悟的！

    此文讲的并不是html5来实现的瀑布流效果，并且单纯的html也实现不了样式的表现，这里指的是css3的实现。而为什么我还要写成html5(css3)这样的标题呢，当然是引入流量了。你懂得！ css3中增加了一个新的属性：column，来实现等高的列的布局效果。该属性有column-width宽度，column-count数量等，并且能根据窗口自适应。更多内容自行百度吧，呵呵在这里我开门见山的指出，下面的这种布局应该是成为css3的一种布局格式，姑且算作一种类瀑布流吧，但是此瀑布流非彼瀑布流。

    对于select这个标签在各个浏览器下的显示样式都不相同，这就给设计师和前端开发者带来了极大的不方便。所以做出一个统一的样式的select样式是最直接的需求。 那么如何实现不同的浏览器下，有着相同样式的select呢？ 下面看下本人的方法： 该方法主要用到的是js+css，代码量小，无插件 自定义select的样式 兼容性方面嘛，ie6可以无视了。 实现原理：（js+css模拟select样式）将select的标签元素，设置opacity:0隐藏掉，并给其设置z-index将其移动到最上层。这样在点击外围box的时候，实际上是点击了select。 然后通过select的onchange事件，将选中的数据赋值到span元素中显示出来。

    现在类似于pinterest这类的表现效果很火，其实我比较中意的是他的布局效果，而不是那种瀑布流。 虽然我不是特别喜欢这种瀑布流的表现样式，但是还是写了几篇关于无限滚动瀑布流效果的文章，Infinite scroll+Masonry=无限滚动瀑布流，infinite-scroll-jquery滚动条(下拉)加载数据插件之类的文章。可能是我表达描述不是很详细清楚，所以好多朋友看了不是很清楚，并发信给我求解释。所以有了今天这篇文章。 其实早在：十几款jquery无限滚动插件这篇文章中我就提到过这种效果的实现原理。主要是判断滚动条滚动的位置距离底部的距离，如果小于或者等于设置的高度的话，那么就执行ajax加载异步数据到固定的盒子中。我想大家对于这点是比较清楚的，恐怕对于怎样获取数据有点不甚了了的感觉。

    翻滚吧，javascript 我这个人记录东西有个习惯，就是想到的东西就尽量延伸。能想到的地方尽量都写出来。所以这篇文章还是围绕着js响应鼠标滚动来论述。在之前的一篇文章（JS（如何判断）鼠标滚轮事件解析）中，我已经说清楚了对于各个浏览器是如何来用js进行判断鼠标滚轮是向上滚动还是向下滚动。（主要是获取反馈回来的e.wheelDelta或者e.detail，不明白的看上文） 今天这里就写了一个小例子来进行小小的实战的一下。当然这个小例子有个不同的地方，就是当鼠标移动到固定的box（div盒子)上并滚动滚轮的时候，浏览器默认的滚动条会失效（当然不是什么bug，是js使得默认的滚动条无效。），当鼠标移出这个box的时候，浏览器滚动条才继续工作。此代码兼容各大浏览器，如有bug欢迎反馈。 当然看文字不如结合实例来看，下面给出实例代码供大家调戏...

    我们都见到过这些效果，用鼠标滚轮实现某个表单内的数字增加减少操作，或者滚轮控制某个按钮的左右，上下滚动。这些都是通过js对鼠标滚轮的事件监听来实现的。今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听。不同浏览器不同的事件首先，不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持）。。。。。