让你的网页在滚动的时候 放屁

放屁绝对不是一个很高雅的行为,但是如果你比较喜欢恶搞,或者在愚人节,或者是一些比较特殊的网页设计中,可以通过 fartscroll.js 这个插件让你的网页在滚动的过程中 放屁。

直接打开 fatscroll.js 的官方页面(http://theonion.github.io/fartscroll.js/),滚动一下,你就可以听到了放屁声音了,你滚动的距离和速度不同,放屁的声音也不同。

使用方法也很简单,先下载插件包,解压出来之后,在网页中引入 fartscroll.min.js 这个文件,然后配置下面的参数等,启用这个插件:

    // 在文档中滚动 400 像素就放屁
$(document).fartscroll();

// 文档中每滚动 800 像素就放屁
$(document).fartscroll(800);

// 网页中没滚动 100 像素就放屁
$("body").fartscroll(100);

// 很多很多的屁
$("body").fartscroll(5);</pre>

仅供娱乐和恶搞哈,相信应该没有太多人喜欢在访问你网页的时候,听到你网页在放屁哈哈。

使用原生 JavaScript 在页面加载完成后处理多个函数

JavaScript 脚本语言的执行,是需要触发的。一般的做法就是在网页中,直接编写几个函数,有的在代码被加载的时候就被浏览器处理,或者使用类似下面的代码来触发实现函数的相关功能。

<div id=”link” onclick=”fun()” ></div>

上面代码的意思就是,当鼠标点击 id 为 link 的元素的时候,就触发了它的 onclick 事件,然后执行使用 JavaScript 定义的 fun 函数。这样的做法肯定是很不合理的,因为触发操作直接写进了 HTML 结构里面,内容和行为没有隔离开,对日后的二次开发或者修改带来不便。

需要注意的是,当事件处理与对应元素绑定起来的时候,只有在那个元素加载完之后才能进行操作。如果说把处理的脚本放在了 head 区域,浏览器会报错。因为下面的 HTML 元素还没有加载出来,head 中的处理脚本已经被处理了。

一个好的执行 JavaScript 代码的方法应该是 行为内容分离的在页面加载后处理 的。所以,处理 JavaScript 代码我们要用到 监听器 window 对象的 load 事件

监听器

监听器实际上的功能就是行为与内容分离的。以前需要在 HTML 中加上一些触发事件来触发 JavaScript 的相关函数,而现在直接在 JavaScript 中对某个元素的使用监听器,监听这个元素的事件,如果这个元素被触发了某些事件,在监听器中又定义了这个事件对应的处理函数,那么就会处理这个函数。

W3C 的标准方法叫做 addEventListener ,被IE9,chrome,firefox,opera所支持,写法:

window.addEventListener(‘load’,function,false);

早期 IE 中有 attachEvent 方法效果类似:

window.attachEvent(‘onload’,function);

使用监听器的方法也很简单,就是先获取页面中的某个元素,然后对这个元素使用监听器,定义监听的事件和对应的事件处理函数,就上文例子:

document.getElementById(‘link’).addEventListener(‘click’,fun,false);

关于监听器更加详细的使用说明,请见文末补充资料。

window.onload 事件

onload 事件只有在整个页面已经完全载入的时候才会被触发,我们将 JavaScript 代码写进 onload 事件中,就可以保证在 HTML 元素被加载完成之后,浏览器才会处理我们的 JavaScript 代码。基础的写法:

window.onload = function(){
//code
}

这样,这个函数里面的 code 会在加载完成之后被处理。但是,这种方法有个缺陷,就是只能用于这一个函数。页面中无法出现多个 window.onload 事件,如果出现了多个 onload 事件,那么后面的内容会覆盖前面的。

那么,我们可以这样做,在一个 window.onload 事件中,写上所有需要加载的函数名,然后在外面定义函数:

window.onload = function(){
func1();
func2();
}

function func1(){…}
function func2(){…}
这样做虽然可以,但是很不方便,因为我们需要把所有要加载的函数名都写进去,修改起来就会很麻烦。当然办法肯定是有的,jQuery 就特别提供了很强大的多脚本加载方法,那么原生的 JavaScript 肯定也有办法。

window.onload 同时处理多个函数

我们需要编写一个处理函数,先看一下代码:

    function addLoadListener(fn){
if (typeof window.addEventListener != ‘undefined’){
window.addEventListener(‘load’,fn,false);
}else if(typeof document.addEventListener != ‘undefined’){
document.addEventListener(‘load’,fn,false);
}else if (typeof window.attachEvent != ‘undefined’){
window.attachEvent(‘onload’,fn);
}else{
var oldfn = window.onload;
if(typeof window.onload != ‘function’){
window.onload = fn;
}else{
window.onload = function(){
oldfn();
fn();
};
}
}
}

简单的来解析一下,这个自定义的 addLoadListener 函数,传递一个 函数名称 作为参数。它首先判断浏览器是否支持相关的 监听器,如果支持 监听器,就使用 监听器 监听 window 对象的 onload 事件,然后处理这个函数。这段代码使用 if 语句判断了所有浏览器的监听事件,是跨浏览器兼容的。

我们把这段代码放在 JavaScript 代码段的最上面,然后在下面定义相关函数,然后使用下面语句来加载 JavaScript 函数了。

addLoadListener(func);
function func() {…}

这样,有什么 JavaScript 函数是需要在页面加载完成之后处理的,直接使用 addLoadListener 函数即可,而且可以使用多个。通常来说,所有的 JavaScript 最好都使用 onload 事件加载,以避免意外情况发生。

引用和补充资料

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

打开之后的效果是正常的

png 正常效果

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

IE6 下 png 文件的出错效果

成功的显示出了白色的背景,哦也!

使用 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]–>

