给页面 unload 加上效果

program - js

Written by xlingfairy

Wednesday, 11 March 2009 20:45

效果演示：http://my.dajiaozi.com

此站：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 我做了不同的处理，两种分辨率下的效果不同。

< Prev		Next >

Last Updated ( Friday, 13 March 2009 13:48 )

Add comment

Popular Contents

Recommend

Site Info

Links