仅显示以下 2 篇带「焦点」关键字的文章。 返回词云 或 查看全部文章
2012-05-09 by Dron
花了几个小时，终于把我儿子的照片 P 完了，兴奋之余，决定还是把博客文章也一起写完。
直接看 Demo，后面的内容就当是废话吧。
实现原理简单得不得了，大多数人一眼就看明白：把照片按照景物的距离 P 成多层，每个层按距离的大概比例做位移，离镜头越远的景物，移动的速度越快，反之则相反。镜头焦点处的层不动，焦点之前的景物和焦点之后的景物移动方向保持相反。
个人感觉，本例的难点不在于 JS 实现，JS 大概也就几十行就搞定了，主要工作量在于 P 图上，把一张图分层，每个图层还要分别做镂空填补（可通过印章），图层僵硬的边缘要柔化（可用橡皮），当然，分得图层越多，立体效果越好。
2011-06-26 by Dron
网页上，为了方便用户及时看到有价值的信息，通常会采用自动滚屏的交互效果，使变化的信息在第一时间呈现。
滚屏的实现，普遍做法是改变网页根节点的 scrollTop 和 scrollLeft 属性，就像这样：
document.documentElement.scrollTop = 500; // 滚动到 500px 的位置scrollTop 和 scrollLeft 属性接受一个数值，需要涉及到元素位置的计算（记得那个复杂的位置计算的算法么？），对于需要滚动至某个元素可见，scrollTop 和 scrollLeft 不见得是最优的方案，其实，除了这种办法，我们还可以有以下两种办法来达到滚动的目的。
地址栏中 # 号后面的字符串叫做 hash，浏览器在网页打开完成后或者在 hash 值改变时，会自动滚屏至名称与 hash 值相等的锚点元素位置上，利用这个特性，我们可以在需要的位置插入锚名，然后通过改变 location.hash 的值来达到滚屏效果，具体写法这里就不细说了。
这种方案有一定缺陷，在某些浏览器下，hash 值的改变会产生浏览历史记录，导致对历史记录的破坏，影响用户使用前进后退功能；而且，在一些网页里，hash 值可能会有其它的用途，这样做将影响到这些功能。