by 段 志岩
by 段 志岩
To start connecting please log in first.
Recent Site Wide Posts
-
段 志岩 wrote a new blog post: iPhone/iPod/iPad中的开关按钮效果实现 9 months, 1 week ago · View
我个人非常喜欢iOS系统中的开关按钮效果。相比于普通的checkbox，这种带有滑动效果的开关按钮显得更加美观，体验也更好。刚好最近在开发围脖贴，于是想在一些要用到checkbox的页面中使用类似iPhone/iPod/iPad中的开关按钮效果。当然首先是寻找现成的实现，可能是我太土鳖了，不知道这个东西叫做 toggle switch，结果一直搜 toggle button，得到的结果都不是我想要的。于是索性自己实现了一个。（效果，Github Repo）
下面简单记录一下实现的思路。
背景动画
实现的重点在状态的切换过程，需要产生一个平滑的滑动效果。于是我想，制作一个左侧是开启，右侧是关闭的图片，作为背景，然后在切换的时候给背景做一个动画。于是产生了下图。
为背景作动画用到了Backgroud-Position Animation Plugin。仅使用一个开启/关闭联合起来的图是不够的，因为按钮有一个圆角，如果始终使用联合图的话，在一个开启状态下，右上角和右下角会显示灰色，在关闭状态下，左上角和左下角会显示蓝色，很不自然。所以，需要在动画结束后，把背景切换到单独的开启/关闭按钮的位置。
状态保存
考虑到这个开关按钮基本是放在一个form里面用的，因此使用一个hidden的input元素来保存它的状态。每次开关被单击，就改变input的值。这样以来，就很容易把开关状态通过表单提交到后台。
自定义事件
很多时候需要根据开关按钮的状态进行编程，因此添加了两个自定义事件 on 和 off，分别表示按钮被开启和关闭。可以使用jQuery的bind方法来添加事件处理函数。
成果
-
段 志岩 撰写了一篇新博客文章：正心楼男厕所改进方案 11 months ago · View
不知道大家注意到没有，正心楼6楼的男厕所，靠门一边的两个小便池比其他的小便池的使用率要高很多。什么原因呢？据本人分析，原因是，靠窗一边的小便池让人有被窥视的感觉。请看下图：图中蓝色的线条表示人的视线，半透明的黑色区域表示盲区，也是让如厕人感到安全的区域。可以看出，在厕所外面的人的视野理论上可以覆盖除靠门一侧的两个小便池外的其他所有小便池。毫无疑问的，小便是非常私人的事情，使用非盲区内的小便池就会有很强烈的不安全感，所以导致盲区内的小便池使用率远高于其他小便池。
过高的使用率将导致盲区内的小便池更容易损坏，而其他小便池的利用率过低造成资源浪费。同时，在如厕人数较多时，将有人不得不在非盲区内小便，造成如厕体验低，内心忐忑不安。
针对以上问题，本文作者本着科学的态度，设计了两种改进方案，如下：
最少用料方案
最少的建筑材料的方案。示意图如下：
该方案将外面的门和里面的门错开，减小可视角度，从而扩大盲区。
最少改动方案
对现有建筑格局改动最少的方案。
该方案在里面的门内增设障碍物，阻挡视线，从而扩大盲区。
您有什么更加高明的方案吗？欢迎分享。
-
段 志岩 撰写了一篇新博客文章：Testing New Blog Post 11 months, 4 weeks ago · View
See if the post feature works in BuddyPress
Recently Active Member Avatars
