首页 >> JavaScript >> Javascript特效>> 给页面 unload 加上效果正文

给页面 unload 加上效果

Javascript特效 时间:2009-3-12 

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

标签:效果 JavaScript特效 onclick unload 

猜你喜欢:

电脑版 asp之家JavaScript
m.aspxhome.com 闽ICP备06017341号