Mar 4 2013

在页面中添加滚动一定距离后跟随滚动模块的方法和注意事项

现在在网页中，经常可以看到一些滚动跟随模块。比较常见的两种场景：

页面滚动到了导航条位置，然后导航条就固定到页面顶端，跟随滚动
边栏高度不如正文高，滚动到边栏末端，出现一个跟随页面的滚动的边栏模块
本文就是来介绍如何实现这个效果，并且解决这个效果带来的一些问题。

实现的基本原理

固定到页面的某个位置，并且跟随页面滚动，实际上就是用到了一个 CSS 中的 position 属性值 fixed。对 HTML 对象指定 position 属性为 fixed 之后，这个对象就会保证位置不变，跟随页面滚动。但是这个属性在早期的 IE 浏览器中是不支持的，有很多 hack 方法，在这里不再赘述。

那么，要想实现滚动一定距离之后，某个模块跟随页面滚动，要做的就是用 Javascript 来监控页面的滚动事件，判断滚动距离是否达到目标位置，然后对要跟随滚动的模块修改 position 属性为 fixed。当然，也可以提前做好一个滚动跟随模块，用 display 属性隐藏起来，等滚动到了一定距离，取消显示。至于怎么出现和出现什么内容，就看你自己的需求了。用 jQuery 监控方法如下：