DD_belatedPNG 在 IE6 下修正效果

刷新之后,成功修正!

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

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

Unitpngfix 在 IE6 下的修正效果

但是刷新之后,背景图片却出不来了。当然这个与 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 ,忍受一点效果的缺失?

如何高度自定义 QQ 邮件列表外观样式

2012/12/10 日补充: 这种方法目前已经失效,由于腾讯采用了某些方法,导致 nid 的值是动态变换的,使用这种方法,无法正确的订阅你的频道。具体的解决方法,正在测试中,暂时不要使用下面这种方式。

首先先来了解一下 QQ 邮件列表是什么。

QQ**邮件列表是一项免费的群发邮件服务。通过它,您可以在网站上加入订阅入口,来获取您的订户用户订阅后,就能方便的给他们群发邮件了。如果你写博客,它能自动将最新的博客文章发给读者。如果你开网店,可以用它批量通知顾客店铺的最新优惠。 如果你正管理一个组织**,通过它,能快速向组织成员发布公告。使用 QQ 邮件列表,让您的邮件发得更多、更快、更准!
总之,这是一个让帅哥更帅,让美女更美,让垃圾邮件正常群发的腾讯唯一几个免费的服务。很多网站上,都有 QQ 列表,你可以输入邮箱来订阅网站内容,站长就可以发一些资讯到你的邮箱里。

我们知道,添加这个服务,就需要申请代码,然后把代码放到网站上。但是,它生成的外观样式,并不一定符合我们网站的风格样式,本文潜行者 m 就要跟大家一起分析一下他们的代码,然后进行自定义修改,来符合自己网站的风格。获取代码有两种形式,一种是图片的形式,另一种是一个文本输入框,直接填写上邮箱提交。下面潜行者 m 一一分析。

图片形式:

图片形式,他们允许定义一些简单的参数:

我们看一下生成的代码

<!--QQ邮件列表订阅嵌入代码--><a target="_blank" href="http://list.qq.com/cgi-bin/qf_invite?id=55c8d4cfd86c2322b0da011d72769e61e8a471a03fa52b74">
<img alt="填写您的邮件地址,订阅我们的精彩内容:" border="0" src="http://rescdn.list.qq.com/zh_CN/htmledition/images/qunfa/manage/picMode_light_l.png"/></a>

从代码中,就可以看出,很简单的两个标签。使用了一个 a 标签,包裹了一个 img。而这个 img 指向的图片地址就是http://rescdn.list.qq.com/zh_CN/htmledition/images/qunfa/manage/picMode_light_l.png。这样,我们修改这个图片地址成我们自己准备好的地址就可以了。同时我们还可以加上一些css代码等等。只需要a标签中的href属性为http://list.qq.com/cgi-bin/qf_invite?id=55c8d4cfd86c2322b0da011d72769e61e8a471a03fa52b74即可,因为这个地址是我们订阅的填写页面。

代码方式:

代码方式要稍微麻烦一点,但是省下很多功夫,因为用户不用再打开一个页面去填写邮箱了。

我们再来看看代码:

