Saber 酱的抱枕

Fly me to the moon

10/4
2024
软件

开始使用小狼毫输入法,以及简单的教程

小狼毫输入法 no_lazy

我在寻找新的输入法,这次试了试久闻大名的小狼毫输入法,它是一个开源、免费、无广告的本地输入法。试了下体验不错,而且也很易用。要说门槛的话就是一些自定义选项需要通过修改配置文件来实现(这不是必须的)。

我花了点时间摸索了下,并写个简单的教程,希望可以帮助到别人。

Read More →

开始使用小狼毫输入法,以及简单的教程

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

Read More →

七牛调用图片的自定义尺寸

12/18
2015
学习

js自定义鼠标双击事件以及对其的一些思考

昨天在做图的痛苦煎熬中,忽然脑子一抽想到了鼠标双击事件(看啊,我不得不思考代码以减轻做图的痛苦了。可见做图是多么惨无人道的事情)。于是鼓捣了两个玩意出来。

第一个代码是自定义鼠标双击事件。我们知道,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
学习

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制作的的自定义滚动条