$(window).scroll(function(){
    if ($(window).scrollTop()>64){
        $(“#menu”).css({position:”fixed”,left:”0px”,top:”0px”});
    }else{
        $(“#menu”).css({position: “relative”});
    }
});

这里，对 window 对象使用 jQuery 的 scroll 方法，用来监控滚动事件。当页面滚动的时候，就会触发定义的函数。函数的功能也比较简单，使用 scrollTop 方法来获取当前网页滚动的位置距离页面顶部多高（单位 px），然后用 if 语句判断，当滚动距离页面顶端超过 64px 之后，就对 id 为 menu 的模块修改 CSS 样式，让它跟随页面滚动。当小于这个高度的时候，再修改回去。

虽然功能比较简陋，但大体的原理就是这样，更多具体的效果，请自由发挥。

两个跟随滚动插件

神说，这么好的效果应该做成插件，于是就有了插件。这里简单的介绍两款基于 jQuery 的插件：Sidebar Follow 和 Scroll Follow 。

这是 mg12 写的一个小插件，代码比较少，功能也比较简单，所以使用起来就比较方便。看名字就可以知道，主要用于边栏模块的跟随滚动。代码页比较少，有兴趣的同学可以看一下。

Sidebar Follow官方主页和使用说明

Scroll Follow

这是个比较老功能比较强大的插件，可以实现各种你想要的跟随滚动效果。具体的下载地址和使用方法，也不再赘述了。

Scroll Follow官方主页和使用说明

添加跟随滚动模块的注意事项

本文介绍的技术其实没有什么技术含量，写本文的最主要的目的，是想介绍下面这两个注意事项。

尽量少的使用

再好的功能，也要适度使用。屏幕的空间本来就有限，加上一个很高的导航条，再加上左下角、右下角的广告，右边再来个边栏跟随，这样的页面你如何才能专注的看正文内容？所以要尽量多的留出浏览者阅读的空间，适度的补充内容，尽量保证页面的整洁。才能有一个比较好的用户体验。

设置合理的结构防止页面塌陷

这个问题才是本文的重点，网上很多采用这个效果的页面都中了这个问题。先来看看问题演示 demo。

塌陷的具体问题效果很明显，就是下面的内容突然跑上去了，产生了回流（reflow）。回流简单的说，就是当你页面中某个部分突然消失了，浏览器就需要重新渲染网页的内容。潜行者M的 Demo 页面由于结构比较简单，所以具体效果只是内容突然上去而已。但是对于结构比较复杂、代码比较多的网站来说，一旦出现回流，浏览器就要重新计算渲染，页面就会卡一下子。如果浏览者的电脑配置比较低，甚至会卡一下电脑。如果浏览者的浏览器版本比较低，可能会导致页面错乱。

事关用户体验的问题，是不能容忍的。问题的原因，就是突然改变了相关结构的 CSS 属性导致。就本例而言，原来的导航条 position 属性是 relative ，在页面中占据一定空间。突然改成了 fixed 脱离了文档流，自然浏览器要把原来位置补上，重新渲染。

所以，在设计页面跟随滚动模块之前，一定要考虑到这个细节。最好设置比较好的 HTML 结构，撑起来。也可以在要滚动的模块外面包裹一层结构，用来占位。也可以在一开始，就让滚动模块脱离文档流。潜行者M的建议是，最好专门设置一个用来滚动的模块，先隐藏，然后触发显示。

Mar 3 2013

JS/JQ►前端相关

使用 jquery.easing.js 增强动画过渡效果

jQuery 提供了一些诸如 show、hide、slideUp、fadeIn 等等动画方法，可以方便的切换元素的显隐。更有强大的自定义动画方法 animate ，可以实现很多动画效果。为了让动画有好的过渡变化过程，官方为这些方法设置 easing 属性，但是官方没有给出很多过渡效果。

jquery.easing.js 这个插件，增加了很多过渡效果，引入之后可以让动画过渡过程更加多样化。

先来看一下：Demo。官方也有案例：打开官方主页。

如何使用 jquery.easing.js

第一步引入插件

jQuery 插件嘛，当然要先引入 jQuery，然后再引入 jquery.easing.js 。

<script type=”text/javascript” src=”http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type=”text/javascript” src=”http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

然后再在引入代码下面编写调用的 Javascript 代码，注意代码顺序。

第二步启用插件

首先先假设使用 animate 方法把网页上的 class 为 aa 的 div 的宽度，从原本的 300px 变成 600px。按照 animate 的写法，加上 easing 。

$(‘.aa’).animate( {‘width’:’600’} , { duration:1000,easing:’easeInOutCirc’ });

这样，就对 aa 对象，启用了一个 easeInOutCirc 过渡效果，在 1000毫秒内变成 600px。

可以应用的动画方法

不仅仅支持 animate 方法，还支持 hide、show、slideDown、slideUp、fadeIn、fadeOut等等支持 easing 的动画方法。只需要按照官方对应的格式去写就可以，这个插件相当于扩充了官方的过渡效果样式。

插件的参数

这个插件有三个参数：duration、easing、complete。

duration 参数

用来指定动画变化的时间，以毫秒为单位。

easing 参数

指定这个动画要使用何种过渡样式。具体的过渡样式名和效果，需要在官方主页上查看左边的 “Example”，选择找到自己想要的效果。

complete 参数

设置一个回调函数，当动画完成之后，执行这个函数。

其他注意事项

使用 slideUp 动画方法

slideUp 这类的动画方法，要比 animate 简单一些，不需要复杂的属性参数，所以可以直接这样写：

$(element).slideUp(1000, method, callback});
$(element).slideUp({ duration: 1000, easing: method, complete: callback});`</pre>
其他的 hide 、show 之类的方法，自行类比。

### 指定默认的 easing 样式

在使用中 easing 参数是可以省略的，省略之后，就会调用默认的过渡样式。可以使用下面一句代码，指定默认的动画过渡样式。
<pre>`jQuery.easing.def = "过渡样式名，例如 easeInOutCirc";

用起来挺简单的，但是有了更和谐的变化效果，可以增强用户体验。更多用法欢迎观看 Demo 。

Mar 1 2013

网站与后台开发

如何用 WordPress 写出一篇“好看”的文章

一篇文章是否好看，无非在于两方面，第一个就是文章本身的内容，另一个就是文章显示的排版布局。潜行者 m 博客自创建以来，也已经过去了近两年的时间，这其中积攒了很多在 WordPress 写作的经验，特别是在文字排版这块。回首观看，早期的文章质量比现在的要差远了，本文就是总结一下对于使用 WordPress 写作文章排版的经验。

一些基础知识

在后台编写文章通常使用可视化的编辑器，你看到的排版布局就是比较具体的效果，但实际上数据是用 HTML 结构来记载的。例如，当你回车换行，那么在换行的地方系统就会加上一个段落标签（<p>），当你插入一个连接的时候，用的就是锚标记（<a>）。HTML 是具有语义性的，根据 HTML 的语义性写出的一篇文章，对于 SEO 、排版都有好处。此外，WordPress 主题的作者，通常也会针对这些结构进行一些设计和样式处理，会使其显示的效果更好。

用标题划分文章层次

标题标签（<hn>）是非常重要的一个 HTML 标签，它对于 SEO 也有很重要的作用。通常用它来划分文章的层次。写一篇文章，肯定要有一定的层次，也就是所谓的大论点、小论点等。通常的文章一般具有三个层次：文章标题、大标题、小标题，通常来说，对应的标签是 h1、h2、h3。对于有的主题来说，设计者会用 h2 作为文章标题，这点也需要注意。标题标签一共有六个（h1-6），分别代表不同的重要等级，实际应用当中，只会使用 h1-3。需要注意以下两点：

内文标题层次不要高于文章标题。如果文章标题使用了 h1，那么内文大标题只能使用 h2。
小标题包含在大标题中。分清楚小标题属于哪个大标题属于什么层次，不能把小标题和大标题的层次混合。
合理的使用标题划分文章层次，可以让文章变得更容易理解，对阅读者和 SEO 都有好处，更有一些插件可以根据文章的标题建立目录层次，例如水煮鱼开发的 TOC 文章目录插件。

对于重要的文字进行加重处理

这一点大家都知道，不再赘述。但是要注意的一点，只对非常重要的关键词进行加重，加重的效果通常是文字加粗，这样可以吸引浏览者的目光，如果太多的话，就会分散阅读者的注意力，要尽可能的少。下图就是个加太多的例子。

善用有序和无序列表

如果你在文中写的内容具有明显的并排性，可以作为一个列表，那么一定要使用无序列表（<ul>）或者有序列表（<ol>）。无序列表就是指没有顺序的列表。如果你想列举某项产品有什么样的有点，或者是一些赛事列表，那么你应该使用无序列表。有序列表是指一些有顺序的并排信息。如果你想写一下使用某个软件的四个步骤，或者是发布一个有明确顺序的资源列表，那么就用无序列表。

见过很多文章会对一些并排性的内容，手动编写诸如 1、2、3 之类的编号，其实这是错误的，应该使用有序列表， CSS 自动添加编号上去。

善用空格

空格是文章中比不可少的一部分，但是很多人用空格的方法是错误的。空格不是用来排版的，它不像是在 Word 之类的软件里面，使用空格在段落的开头空开两格。中文的写作习惯是在文章段落的开头，空开两个字符，这空开的距离，并不应该使用空格来实现，而是使用 CSS 对段落标签增加属性 text-indent 来实现的。这个是主题设计者的工作，如果你用的主题并没有做这个，那就不会自动空开了，你只能自己修改 CSS 或者用空格模拟空出两字的效果，但这是不合理的。

那么空格究竟要用在什么地方呢？用在重要的关键词上面，特别是英文关键词。英文在中文文章中是个不太好处理的东西，绝大多数的作者会直接把英文字母和中文混写在一起，但是这样的显示效果并不好。具体对比效果如下图

在稍微重要的关键词的两边，我加了两个空格，稍稍加一点距离，对于英文单词，除了空格之外还对首字母进行大写，两条文字一对比效果很明显就可以看出来。

标注文章引用内容

有的文章可能会引用一些其他文章的资料、名人名言等，这样就需要选中这块文字，点击“块引用”，这样就可以告诉阅读者，这是一块来自他人的内容，我引用过来的。

用预格式化描述代码等有格式的内容

例如一段代码，通常有换行、空格之类的用来保持代码的结构，如果以普通的文字发布，可能会破坏这个结构，所以要用预格式化。

使用其他修饰的注意事项

其他的文字修饰还有很多，包括：斜体、删除线、下划线、颜色、字体大小等。这些文字修饰要慎用，用多了，会让阅读者感觉杂乱影响阅读心情。就颜色来说，一篇文章中最多不要超过两种颜色。

尽量多的使用图片

虽然不能极端的说没有图片的文章不是好文章，但是一篇好文章是肯定有图片的。文章中的图片主要有以下两个用处：

与文章内容相符增强文章表现力
缓和阅读中的视觉疲惫
所以，文章中，要尽量配图。配图也要跟文章主题相符合，例如：介绍人物的文章，配张人物图片；介绍软件的，配张软件截图；写心情生活类的，可以配张唯美的图片等等。

用心去写文章

一篇文章最吸引人的是文章的内容，再好的排版，没有好的内容，人们也不会去看的。所以要用心去写文章。

写之前有明确的目的（介绍自己的写作排版经验），有一个大体的构思（包括写哪几部分），然后觉得写出来会给阅读者一定的帮助，这时候就开始动手写。写的过程中，按照之前的构思，列出大纲和知识点收集整理相关资料，然后针对每个知识点去截图或者用 PS 作图来更形象的描述这个问题。写完并且上传图片之后，还要反复检查两边，看看是否有废话、错别字以及没介绍清楚的地方。

就本文而言，本人用了两个小时的时间来写作，为写出一篇有价值的文章，付出这些是值得的。

一个反例

下图是从所谓刚子博客上截取的，是一篇被我缩小的文章，整体是一大段文字没有任何的段落层次、修饰、图片，是一个非常好的反例。

如果只是一篇短小的文字，这样是可以的，如果是一篇很长的文字，不免让阅读者疲惫。

写在最后

用 WordPress 写出一篇好看的文章，首先要用心去写，写出一篇高质量、有阅读价值的文章，其次要对文章不同的内容进行修饰。本文就介绍了一些写作经验。

至于文章内容具体的修饰样式，是根据你用的 WordPress 主题而定。本人的原创主题 Qetro 就对文字的排版进行了一定的优化，如果你的博客写文字比较多一点，不妨试用一下看看效果。 ^_^

Feb 26 2013

前端相关

用 jQuery 制作一个简单的遮罩弹窗效果教程

客户的网站上突然需要一个遮罩弹窗效果，也可以称作暗箱之类的，具体效果就是网页中背景变成半透明，然后在屏幕中间出现一个菜单之类的东西。这种效果在网上很常见，例如：QQ空间浏览相册等。这种效果的好处就是，可以让用户聚焦到弹出的菜单中。

神说，有代码的文章，应该有个 Demo ，于是就有了 Demo。

HTML 结构

首先先来分析一下这个过程：触发某个事件（例如点击按钮），然后出现一个背景遮罩上面还有一个内容层。触发的按钮，我在这里用 div 来代替，并且使用 click 点击事件来演示。那么我们的 HTML 结构就很明确了。

 <div class="click">点击这里</div>
 <div class="click1">效果增强版的</div>
 <div class="bg"></div>
 <div class="content">这里是正文内容</div>

CSS 代码

对于遮罩效果的 CSS 代码是最关键的。遮罩用到了两个 div ，一个作为背景，要覆盖整个网页，另一个是内容显示层，通常要居中处理。

.bg{display:none;position:fixed;width:100%;height:100%;background:#000;z-index:2;top:0;left:0;opacity:0.7;}
.content{display:none;width:500px;height:300px;position:fixed;top:50%;margin-top:-150px;background:#fff;z-index:3;left:50%;margin-left:-250px;}

简单解释一下，首先要隐藏起来，之后用 jQuery 触发显示。之后指定 position 的属性为 fixed，因为这样，才能激活 top 、left 、bottom 、right 、z-index这些属性，同时可以设置 width 、height 为 100% 来实现覆盖整个网页。通常情况下，一般用 absolute 属性值来实现这种效果，因为它的兼容性更好。但是在实际应用当中，当页面很长，往下滚动的时候，使用 absolute 遮罩层也会跟随滚动。对于内容层来说，比较简单，指定宽度和高度用负边距来使其居中显示。

特别要注意一点，背景层的半透明使用的是 opacity 属性，因为使用这个属性可以更好的用 jQuery 来控制。但是 fixed 、opacity 都是早期 IE 浏览器不支持的。

jQuery 代码

分析一下遮罩的交互操作，无非就是点击弹出，然后点击一下遮罩，消失。那么就直接对 CSS 进行操作即可。

   $(function(){
        $(‘.click’).click(function(){
            $(‘.bg’).css({‘display’:’block’});
            $(‘.content’).css({‘display’:’block’});
        });
        $(‘.bg’).click(function(){
            $(‘.bg’).css({‘display’:’none’});
            $(‘.content’).css({‘display’:’none’});
        });
    });

这里直接使用 CSS 方法，当点击的时候改变 display 属性，此外还有很多实现方法，不再赘述。完成这些，当我们点击“点击这里”之后，就可以看到效果了。

10 个前端开发必备的工具或使用方法

工欲善其事必先利其器，有了本文介绍的工具和一些功能，你就可以高效的处理任务和信息。下面的这些工具都是本人平时经常用到的，如果你有更好的更有效率的工具，请告知一声，补充一下！

火狐浏览器

前端要看网页，浏览器是必备的，但为什么要选择火狐浏览器而不是谷歌、IE、opera、360？首先，IE 就不要谈了，360 那些国产的也不要提了，opera 国内使用率并不高。使用谷歌浏览器也是一个好的选择，但是我本人倾向于使用火狐。因为在之前的使用过程中，感觉 chrome 是拿来上网用的，而 Firefox 才是拿来开发用的，特别是下面介绍的一些功能插件都是基于火狐浏览器的。当然谷歌浏览器上面也有一套不错的开发工具。

Firebug

这个插件具有非常强大的功能，它把网页的 HTML 结构进行了整理，查看和修改 CSS 也非常方便。这只是基础的功能，还有控制台等可以调试 JavaScript 等，是前端不可缺少的工具。具体使用方法不再赘述。

查看选中部分源代码

这是火狐浏览器中内置的一个功能，通过选取网页上的一快内容，然后右击查看选中部分源代码，可以快速查看到你选中部分的源代码内容。这样就可以非常快速的了解到某个区域的 HTML 结构，从而避免从海量文件中寻找对应代码。

Yslow

网站性能优化也是前端的一个重要任务，而雅虎出品的 Yslow 插件，就是进行网站性能测试的工具。使用它进行测试之后，会给出一个等级以及存在哪些问题以及如何进行修正。官方地址：点击这里

查看元素（三维视图）

火狐浏览器自带的查看源代码功能还是比较弱的，于是有查看元素这个功能。使用鼠标放在某个元素上，右击查看元素，即可看到这个元素的 HTML 结构和对应的 CSS 样式，也可以很方便的修改。但是通常使用 FireBUG 来完成这个任务，因为自带的功能不是特别强。这里主要介绍的是查看元素功能中的三维视图功能。这个功能可以把你的网页变成三维视图，从而可以非常方便的查看到网站的结构是否合理、是否正确闭合、是否嵌套层数太多。

自适应设计视图

目前响应式设计越来越流行，这个功能就是来测试网页的响应式布局效果。同样也是火狐浏览器中内置的功能，在菜单中 Web 开发者选项中可以找到。虽然网上也有一些网页版的响应式测试工具，但是我个人觉得还是浏览器自带的比较方便实用，速度也比较快。此外，据说 chrome 上面也有类似的工具。

IE9

IE9 是用来做兼容性测试用的。如何做 IE 兼容性测试呢？IE9 已经像 firefox chrome 一样，内置了非常简陋、难用的页面调试功能，但是其中有一个非常重要的功能，就是设置浏览器和文档解析模式。它可以方便的切换到 IE7 、IE8 文档渲染模式，此外还有怪异模式等等。这样，用 IE9 就可以同时做 IE7 和 IE8 的兼容性测试。对了，IE6 呢，IE6 怎么办。原来你还在费力的做 IE6 的兼容？

有道云笔记

前端也是需要不断学习的，包括一些总结或者网上的资料。以及一些优秀作品的网页截图、图片资源等等，都是需要分类整理的。面多这么多的信息，你如果用文件夹和 Word 文档或者浏览器的收藏夹来整理，那简直是弱爆了。有道云笔记是我用过最好的比较，容量大，使用方便。可以直接使用网易邮箱登陆开通，如果你还没有账号，可以通过我的邀请链接注册。

火狐剪报

快速对当前网页进行截图，并且可以进行简单编辑。搭配有道云笔记，可以记录优秀的设计，提供一些灵感。此外有很多类似的网页截图工具。

notepad++

非常小巧好用的文本编辑器。用来快速高效的搜索修改代码。如果你想修改一点小代码的时候，却要忍受几秒的编辑软件启动时间，那么就用这个吧。无论是写代码还是修改代码，个人觉得都比那些功能齐全的编辑软件好很多。当然文本编辑器也有很多，但是用了一遍我个人觉得这是最好的。

Feb 19 2013

前端相关

DD_belatedPNG 与 unitpngfix 两种解决 IE6 中 PNG 文件透明问题方案横向对比

虽然 IE6 骂声不断，但是仍然还有不少的市场份额。而在网页中，png 文件体积小、无锯齿、透明度好而被广泛使用。当这两件事情碰在一起，问题就来了，IE6 不支持 png 的透明，它会把透明的部分显示成白色的。

有问题就会有解决方法，可以使用早期 IE6 支持的滤镜来实现透明效果，有些牛人就根据这个原理进行了封装，做成了 JS 来使用。所以，我们只需要调用他们编写 JS 文件即可。在网上有众多解决这种问题的方法和插件，但是实际上目前有这两种方式比较有效，那就是 DD_belatedPNG.js 和 unitpngfix.js 这两种方法。本文就是简单介绍一下使用方法和特点，然后将其进行一个对比。

DD_belatedPNG.js 方法

DD_belatedPNG.js 这个插件功能非常强大，强大的背后就是复杂的使用方法和体积大小。首先要下载这个 JS 文件，然后引用到页面中，之后就要为其填写配置一些参数。通常要用两个参数，一个是 CSS 选择器，使用这个选择需要处理的层或者图片，另一个是类型，就是这个图片是作为 img 图片还是 background 背景图片来使用的。插件体积的话，压缩版也有 7KB。

知更鸟已经写了一篇比较简单的使用方法：使用 DD_belatedPNG 让 IE6 支持 PNG 透明图片

官方的英文版提供了更加详细的教程：点击这里

unitpngfix.js 方法

unitpngfix.js 这个插件使用起来非常简单，不需要配置什么参数，只需要引入 JS 插件即可。而且非常小巧，只有 2KB，不需要进行任何配置。但是要注意，JS 文件里面还要配置一个小图片地址，这个图片就是一个 1 像素的透明图片，是这个插件必须的素材。所以你需要上传或者在网上找个，然后填写进去。

更加详细的使用方法请看官方页面：点击这里

上面介绍两种方法的两种方法的使用方法，下面我们从实际应用来对比一下。

实践对比测试

介绍的再怎么好，也要通过实践检验。下面就来动手做个 Demo 亲自测试一下使用过程和效果。Demo 页面非常简单，就是一个带有透明 png 背景图片的 div ，并且把背景图片放在了右下角，关键代码：

div{width:400px;height:400px;margin:20px;background:url(222.png) bottom right no-repeat;border:1px solid #000;}

打开之后的效果是正常的

现在我们启动伟大的经常无条件崩溃的 ieTest ，使用 IE6 来加载这个页面

成功的显示出了白色的背景，哦也！

使用 DD_belatedPNG.js 方法：先引用 JS 文件，然后设置上属性和参数。具体代码如下：

<!–[if IE 6]>
<script src="DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('div,background');
</script>
<![endif]–>

刷新之后，成功修正！

使用 unitpngfix.js 方法：上传并且设置好小图片，然后引用 JS 文件。具体代码如下：

<script src="unitpngfix.js"></script>

但是刷新之后，背景图片却出不来了。当然这个与 IEtest 的不稳定也有关，在原生 IE6 下测试应该不会出现这种情况（未测试），在之前的实际使用中，偶尔会出现这种情况。大部分时候，作为背景图片会跑到左上方，因为 unitpngfix 对 background 的属性支持不太好（官方有提到）。

用户体验对比

DD_belatedPNG.js 的使用效果比较好，达到了要求，但是使用起来比较繁琐，需要针对性的对要使用的图片添加参数，这样就不便于后期的修改。当然，可以新建一个专用的类，为所有需要处理的图片，添加这个类即可，总体上也是比较方便的。此外体积也稍大。

unitpngfix.js 使用起来非常简单，只需要引入这个文件，就可以对页面中所有的 png 图片进行处理。但是对于原图片的 background 属性支持不太好。尤其对 background-position、background-repeat 等属性，容易失效。而且有时不太稳定（未在原生 IE6 下测试）。体积较小。

从效果出发，自然是选择 DD_belatedPNG.js ，但 unitpngfix.js 也是有价值的。如果要你为一个包含很多 png 图片的页面做兼容处理，你是选择使用 DD_belatedPNG.js ，为图片一一添加属性或者把选择器一一填上，还是直接引用一个 unitpngfix.js ，忍受一点效果的缺失？

Feb 7 2013

作品

本站原创主题 Qetro 现对外公开发布

早在去年的8月份，本人就开始制作这套主题，期间收集了不少网友提供的建议。今年二月份以来，经过近一周的工作，对大部分代码进行了重写，推出了公开版本。

早在去年10月份的 1.2 版本，就打算对外公开，但是由于当时的水平有限，所以一直没有怎么处理主题，让很多网友久等了！！没有这些网友的敦促，相信也不会有公开版本。

这套主题功能和结构都比较简单，比较适合初学者研究、折腾、二次改造使用，在今后的升级，将会不断的增加新的功能，如果你有什么建议和功能需求，请邮：qianxingzhem#126.com（#换@）

关于主题更详细的介绍和下载地址，请看这里：Theme Qetro

同时，祝大家新年快乐，万事如意！！

Jan 31 2013

CSS►前端相关

由 opacity 属性引发的层叠问题思考与解决

在最近的一个作品中，在使用 opacity 属性来实现页面整体透明的时候，发现了一个问题。如果两个层发生了重叠，使用了 opacity 属性并且属性值小于 1 的层，会覆盖掉后面的层。于是动手做了个实验，来验证 opacity 的层次。

网页中的层叠规律是这样的：如果两个层都没有定义 position 属性为 absolute 或者 relative 属性，哪个层的 HTML 代码放在后面，哪个层就显示在上面。如果指定了 position 属性，并且设置了 z-index 属性，谁的值大，谁就在上面。

发现问题

而对于没有激活 z-index 的普通层来说，如果那个层使用了属性值小于 1 的 opacity 属性，哪个层就会显示在上面。我们做一个 Demo。代码如下：

 <!DOCTYPE html>
 <html>
 <head>
 <title>带有 opacity 的层叠问题</title>
 <style>
 html{padding:40px;}
 .dd{width:100px;height:100px;}
 #a{background:red;}
 #b{background:blue;margin-left:20px;margin-top:-80px;}
 #c{background:green;margin-left:40px;margin-top:-80px;}
 </style>
 </head>
 <body>
 <div id="a"></div>
 <div id="b"></div>
 <div id="c"></div>
 </body>
 </html>

保存为 html 文件打开之后，可以看到正常的次序

这时候，我们为 #a 加上属性 opacity：0.9 神奇的事情发生了，它覆盖了另外两个层

只有当为另一个层（例如：#c）也设置一个小于 1 的 opacity 值（例如：0.8）之后，后面的 #c 才能安装正常的规则覆盖在 #a 上面。

这样，增加了小于 1 的 opacity 属性的层，升高了一个层次。至于里面的科学原理，我没有想明白，或许也可能是一个小 BUG。但是有时候这种情况是我们不希望发生的。

解决问题

那么如何来解决这个问题呢？前面也说过了，正常的情况下，指定了 position 并且指定了 z-index 值的层，拥有比普通层更高的层次，那么指定 opacity 的层和指定了 position 的层相比呢？我们对 #b 加上 position：relative 看看。这时候的样式代码如下：

 #a{background:red;opacity:0.9;}
 #b{background:blue;margin-left:20px;margin-top:-80px;position:relative;}
 #c{background:green;margin-left:40px;margin-top:-80px;opacity:0.8;}

保存刷新后，看到效果是这样的：

也就是说，对层使用 position 属性的 relative 之后，可以使其层次和 opacity 相同，这样之后，按照正常的排序进行层叠显示（在后面的实验中，我对 absolute 属性值也做了测试，结果和 relative 属性值表现的相同）。当我们取消了 #c 的 opacity 属性之后，我们可以看到，#c 被排在了最下面。

还没有完，之前只是对 #b 激活了 position：relative 属性，还没有使用 z-index。我们对 #b 进行了 z-index 的设置（例如：100），很显然的，#b 成为了最顶层。

得出结论：

使用了 position 属性值为 absolute、relative 的层，将会比普通层更高层次。使用了小于 1 的 opacity 属性的层，也比普通层更高层次并且和指定 position 的层同层，但是不支持 z-index 属性，所以指定 position 的层，可以使用 z-index 属性，来覆盖带有小于 1 的 opacity 属性的层。

Jan 26 2013

网站与后台开发

【基础篇】13，补充之前教程中的一些知识要点

在之前的教程中，我通过做一套非常简单的 WordPress 主题，介绍了一系列关于 WordPress 主题制作的方法和函数。对于基础篇，有一些细节略过了，有一些功能没有提到，因为这些对于基础比较差的朋友有点难度，所以放在了中级篇教程中。回顾整个初级篇教程，有几个知识点需要介绍但是没有介绍到，还有一个小错误，于是就在本文中总结一下。

显示更多的文章列表

在目前的主题中，在首页中，只能显示有限的文章列表内容，并没有前后翻页的功能。这样，时间比较早的文章就看不到了，现在就要加上。需要用到的代码如下：

<div id=”pagination” class=”mt10”>
     <?php posts_nav_link(); ?>
</div>

其中 posts_nav_link(); 这个函数就是用于生成列表翻页的函数。这段代码通常要放在文章列表的最下面

保存一下，刷新页面，我们就可以看到了多了一个“下一页”链接，点击之后，还会出现 “上一页”

这种方式非常简单，但是效果有限。在实际的应用中不大，因为现在网站大都用“页码数字”的形式来翻页。但是 WordPress 并没有提供与之相关的函数，有很多插件是用于实现这个功能的，但实际上用代码也能很方便的实现。下面就是我在网上找到的一段比较好的实现代码，作者不详：

function qxzm_pagination($query_string){
    global $posts_per_page, $paged;
    $my_query = new WP_Query($query_string .”&posts_per_page=-1”);
    $total_posts = $my_query->post_count;
    if(empty($paged))$paged = 1;
    $prev = $paged - 1;
    $next = $paged + 1;
    $range = 5; // only edit this if you want to show more page-links
    $showitems = ($range * 2)+1;

$pages = ceil($total_posts/$posts_per_page);
if(1 != $pages){
echo "&lt;div class='pagination'&gt;";
echo ($paged &gt; 2 &amp;&amp; $paged+$range+1 &gt; $pages &amp;&amp; $showitems &lt; $pages)? "&lt;a  href='".get_pagenum_link(1)."' class='inactive'&gt;|&lt;&lt;/a&gt;":"";
echo ($paged &gt; 1 &amp;&amp; $showitems &lt; $pages)? "&lt;a href='".get_pagenum_link($prev)."' class='inactive'&gt;&lt;&lt;&lt;/a&gt;":"";

for ($i=1; $i &lt;= $pages; $i++){
if (1 != $pages &amp;&amp;( !($i &gt;= $paged+$range+1 || $i &lt;= $paged-$range-1) || $pages &lt;= $showitems )){
echo ($paged == $i)? "&lt;span class='current'&gt;".$i."&lt;/span&gt;":"&lt;a  href='".get_pagenum_link($i)."' class='inactive' &gt;".$i."&lt;/a&gt;";
}
}

echo ($paged &lt; $pages &amp;&amp; $showitems &lt; $pages) ? "&lt;a href='".get_pagenum_link($next)."' class='inactive'&gt;&gt;&gt;&lt;/a&gt;" :"";
echo ($paged &lt; $pages-1 &amp;&amp; $paged+$range-1 &lt; $pages &amp;&amp; $showitems &lt; $pages) ? "&lt;a href='".get_pagenum_link($pages)."' class='inactive'&gt;&gt;|&lt;/a&gt;":"";
echo "&lt;/div&gt;";
}

}
把这段代码复制到主题下面的 functions.php 中，然后在需要这个功能的地方，写上定义的这个函数，就可以实现了。

这段代码其实也是比较好理解的，如果你有一定的 php 基础，很容就可以看出代码的实现过程。此外，这段代码还输出 html 结构，这样你就可以方便的用 CSS 定义样式了。在中级篇会详细讲解这个地方，默认的情况下效果如下。

因为之前的 archieve.php 文件是使用 index.php 文件生成的，同时这个文件的用途也是显示文章列表，所以我们也要在这个文件的相应位置，放上这些代码。

在一个文章或者页面中，显示相邻的上下篇文章这个功能，也比较常见。我们可以使用下面的代码来实现：

<div id=”prevnext” class=”mt10 ofh”>
   <div class=”fl”><?php previous_post_link(‘%link’); ?></div>
    <div class=”fr”><?php next_post_link(‘%link’); ?></div>
</div>

首先定义了一个结构，然后里面有两个函数：previous_post_link(‘%link’);、next_post_link(‘%link’);，这两个函数从字面意义上就可以指定，分别用来生成上一篇、下一篇文章链接用的。添加的位置一般在文章的底部，当然也可以在顶部添加。保存一下，我们就可以看到效果了。如果一篇文章有上一篇和下一篇文章的话，就会出现这个链接，如果没有，就不会出现。

由于 page.php 文件是由 single.php 文件生成的，如果我们想在页面中也有这个功能，那么我们需要在 page.php 中也加上这些函数。

当管理员登陆后显示管理工具条（AdminBar）

现有的演示主题中，当我们登陆之后，返回首页，上面什么都没有。在使用其他的主题时，登陆后台之后，应该会在页面上显示一个快捷管理条。这个管理条可以让你快速的发表文章或者修改这篇文章等等。

至于如何为这个主题添加 AdminBar ，之前写过文章：在主题中添加 AdminBar 功能，在这里就不再赘述了。

不同页面显示对应的标题（title)

在之前的第五节教程制作主题的头部区域中，我提到使用下面这段代码来显示标题：

<title><?php bloginfo(‘name’);  ?> <?php  bloginfo( ‘description’ ); ?></title>

这的确显示出来了标题，但是在其他页面中，标题也显示这一种形式。因为其他的页面（例如 single.php），引用了 header.php 文件，所以当你访问一篇文章的时候，浏览器标题显示的都是一样的内容，这显然是不行的。那么我们如何进行修改呢？

这里可以选择让 single.php 不引用 header.php 文件，而是把 header.php 的内容复制到 single.php 的头部，然后在 title 标签内，编写上调用当篇文章的标题。这样的做法可以解决问题，但是后期的修改不方便，也违背了 WordPress 分块机制的目的。其实我们可以使用下面这段很简单的代码解决这个问题：

<?php if(is_home()): ?>
<title><?php bloginfo(‘name’);  ?> <?php  bloginfo( ‘description’ ); ?></title>
<?php else: ?>
<title><?php wp_title(‘&laquo;’, true, ‘right’); ?><?php bloginfo(‘name’); ?> </title>
<?php endif ?>

这几条语句，使用了一个 if 语句，同时使用了 is_home() 这个判断函数，判断当前页面是否为首页。如果是，则显示现有的标题结构，如果不是，就调用 wp_title(‘«’, true, ‘right’); 及其参数来显示标题。这样，当访问文章或者页面等页面的时候，显示的标题就是文章标题和网站名称了，而不是原来的网站名称和网站描述了。我们把它替换到 header.php 文件中，之后就完成了

至此，初级篇教程就结束了，敬请期待更高级的中级篇教程，它将会以一个更加复杂的主题制作过程为主线，深入的介绍更多常用的函数，以及之前基础篇略过的细节。

本节课相关资源下载

myTheme(基础篇-13) 本节课主题下载

本系列文章

Jan 25 2013

网站与后台开发

【基础篇】12，通过当前的文件，生成主题其他必要文件

就基础篇来讲，主题的大部分文件已经生成了，现在还剩下几个比较次要的文件：page.php、archive.php。用到的手段和技术和之前都是一样的，借此，我们再来复习一下分割生成文件的过程。

生成 page.php 文件

页面（page）和文章（single）的样式大体是相同的。很显然，我们要用已经生成的 single.php 文件来生成 page.php 文件。我们先打开一个页面看一下现在的效果。

因为目前主题中，没有 page.php 这个模板文件，所以根据前面介绍的 WordPress 主题机制中的缺失文件替换机制，它使用的是 index.php 文件，所以只能显示出摘要。下面我们来生成 page.php 页面：

复制 single.php 文件，命名为 page.php
打开文件修改一下
对于页面来说，通常不需要底部文章版权和作者介绍信息，因为页面使用来展示内容的，一般是一些公告之类的。此外，如果想做一个留言板这类的东西，也可以使用页面来实现，当然这个页面要带有评论模块。那么，我们只需要把原来 single.php 文件中的底部文章版权和作者介绍信息模块删掉就可以了。

修改完成之后，我们再打开随便一个页面，就可以看到里面的内容了。需要注意的是，这里没有显示评论模块，因为我在本地没有安装“多说”插件，所以暂时看不到评论框之类的东西。如果你在本地安装了，就会看到的。

生成 archive.php 文件

archive.php 这个文件主要用于按照日期显示文章列表。很多博客通常在边栏增加一个类似“按月归档”的功能。

当点击这些日期的时候，系统就会优先查找 archive.php 这个模板文件来显示列表。既然是文章摘要列表，那么我们应该使用 index.php 文件来生成这个文件了。过程和之前的完全相同，复制一遍，改一下名字就可以了。如果你想让它变的与众不同一点，还可以加上一些修饰之类的。例如在文章列表的最顶端加上“按月查看文章”之类的说明字样。

在本系列教程的中级篇中，还会详细讲解怎么进一步的设计这个页面，但是在初级篇，就直接复制一遍好了。这样，主题的其他必要文件就完全生成了，我们的初级篇示例主题就做好了。

本节课相关资源下载

myTheme(基础篇-12) 本节课主题下载

实现的基本原理

两个跟随滚动插件

Sidebar Follow

Scroll Follow

添加跟随滚动模块的注意事项

尽量少的使用

设置合理的结构防止页面塌陷

如何使用 jquery.easing.js

第一步 引入插件

第二步 启用插件

可以应用的动画方法

插件的参数

duration 参数

easing 参数

complete 参数

其他注意事项

使用 slideUp 动画方法

一些基础知识

用标题划分文章层次

对于重要的文字进行加重处理

善用有序和无序列表

善用空格

标注文章引用内容

用预格式化描述代码等有格式的内容

使用其他修饰的注意事项

尽量多的使用图片

用心去写文章

一个反例

写在最后

HTML 结构

CSS 代码

jQuery 代码

更多技巧和方法

更平缓的显示

其他的实现方法

火狐浏览器

Firebug

查看选中部分源代码

Yslow

查看元素（三维视图）

自适应设计视图

IE9

有道云笔记

火狐剪报

notepad++

DD_belatedPNG.js 方法

unitpngfix.js 方法

实践对比测试

用户体验对比

发现问题

解决问题

得出结论：

显示更多的文章列表

在文章页面中显示上一篇、下一篇文章

当管理员登陆后显示管理工具条（AdminBar）

不同页面显示对应的标题（title)

本节课相关资源下载

本系列文章

生成 page.php 文件

生成 archive.php 文件

本节课相关资源下载

本系列文章

第一步引入插件

第二步启用插件