<!--QQ邮件列表订阅嵌入代码-->
<script >
var nId = "3105746ef562384a0ffbc67926fa2810b331ea5d6a5eb435",nWidth="auto",sColor="light",sText="填写您的邮件地址,订阅我们的精彩内容:" ;;
</script>
<script src="http://list.qq.com/zh_CN/htmledition/js/qf/page/qfcode.js" charset="gb18030"></script>

这段代码里,上面那一句是定义了几个参数,其中 nID 参数,是你这个订阅频道独有的,要传输到下面的 qfcode.js 使用。那这个 qfcode.js 文件的内容是什么呢?直接打开http://list.qq.com/zh_CN/htmledition/js/qf/page/qfcode.js这个文件看一下就知道了。由于代码比较多,我把关键代码提出来:

"<div class="rssbook ",sColor,
" " style="width:",nWidth," "><p class="info">",sText,"</p>",
"<div class="mailInput">",
"<form action="http://list.qq.com/cgi-bin/qf_compose_send" target='_blank' method='post'>",
"<input type="hidden" name="t" value="qf_booked_feedback">",
"<input type="hidden" name="id" value="",nId,"">",
"<input  id="to" name="to" type="text" class="rsstxt" value=""/>",
"<div class="rssbutton"><input type="submit" value="订阅"></div>",
"</form>",
"</div></div>"].join(""));

这些代码的意思,就是说,在页面中输出了一个表单(form),它提交的地址就是http://list.qq.com/cgi-bin/qf_compose_send,表单里面有三个input元素,其中两个是隐藏的,用来发送参数的,有一个是发送填写的邮箱的。这两个隐藏表单中发送的内容,就是你的nID等。

好,弄清楚了这个,我们就按照自己的风格,动手做一个表单,然后根据它的这个表单,填写上参数,进行提交就可以了。目前,从这个代码中,潜行者 m 提取出以下几个信息:nID 3105746ef562384a0ffbc67926fa2810b331ea5d6a5eb435 、 POST http://list.qq.com/cgi-bin/qf_compose_send。那现在我们自己写一个提交表单。

<form action="http://list.qq.com/cgi-bin/qf_compose_send" target="_blank" method="post">
<input type="hidden" name="t" value="qf_booked_feedback" />
<input type="hidden" name="id" value="3105746ef562384a0ffbc67926fa2810b331ea5d6a5eb435" />
<input type="text" id="to" name="to" value="" placeholder="输入你的邮箱" />
<input type="submit" value="订阅" /></form>

这样就可以了,我们只要填写上,点击订阅,就会订阅了。我们自己写出了这个表单,然后再对其应用 css 修改它的样式,来符合我们网站的风格,这样就大功告成了。

验证网页发现的几点知识点

前几天,重新做了一下自己的个人介绍页面(www.yujiangshui.com),由于忙,一直没有验证,今天验证了一下,果然不小心出现了几处错误.

在修正网页不规范的过程中,又学到了几个平时不注意的小细节,写这篇文章与大家分享一下.

1,<span>标签中,不能放<h*>标题标签.

<span>标签和<div>标签的区别,一个是行内元素,不换行而div默认是占正行的.一直以来,只注意到了这个区别,而把这两个标签都用来布局了.这是错误的,它们俩的语义不同.<div>是区域的意思,这个才是布局用到的元素.而<span>只是一个比<p>还小的一篇文章中一句话,当然不能包含一个比<p>还大的 <h*>标题标签了.

所以正确的做法是,用div布局,如果需要行内效果,使用css的display:inline;.

2,<script>标签已经不需要任何属性了.

在很久以前,应用在网页中的脚本其实有两种,一种是javascript另一种是微软的vbscript,所以网页中的<script>标签中,必须加上一个属性language,属性值就是javascript或者vbscript,用来区别.

当然,现在几乎没有几个人在网页中使用vbscript,甚至很多人都不知道.今天在验证的时候,w3c给出的建议是:<script>标签的language属性以及被废除,你可以非常放心的去掉它了.

也就是说,以后要使用javascript,只需要写<script>javascript代码</script>就可以了.

验证页面规范,真的有很多好处,可以让你发现平时注意不到的不规范的地方.但是,不需要刻意的强调错误的修正.你可以验证一下淘宝,首页有1000多个错误,就连非常简单的百度首页,也查出了几个错误.这些大网站,有实力非常雄厚的前端团队,结果还有错误的存在.这说明,还是以网站的实际效果为主,多少个不规范的地方也无所谓.