<p>
前不久给同志们介绍了压缩JavaScirpt和CSS文件的<a href="https://blog.yiguochen.com/minify.html" title="压缩JS/CSS的利器–minify">minify</a>，这个是用PHP5开发的基于服务端的压缩，并且需要Apache+PHP环境的支持。虽然压缩效果还是比较理想，但是有环境限制，今天我再给同志们介绍一款可以在本机压缩JavaScirpt和CSS文件的程序：YUI Compressor。</p>
<p>YUI Compressor是Yahoo!开发的一个专门用于压缩JavaScript和CSS文件的小工具，操作系统中需要jdk环境的支持。所有要使用这个小工具，得先安装jdk，然后配置JAVA_HOME的环境变量。</p>
<p>jdk的下载地址：<a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk6-jsp-136632.html" title="jdk的下载地址" target="_blank">http://www.oracle.com/technetwork/java/javase/downloads/jdk6-jsp-136632.html</a></p>
阅读全文 »
- 11th 09 2010
- 前端优化
- YUI, 压缩CSS, 压缩JavaScript
<p>这是一个基于jQuery的效果，当鼠标在小图片上悬停时，会弹出一个大图，该大图会跟随鼠标的移动而移动。这个效果最初源于小敏同志的一个想法，刚开始做的时候只能实现弹出的图片是固定的，不能随鼠标移动，最后加以改善，终于实现了比较理想的效果。今天就把制作该效果的经验与大家一同分享。先看看最终效果演示：</p>
<div class="art_inner_img"><img src="https://blog.yiguochen.com/wp-content/uploads/2010/09/jquery-image-hover-zoom-demo.jpg" alt="基于jQuery的鼠标悬停时放大图片的效果演示" /></div>
<p>每刷新一次页面，就切换一个背景图，并且切换的顺序是随机的，第一次看到这个效果的时候虽然觉得这个效果有点意思，但并没有深究。直到前不久看到<a href="http://bbs.yuyadong.com/thread.php?fid=87" title="亚当学院的JavaScript视频教程" target="_blank">当哥</a>的JavaScript视频教程时，才突然有了灵感，原来实现这个效果是这么的简单。</p>
<p>先看看演示效果：</p>
<div class="demo"><a href="https://blog.yiguochen.com/wp-content/uploads/demo/random-bodyBg/index.html" target="_blank">查看演示</a></div>
<p>你可以准备很多张背景图，并且背景图的切换都是随机的，不过由于每次刷新一次页面都会加载一个背景图片，这在一定程度上增大了服务器的负载。不过这些都不是本文讨论的范畴，看看下面的JavaScript代码：</p>
阅读全文 »
- 31st 08 2010
- JavaScript
- 网页背景
现在使用HTML5的简短的Doctype声明已经成了一种流行趋势：<!DOCTYPE html>，这个HTML5的声明支持Firefox、Chrome等现代浏览器和IE6/7/8等浏览器，这个已经在本博的另一篇文章22个HTML5的初级技巧中有讲解过。
本博也在前不久也把原来的XHTML的Doctype声明换成了HTML5的Doctype声明，换过之后才发觉一个问题，所有网页上显示的图片（背景图片除外）都会在图片的下方多出3.5px，如下图所示：
<p>经常会有些同志问我有没有好用的基于jQuery的弹出层插件，我通常都会毫不犹豫的推荐他这款插件–BlockUI。我也极少接触到其他的jQuery弹出层插件，因为我觉得有了BlockUI这款功能强大的插件已经能满足我的需求了。</p>
<p>先看看BlockUI的演示效果：</p>
<div class="demo"><a href="https://blog.yiguochen.com/wp-content/uploads/demo/jquery-blockui/index.html" target="_blank">查看演示</a></div>
<p>BlockUI支持很多常见的弹出层，表单、图片、div窗口等。那么这个插件该如何使用呢？接着往下看。</p>
<p>先导入jQuery的库文件(小提示：使用Google服务器的压缩版jQuery库文件加载速度会更快)，然后再导入BlockUI的库文件，如果你觉得库文件比较大你可以使用压缩技术对其进行压缩，本博在另一篇文章中详细的说明了<a href="https://blog.yiguochen.com/minify.html" target="_blank" title="压缩JS/CSS的利器–minify">javascript文件和CSS文件的压缩</a>。</p>