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); 
}

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) {
    
//移出事件,省略
}

捕获鼠标位置的自定义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 " ;


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
    }
;
}

写在后面的话,目前团队里面也有几个人了(开心啊,队伍总算起来了),对网页快照项目的原理也很熟悉,希望分配一下任务,或者讨论一下怎么利用业余时间,几个人一起发力,发挥各自的长处,把这个项目作优秀,做perfect了。怎样?:)


本文转自Kai的世界,道法自然博客园博客,原文链接:http://www.cnblogs.com/kaima/archive/2006/12/31/609192.html,如需转载请自行联系原作者。

目录
相关文章
|
2月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
85 3
|
3月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
1月前
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
40 5
|
1月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
24 2
|
1月前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
51 1
|
1月前
|
自然语言处理 JavaScript 前端开发
[JS]同事看了我做的this笔记,直摇头,坦言:我还是参考启发博文吧
本文介绍了JavaScript中`this`关键字的重要性和使用规则。作者回顾了早期笔记,总结了`this`指向的各种情况,并分享了最新的理解。文章强调了`this`在不同上下文中的指向,包括对象方法、全局函数、箭头函数等,并提供了改变`this`指向的方法。适合JavaScript开发者参考。
48 2
|
2月前
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
42 4
js学习--制作猜数字
|
2月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
52 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
3月前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
3月前
|
JavaScript 前端开发 API
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
该文章跟随月影老师的指导,探讨了编写优质JavaScript代码的三大原则:各司其职、组件封装与过程抽象,通过具体示例讲解了如何在实际开发中应用这些原则以提高代码质量和可维护性。
紧跟月影大佬的步伐,一起来学习如何写好JS(上)