使用JavaScript实现随机切换网页背景图

<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>

阅读全文 »

解决HTML5中图片元素多出来的3.5px

现在使用HTML5的简短的Doctype声明已经成了一种流行趋势:<!DOCTYPE html>,这个HTML5的声明支持Firefox、Chrome等现代浏览器和IE6/7/8等浏览器,这个已经在本博的另一篇文章22个HTML5的初级技巧中有讲解过。

本博也在前不久也把原来的XHTML的Doctype声明换成了HTML5的Doctype声明,换过之后才发觉一个问题,所有网页上显示的图片(背景图片除外)都会在图片的下方多出3.5px,如下图所示:

HTML5中图片元素多出来的3.5px
阅读全文 »

强大的jQuery弹出层插件–BlockUI

<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>

阅读全文 »

wordpress标签页的制作

最近开始迷恋上豆瓣网,在用标签来搜索豆瓣的电影的时候很方便,并且豆瓣电影有一个单独的标签页,可以列出所有的标签,我觉得这对于用户来说是很方便的。于是我就想,这么有利于用户体验的功能为什么不给自己的网站也做个呢?

wordpress可以使用wp_tag_cloud()函数输出标签云,你可以先看看实际的演示效果:

wp_tag_cloud()函数的参数解说

在sidebar.php模板文件中找到了标签云的输出代码:

<?php wp_tag_cloud('unit=px&smallest=11&largest=20&number=45&orderby=count'); ?>
阅读全文 »

22个HTML5的初级技巧

Web技术的发展速度太快了,如果你不与时俱进,就会被淘汰。因此,为了应对即将到来的HTML5,本文总结了22个HTML5的初级技巧,希望能对你进一步学习好HTML5会有所帮助。

1. 新的Doctype声明

XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5的Doctype声明很短,看到这个声明相信你马上就能记住,不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。

<!DOCTYPE html>

HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式,你可能会奇怪IE6/7居然也可以支持HTML5 Doctype,事实上,IE是只要doctype符合 这种格式,都会进入标准模式。

阅读全文 »