Snap.com那样的JS效果已经作出,兼容IE6.0 up 和 FF2.0,供队伍里的学习参考
预览地址:http://www.365rss.cn/WebPreview.aspx
底层代码都没什么说的,就是以前萧寒和我合作公布的。
效率有很大的问题。
客户端脚本,值得一说的是,要兼容FireFox2.0,需要作一些额外的判断,同时IE和FF对DOM对象动态添加事件也有区别,对当前鼠标的位置判断也有区别,关键代码如下(具体内容请点右键查看js源码)
if(window.document.all){//IE
oList[i].attachEvent("onmouseover", WebPreview_go);
oList[i].attachEvent("onmouseout", WebPreview_co);
}else{//IE之外,主要指FF
oList[i].addEventListener("mouseover", WebPreview_go, false);
oList[i].addEventListener("mouseout", WebPreview_co, false);
}
oList[i].attachEvent("onmouseover", WebPreview_go);
oList[i].attachEvent("onmouseout", WebPreview_co);
}else{//IE之外,主要指FF
oList[i].addEventListener("mouseover", WebPreview_go, false);
oList[i].addEventListener("mouseout", WebPreview_co, false);
}
function WebPreview_go(e) {
e = e || window.event;//兼容IE和FF
var link = window.document.all != null ? e.srcElement : e.target;//e.target为FF下的写法
……
}
function WebPreview_co(e){
//移出事件,省略
}
e = e || window.event;//兼容IE和FF
var link = window.document.all != null ? e.srcElement : e.target;//e.target为FF下的写法
……
}
function WebPreview_co(e){
//移出事件,省略
}
捕获鼠标位置的自定义js类,兼容IE和FF,调用的时候
var mousePos = WebPreview_mouseCoords(e);
var t = $get('tips');
t.style.display="block";
t.style.left=mousePos.x +10+ "px";
t.style.top =mousePos.y +10+ "px";
var t = $get('tips');
t.style.display="block";
t.style.left=mousePos.x +10+ "px";
t.style.top =mousePos.y +10+ "px";
function WebPreview_mouseCoords(e){
if(e.pageX || e.pageY){//FF下写法
return {x:e.pageX, y:e.pageY};
}
return {
x:e.clientX + document.body.scrollLeft - document.body.clientLeft,
y:e.clientY + document.body.scrollTop - document.body.clientTop
};
}
if(e.pageX || e.pageY){//FF下写法
return {x:e.pageX, y:e.pageY};
}
return {
x:e.clientX + document.body.scrollLeft - document.body.clientLeft,
y:e.clientY + document.body.scrollTop - document.body.clientTop
};
}
写在后面的话,目前团队里面也有几个人了(开心啊,队伍总算起来了),对网页快照项目的原理也很熟悉,希望分配一下任务,或者讨论一下怎么利用业余时间,几个人一起发力,发挥各自的长处,把这个项目作优秀,做perfect了。怎样?:)
本博客所有随笔,若未明确标示为转载或未带有原文链接,皆为原创。
本博客所有随笔版权归博客园和kai.ma所有,欢迎转载,转载请保留:
本博客所有随笔版权归博客园和kai.ma所有,欢迎转载,转载请保留:
- 出处:http://kaima.cnblogs.com
- 作者:kai.ma