超酷Ajax缓冲的滑动效果Box
标签: ajax, JavaScript, js, php, 博客技巧Featured, JavaScript
就像你可以在我文章后面看到的，非常酷的一个BOX吧。自从那天从老帕那里看来后，就自己弄下来测试了。现在，也已经完成了。今天，就分享出来给大家吧。并且给一些相关的设置。到达到美化与优化同步进行。事实上，又是一个简单设置，实现超酷效果的东西。
准备工作
首先，你需要下载来实现这个效果的代码。你可以在这里下载。OK，你已经得到它了吧，那么解压，打开glider.css，把Box的width和height设置成你想要的大小。如果你的文章的宽度为：450px的话，我建议你把box的宽度设置成423px高度大概在300px以内吧，不要太大，让别人看得不舒服，比如我的是245px。
设置完毕完，把这个文件连同刚才下载下来的文件传到你的网站目录下，比如在根目录建立一个yourfile文件夹，那么你的文件地址为：
/yourfile/(包括glider.css 、effects.js、glider.js、prototype.js四个文件)
接下来，你要在你的网站顶部，比如wordpress是在header.php中设置这些文件有引用，具体是在第一个<body>前面的<head> 引用文件 </head>里加入。如果你不知道怎样引用，用如下代码：
内容设置：
在相应的地方，比如文章后面，就像我的博客那样，加入如下代码：
那么，现在，你的站上已经显示了一个BOX，这个时候，对CSS和HTML的设置，就看你自己了，我相信你完全能把它设置得更漂亮、更适合自己的品味。
当然，最重要的还是要在BOX的各个section中加入相关的内容。比如我，加入了关联文章、随机文章、插件推荐、标签云、以及热门文章，当然，你还可以设置比如google reader的分享文章等，或者其他自己想要的。前XX文章类型的功能可以用中文 WordPress 工具箱 1.2来实现，其他的，你想要实现的功能可以在这里找到插件。
推荐：Google Reader分享
这里再介绍一下Google Reader分享文章的设置吧，以便大家可以分享文章：
在Google Reader你可以找到下图位置：
点击进行设置，在页面你会看到下图显示的位置：
接下来，就是如下图的页面了，就看你怎么设置了，推荐如下设置：
这样就可以了，复制代码，入到你的Box中吧，享受分享的快乐。
推荐：提高载入速度
在这里，是用php来压缩js.让你的js加载对你网站的速度影响不不大，是Giki提醒我的，具体方法来自于北极冰仔。
1、在你的JS文件的顶部加入如下代码：
- // check to see if the user has enabled gzip compression in the WordPress admin panel<br />
- if ( ob_get_length() === FALSE and !ini_get('zlib.output_compression') and ini_get('output_handler') != 'ob_gzhandler' and ini_get('output_handler') != 'mb_output_handler' ) {<br />
- ob_start('ob_gzhandler');<br />
- }
// The headers below tell the browser to cache the file and also tell the browser it is JavaScript.
header("Cache-Control: public");
header("Pragma: cache");
$offset = 60*60*24*60;
$ExpStr = "Expires: ".gmdate("D, d M Y H:i:s",time() + $offset)." GMT";
$LmStr = "Last-Modified: ".gmdate("D, d M Y H:i:s",filemtime(__FILE__))." GMT";
header($ExpStr);
header($LmStr);
header(‘Content-Type: text/javascript; charset: UTF-8′);
?>
2、把文件别存为：yourfile.js.php。当然，有引用上，你要引用的就是yourfile.js.php而不是yourfile.js了。其他设置还是一样。经过Giki帮助测试，确实可以提高速度。
总结
OK，慢慢享受你的按劳动成果吧，这不关sofish的事，因为一切都是你自己设置得来的，我只是提供你一些心得。哈哈…喜欢吗?希望这是对你有用的…
2007.11.11 2:02 pm
2007.11.11 2:08 pm
2007.11.11 2:10 pm
2007.11.11 2:16 pm
2007.11.11 2:21 pm
2007.11.11 2:27 pm
2007.11.11 2:51 pm
2007.11.11 5:54 pm
2007.11.11 7:51 pm
~~~
2007.11.11 9:25 pm
2007.11.12 8:18 pm
2007.11.12 10:55 pm
2007.11.13 1:22 am
2007.11.13 4:50 pm
2007.11.13 8:42 pm
2007.11.13 8:45 pm
2007.11.15 12:03 am
2007.12.13 9:51 pm
2008.08.28 6:27 pm
2009.02.27 11:29 am