Posts Tagged ‘JS’

js中自定义mouseenter、mouseleave的写法

首先说一下什么是mouseenter事件:

实际上就是鼠标从外面移到某个元素里面(触发了目标方法)后,鼠标再在里面移动不会重新触发目标方法。moueseleave同理。

本身ie系列浏览器是有onmouseenter这个事件定义的,但是firefox之类的浏览器没有这个,所以只能模拟。

以下提供完美模拟的方法:

//ele为目标元素,type为事件类型不用'on',func为事件响应函数 var addEvent=function(ele,type,func){ if(window.document.all) ele.attachEvent('on'+type,func);//ie系列直接添加执行 else{//ff if(type==='mouseenter') ele.addEventListener('mouseover',this.withoutChildFunction(func),false); else if(type==='mouseleave') ele.addEventListener('mouseout',this.withoutChildFunction(func),false); el...
......[ More Detail ]

实际上js文件放最后是个好方案,但有更好的方案

问:javascript文件在页面加载的时候放哪里最好?

之前被这样问到,我马上就答:放最后。现在反省!实际上这个答案太肤浅了。

运行 Internet Explorer 7 或更早版本的浏览器在遇到 JavaScript 文件时会产生阻碍。通常,它们在以所谓的推测模式下载时速度足够快。但如果遇到 JavaScript,浏览器会跳出此模式,专门下载 JavaScript。而且多个Javascript是按串行形式下载,您将发现 JavaScript files 文件之间不会出现并行,也绝少会同时加载其他类型的文件。

所以我们会把所有其他东西都下载才开始下载js文件,所以我以前的答案是:把js放最后面。

而实际上在这个基础上还有技巧,就是把原来串行加载js的方式转为并行。具体做法:

function AsyncLoad(){ var l = ar...
......[ More Detail ]

js中方法类的拟静态属性、公有属性、私有属性

今天斗完地主,发现芋头童鞋在群里面提了一个很有趣的一个问题:

下列代码使Test方法类具有一个静态属性arr(数组)

var Test=function(){ } Test.prototype={ arr:[] } var test1=new Test(); test1.arr.push('ddd') var test2=new Test(); alert(test2.arr.length) //1

他问为什么两个实例(test1和test2)会共用一个arr数组。他要的是独立实例具有独立的那个arr(数组)属性,我刚开始还以为他问怎样可以共用一个数组。

后来给他提了一个解决方法:

下列代码使隶属于Test方法类的两个实例test1和test2具有各自的arr(数组)属性

var Test=function(){ this.arr=[];//原理很简单,初始化的时候使当前实例(this)的arr(数组)属性(来源于对象原型:T...
......[ More Detail ]

js事件、事件处理研究,关键字:event、传播

首先提出一个问题:

对于以下html代码:

点击这里去QQ首页(span链接) 点击这里去啊JOE首页

问题:请问如何使span模拟a元素(不要问我问什么不直接用a元素,某种情况下必须这么做,而且这里也不能用a元素),当点击span里面的内容的时候跳转到span的title属性的链接而不是a标签的链接。

你可以先想一下解决方法,鄙人有以下方法:

方法1:(我认为最简单的方法)

document.getElementById('spanLink').onclick=function(e){ e = window.event?window.event:e;//兼容ie和ff的event定义,ie不认dom2的事件模型 if (e.stopPropagation) {//FF浏览器下,dom2事件模型中event存在该方法 e.stopPropagation();//停止事件传播 e.currentTarget.parentNode.href=e.currentTarget.getAttribute('title'&...
......[ More Detail ]

我的在线简历第000000001版

很快就要找工作了,最近比较闲,于是把写了个在线网页版简历。水平有限,肯定不少错误。希望高人可以指出错误。

此简历基于XHTML1.0/Css2.0/Mootools 我不能像大大们那样用纯js写效果,只能用mootools来写了。 极端希望大家给点意见,我发现自己好像很多自己总结的知识不一定对的。有兴趣的朋友可以留言索取整个实例源码。 在线测试地址:http://xiebiji.com/works/resume/

......[ More Detail ]

【Mootools 1.2中文实例诠释】Fx.Scroll扩展类应用–带动画效果的锚点跳转

还是先看效果吧:

测试地址:mt1.2cn/fxScroll.html" target="_blank">http://xiebiji.com/works/mt1.2cn/fxScroll.html

实例例子压缩包:mt1.2cn

*原创文章转载请注明出处:http://xiebiji.com/2009/09/mtscroll 作者:小Joe

Jq有提供锚点跳转的效果实例(点击这里查看jq实现的方法),其实mootools也有的(Fx.Scroll扩展类),具体如下实现: ps.实例中介绍了一种全居中的css写法,有兴趣又不知道的同学可以研究一下了。^_^高手就瞄一下吧。

HTML代码:

1.我是第一锚点 2.哈?我也是锚点,我是第二个 3.第三个锚点就是我啦 4.什么?我居然是第四个锚点 5.我汗~我是最后一个锚点 目标一 目标二 目标三 目标四 目标五

css代码:

/*全居中*/ body,html{height:100%;} #container{width:420px; height:520px;background:#000;margin:-260px a...
......[ More Detail ]