随着科技进步的日新月异，摆在我们面前的液晶显示屏也越来越大，19”、20”、22”、24”…甚至更高。与此同时显示屏的亮度越来越亮，对比度越来越强，去年我刚换上3000:1对比度的三星显示屏，而如今上万比1的显示屏也稀松平常！在科技给我们带来强烈视觉效果享受的同时，突然间我们也会发现我们经常浏览的网站以及博客也和以前大不相同了！ 在原本简洁漂亮的网站上，突然出现了大量的高亮度的白色空间。

      高亮度及对比度给我们带来了清晰，同时也伤害了我们的眼睛！ 尤其是在你长时间阅读网页的情况下，你的眼睛会产生比以往更多倍的疲劳！原本简洁的白色现在成了造成你视力下降的致命原因之一！ 作为博客的管理者和建设者，如何改善读者的阅读环境也成为我们不得不考虑的因素之一！我们可以让博客的配色更适合阅读，这对你来说或许将是一个浩大的不可实现的工程！当然这也不是我们今天要讨论的问题。今天给大家介绍的是在不改变你博客的基础上，利用半透明的黑色遮蔽大部分网页，而只留下一部分类，为读者提供一种类似通过百叶窗观看窗外景物的模式来浏览你的博客——这就是Reading Blinds！

Reading Blinds可以做到：

1. 读者可以通过键盘快捷键调整“百叶窗”的大小，以决定自己的视觉范围；
2. “百叶窗”可以通过感知鼠标位置，自动变换位置
3. 在你阅读长篇文章时，可以有效地集中你的视力范围
4. 半透明的遮蔽并没有使你的整体视野范围缩小

☆演示效果：请点击我的日志标题右边的"Reading Blinds”

那么你想为你的博客添加这样的功能么？OK，下面正是你要寻找的内容

1. 请将下面的readingblinds.js 文件下载后，上传到你的主题文件夹/js目录下（如果没有，你可以在你的主题文件中创立一个js文件夹）
   readingblinds.js
   
   
2. 在适合的地方添加激活js效果的按钮
   

   1 2	<a href="javascript:var%20x=%20function(){var%20h=document.createElement('script');h.src='<?php bloginfo('template_url'); ?>/js/readingblinds.js';h.type='text/javascript';document.getElementsByTagName('head')[0].appendChild(h)}();"> Reading Blinds</a>

3. 你可以为你的的“激活按钮”添加适当的CSS样式，以适合你的主题，这里是一个示例：
   

   1 2 3 4 5 6 7 8 9 10 11

   .readingblinds { float:right; padding-left:22px; height:16px; line-height:16px; display:block; font-size:11px; } .readingblinds { background:url(images/eye.gif) left no-repeat; }

完成这三步之后就大功告成啦！刷新你的网页，点击“激活按钮”看看效果吧

声明：城市@后版权所有,未经授权请勿转载本博客日志到任何博客或论坛！

如果你喜欢我的文章，欢迎订阅。Google Reader | 鲜果 | 抓虾 | 九点 | QQ邮箱 | 有道 | 更多