Jayuh Blog

当前主题各浏览器首屏效果

由于之前租用的虚拟空间有诸多限制,且经常出现当机现象,于是在还未用完一年的时候(即今天),果断换空间商!

晚上无聊,看一下自己博客在各浏览器的兼容性。每天在工作中兼容各浏览器的我,在给自己做这个主题的时候,完全就没考虑什么兼容性,哈哈哈哈。

首先是IE5.5,跟没有加载样式似的!哈哈,不了解它。
IE5.5
(更多…)

【前端小工具】尺子

截图界有个工具叫“FastStone Capture”。挺好用的,里面有个“屏幕标尺”的工具,笔者很亲睐,于是用JS实现了一个网页版的。

如果页面没有出错,现在您正访问的这个页面应该有一把尺子。没错,这就是我做的,赶紧左拉右拽的拖一下吧!

调用方法很简单,只用加载一个JS即可:http://jayuh.com/demo/ruler/ruler.js

此页面有点乱,来个简单的纯文字的API地址吧:http://jayuh.com/demo/ruler/

(更多…)

jQuery版连连看

近段时间,JS大有长进,这还得多亏了熊辉的帮助。

这两天,试着写了一个JS版的连连看,竟然写成了,自我感觉还不错。我叫它:暗格无线连连看。

  1. 玩法很简单,一看便知;
  2. 支持三种皮肤:植物大战僵尸、真三国无双、美女;
  3. 输入超级密令有惊喜:jayuh。

DEMO地址:http://jayuh.com/demo/lianliankan/

JS版连连看

【Chrome插件】Minimalist for Everything介绍

Minimalist for Everything是干什么用的?

答:Minimalist for Everything(以下简称为minimalist)是Chrome的一个插件,可以重置网站的CSS和JS。即在别人网站的基础上附加我们自定义的CSS和JS代码,使之达到我们想要的效果。

Chrome自带的开发工具(快捷键:F12)即可完成重定义CSS和JS,为什么还要用Minimalist?

开发模式,只是为了调试页面,查看即时效果用的,不具备关闭页面后的保存功能。而Minimalist可以在每次加载页面时,附加上我们自定义的CSS和JS。

举个例子:我经常阅读豆瓣的书评,但是正文字体太小、且行间距太近,在我笔记本上极难阅读。每次用自带的开发工具调试一下,但刷新一下或读另一篇书评的时候,还得再调试一下,好不麻烦!这个时候用到minimalist就在合适不过了。

豆瓣书评截图
(更多…)

固定列表的Table布局

近期一个需求,需要固定table左右两边的列表,中间内容过多可以左右移动。如图:
固定列表的Table布局

跟同事讨论了个把小时,出来一种解决方案:写一个table作为最父级,此table分三列,分别代表最左边固定的列、中间可滚动的内容、最右边的列。

<table>
	<tr>
		<td>左边固定的列表</td>
		<td>中间可以左右滚动的内容</td>
		<td>右边固定的列表</td>
	</tr>
	<tr>
		<td>左边固定的列表</td>
		<td>中间可以左右滚动的内容</td>
		<td>右边固定的列表</td>
	</tr>
</table>

然后给中间的td里面放一个div(因为td具有伸缩性,设置了固定宽度也是会变的,所以用此div来固定宽度),div里面在放一个table,此table就是那些茫茫多数据的容器了。

给div设置一个固定的宽度(div的宽度 = 父级table宽度 – 左边td宽度 – 右边td宽度),然后再设置overflow-x: scroll。现在,会出现很多横向滚动条,如图所示:

出现很多横向滚动条

 

现在每个滚动条都是相互独立的,移动其中某个滚动条只会触发本元素的移动,我们要做的就是通过JS使他们一起移动。代码略!

然后把div的overflow-x: scroll改为overflow-x: hidden,再把整体移动的这个效果赋值在两个按钮(向左/向右按钮)的点击事件上,就能大致完成需求了。

当然,还有很多小细节需要注意和处理,这里不便多罗嗦了。具体效果请查看DEMO:http://jayuh.com/demo/freeze-table.html

↑回顶部