给页面 unload 加上效果
作者:xlingfairy 来源:dajiaozi.com 发布时间:2009-03-12 12:32:00
此站:http://www.cbmland.com/ 的页面离开时的效果非常NB!佩服的很。
一开始,我以为是用事件 onunload,试了一把,跟本就没效果。因为,效果还不曾触发,页面以转走了。
后来分析了一下他的JS,发现是用 onclick 来完成的。
下面,我就来说说。
为什么不用 onunload ,我前面就说过了。而且,本司令以前做 跟踪 浏览者停留 在 某个页面 多长时间 的时候,就给上司提出过,用 onunload 完全不可行。
那么这个站的原理是什么呢?
用 onclick, document.documentElement.onclick
因为 点击一个链接,首先会触发一个 onclick 事件,这个事件会冒泡到document.documentElement, 在 documentElement 的 onclick 处理完后,那个 链接 才会接着处理。
很简单。为了达到这个目的,首先要过滤事件源,如果不是 <a>,就放弃,其次在判断这个 <a> 是不是一个锚点链接,是不是一个 javascript等。
看下面代码:
var collapseRightColumn = function(evt){
evt = window.event || evt;
var obj = evt.srcElement || evt.target;
while(obj && obj.tagName != 'A'){
obj = obj.parentNode;
}
if(obj == null || obj.tagName != 'A') return;
if(
(obj.getAttribute('name') != '' && obj.getAttribute('name') != null) ||
obj.getAttribute('href') == '' ||
obj.getAttribute('href') == null ||
/#/.test(obj.href) ||
/^javascript/.test(obj.href) ||
obj.onclick != undefined ||
(obj.target != '' && obj.target != '_self' && obj.target != '_top' && obj.target != '_parent')
)
return true;
else{
var a = function(){
var rightColumn = JObj.$('rightColumn');
var ani = JObj.UI.JAnimate.$(rightColumn);
ani.runFromCurrent({left:document.documentElement.clientWidth,alpha:10});
}
//如果 availWidth 大于 1024 只收缩 rightColumn
if(screen.availWidth > 1024)
a();
else{//否则,先隐藏 open 按 钮
var ani = JObj.UI.JAnimate.$('open1024');
ani.onComplete = a;
ani.runFromCurrent({top:-60});
}
}
}
JObj.addEvent(document.documentElement,'onclick',collapseRightColumn);
首先过滤事件源:
while(obj && obj.tagName != 'A'){
obj = obj.parentNode;
}
if(obj == null || obj.tagName != 'A') return;
因为 a 里可以包括 <span><img>等标签。
二,放弃 是 锚点的,没有href属性的,href='javascript:xxx'的,target 是新页的。
if(
(obj.getAttribute('name') != '' && obj.getAttribute('name') != null) ||
obj.getAttribute('href') == '' ||
obj.getAttribute('href') == null ||
/#/.test(obj.href) ||
/^javascript/.test(obj.href) ||
obj.onclick != undefined ||
(obj.target != '' && obj.target != '_self' && obj.target != '_top' && obj.target != '_parent')
)
因为 IE和FF的 getAttribute 取一个不存在的属性时,返回的值不同,所以用了: (obj.getAttribute('name') != '' && obj.getAttribute('name') != null) 这样的写法。
3,运行效果。具体怎么实现,就看个人造化了。
另外,如果在这个 onclick 事件,如果return false ,在IE下,你点了链接,页面也是不会跳转的。其它浏览器没影响。http://my.dajiaozi.com 上,我以加了效果,分辨率 > 1024 和 <= 1024 我做了不同的处理,两种分辨率下的效果不同。
猜你喜欢
- 如何在ADO中使用SQL函数?代码见下:<%Set conn1 = Server.CreateObjec
- 别人复制你网站的文章时自动加上注释,这个功能你在很多网站应该都有体会过,当我们复制一段内容时,就自动在文章后面加上了网站的一些
- SQL Server查询速度慢的原因有很,常见的有以下几种:1、没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷)2、I/
- 今天开始学习 YUI,加强一下对 JavaScript 的理解。1. 命名空间 YAHOO
- Sun公司和Zmanda在3月18号声称他们正在一起合作,为MySQL Enterprise用户交付一种全面、全局数据备份与恢复解决方案。现
- 假如一个页面中的文本采用的都是同样的字体、同样的字号、同样的颜色,做为读者的你能轻易的区分出哪里是标题,哪里是正文内容吗?所以通常情况下,设
- 见下:<form action="./calculation.asp"><input&nbs
- 加上设置字符编码的方法:response.setHeader("charset","gb2312")
- 如果我们希望把一个网站的更新实时发布到另一个网站上,最好的方法是通过 RSS 进行转载。如果只是需要简单的对更新的条目做个提示的话,使用 J
- 1:下载FCKEditor编辑器下载下来后解压到你网站的目录,最好就放在根目录下,文件夹名字就用FCKEditor;这里可以随便自己喜好,但
- 自动更新统计信息的基本算法是: · 如果表格是在 tempdb 数据库表的基数是小于 6,自动更新到表的每个六个修改。 · 如果表的基数是大
- 我一般看书喜欢做笔记,这份笔记不知道是什么时候看的什么书做的,也忘了是否是摘自其他地方,总之一份汇总,应该适合初学者,对于Javascrip
- 要下午传上的.结果事一多,忘记了.好不容易回来 . 这个和 dh20156 的那个,是差不多的。 找不到合适的图片,也
- 1.了解oracle外部表 外部表定义:结构被存放在数据字典,而表数据被放在OS文件中的表 作用:在数据库中查询OS文件的数据,还可以将OS
- select a.f_username from ( SELECT /*+parallel(gu,4)*/distinct gu.f_use
- 需要在两个文件中实现:首先,在talker.asp(在线名单)中做如下处理:<%p1=trim(application("v
- XML、 XLink、 Namespace、 DTD、 Schema、 CSS、 XHTML...假如你从未接触XML, 或许你会感觉不知从
- 网站上的Banner条,是网站用来作为盈利或者是发布一些重要的信息的工具。但是它又不能作为网页的主要内容,因为它的主要目的是吸引人的注意力,
- 因为要写个东西用到,所以百度了一下,居然有朋友乱写,而且比较多,都没有认真测试过,只对字符可以,但是对数字就不可以,而且通用性很差,需要修改
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 12 - Drag and Drop using