Saber 酱的抱枕

本站以前有篇文章——《saber美图》。以前我看到了saber的美图就会发上来，频繁的更新。可是自从逛了P站之后这篇文章基本就没更新过了。这也算告一段落了吧，于是我想把这篇文章里的图片下载下来，这就有了下面的代码：

window.stop();
var allimg=$(".post_t img");
var downa=document.createElement("a");
document.body.appendChild(downa);
downa.download="";
var imgno=0;
function downimg () {
	downa.href=allimg.eq(imgno).attr("src");
	downa.click();
	imgno++;
	if (imgno>=allimg.length) {
		window.clearInterval(downimgt);
	};
	return imgno;
}
var downimgt=setInterval("downimg()", 1000);

使用方法：
打开文章页面，在文档加载完成之后（不必等待图片加载完成），在控制台执行上面的代码。
执行之后，将会停止页面加载，然后创建一个下载用的链接（所以此代码照例是chrome only）。最后，每一秒创建一个下载链接，以下载图片。
如果chrome询问是否允许此网站下载多个文件（应该是在地址栏上显示的提示），点击允许。

下载本站图片的js代码

昨天用js做了鼠标拖动元素的功能，并且限制了元素不能超出窗口边界。

之前用js制作的的自定义滚动条中，滚动条的拖动也是用的鼠标移动事件，不过那个情况简单些，只需要判断和限制Y轴上的情况。这次的情况复杂了一点，限制部分花了不少时间才写出来合适的

查看demo

使用js制作鼠标拖动元素的功能

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标签作为最外层容器，很容易被发现。

此外，在移动设备上这个完全没卵用。

所以这个玩意较为适合的使用场景是在单独的区域上使用。

js制作的的自定义滚动条

现在支付宝在二维码付款时，右上角有个帮助区域，可以切换两张图片。这时候我想到了一个问题，如果这里是使用banner切换的思路做的话——那样的话图片需要用排列，圆点指示器也得用html元素做出来，用在这么简单的一个地方，就显得太繁重了。于是我看了下源代码，不得不赞一声，毕竟是支付宝，人家不会像我一样低级。

支付宝是怎么做的呢？一个图片容器，里面两张图片，就这么简单。

你可能会问，指示器哪里去了呢？其实支付宝这里的指示器是做到图片上的，当图片切换的时候，指示器看起来就像是切换了一样。我一看到指示器和切换，就想到banner那里去了，这是思维定势，毕竟图样图森破。

但是我们点击指示器的时候，图片确实会切换。我想了一下，应该是在鼠标点击时判断点击位置，如果点击在左半边，图片就切换到第一张；如果点击在右半边，图片就切换到第二张。

于是做了个demo：

做出来之后才发现一件好玩的事情，指示器（实际上并没有真正的指示器）的心理作用大于实际作用，因为你即使在指示器之外点击鼠标（哪怕是点击图片左上角和右上角），图片也会正确的切换。

如果要切换的图片多的话，用这种方法就不那么简便了。
Read More →

仿支付宝帮助图片切换效果