01/15
2016
有时候我们想要显示图片的缩略图，在七牛中有现成的格式可用调用。假如有下面一个图片的url：
/f/%E8%8A%B1%E5%AB%81Saber2.jpg
我们可以在后面以如下格式对尺寸加以限制：
?imageView2/1/w/<Width>/h/<Height>
本文中的图片url如下：
/f/%E8%8A%B1%E5%AB%81Saber2.jpg?imageView2/1/w/350/h/500
12/18
2015
昨天在做图的痛苦煎熬中，忽然脑子一抽想到了鼠标双击事件（看啊，我不得不思考代码以减轻做图的痛苦了。可见做图是多么惨无人道的事情）。于是鼓捣了两个玩意出来。
第一个代码是自定义鼠标双击事件。我们知道，JavaScript的鼠标双击事件（ondblclick）的判定时间是有阈值的。如果我们想自己定义，例如必须间隔在200毫秒以内才算双击，又比如想把时间间隔延长到1000毫秒。这时候可以自己设置时间阈值，满足条件就执行事件代码：
var click0=null;//第一次点击的时间戳
var clickTimeOut=500;//自定义允许的时间间隔
document.onclick=function () {
var d=new Date();
if(click0==null){
click0=d.getTime();
}else{
if(d.getTime()-click0>clickTimeOut){
//console.log("不是双击");
click0=d.getTime();
}else{
console.log("一次双击");
click0=null;//初始化
}
}
}
这个和浏览器的判定应该是一样的了（至少从结果来看）。这也是数次修改之后的结果，改进的地方有（完全可以不看）：
1.把相邻两次单击进行判断。例如鼠标点击了3次，第1次和第2次的间隔超时，第2次和第3次间隔在规定时间内。可以把第2和第3次点击识别为双击，而不是必须1、2判断一次，3、4再判断一次。
2.但是当一次双击事件触发之后，必须再进行至少两次单击才可以触发双击判定。例如3次单击间隔都在规定范围内，在把第1次和第2次识别为双击之后，不会把第3次和第2次连起来，认为又是一次双击。
Read More →
js自定义鼠标双击事件以及对其的一些思考
09/10
2015
WordPress的文章编辑器好蛋疼，代码模式下如果插入的代码有空行，就会自动加上p标签，还把&符号给转码了，想插入直接运行的代码还是只好用iframe。
前两天看到bilibili个人中心的收藏夹，收藏夹改版后，左侧显示的是分类列表，那里用了一个自定义滚动条。于是我也想做一个出来。花了大半天时间，终于做出来了，运行良好。
由于最外层div设置了overflow:hidden属性，所以滚动也需要用鼠标滚动事件来做。这个之前做过，没费多大事就做出来了。到了用滚动条控制滚动的时候就犯难了。因为以前用到鼠标事件基本上就是onclick，现在的拖动则要使用mousedown、mousemove、mouseup这三项。百度之后看到了别人写的结构，这才明白了一些。然后设置鼠标移动时的事件，设法减小计算量（有些值甚至有三种方法可以设置），增加必要的限制。真是步步维艰，光拖动这块，最少用了4个小时才完成。不过做完了收获也不小。
做这部分的时候我发现如果把mousemove事件写到mousedown里面，而且过后不解除绑定的话，会累计次数。就是说你第2次触发mousemove的时候是执行2次，触发第10次的时候是10次……写到外面不知道是否可以避免。
代码比较多，不贴了，查看demo更好一些。demo里也保留了很多注释。
需要jq支持；代码已经封装成了函数，可以直接饮用（参数代码里有说明）。你需要在网页中预设的高度有三个：外层box的高度，主体部分的高度和滚动条容器的高度。鼠标滚轮每次滚动多少个像素是由变量preHeight规定的。
当然，在实际使用中也要注意这几个主要结构的css属性，例如外层box的overflow:hidden;以及一些定位属性等。
此代码在chromeV45、firefoxV39、IE8、IE11中测试通过。
注意：
在实际中使用，不建议应用到全网页上（虽然我已经在本站上成功试验过了）。因为外层box的高度小于内容的高度（要不怎么会出现滚动条），而且设置了overflow:hidden属性。这将导致这个区域的翻页快捷键无效（例如上下方向键、翻页键等），会影响用户体验。如果把body标签作为最外层容器，很容易被发现。
此外，在移动设备上这个完全没卵用。
所以这个玩意较为适合的使用场景是在单独的区域上使用。
