金山词霸即划即译设计随笔(二)

原创 2007年09月13日 12:01:00

 

下面按照上述步骤,一一细说。

用 javascript 获取当页面上鼠标(光标)位置在许多情况下都会用到,比如拖放,悬停提示(tooltip) 等等。当然,这里我们依然要面对浏览器的兼容问题,在不同的浏览器下,对这些相关的属性处理方式也不同,本文详细介绍了浏览器在处理这些属性时的差异和最终的解决方法。 


因为在这篇文章中我们需要多次获取鼠标位置,所以我们设计了一个 mousePosition 函数,它包含一个参数 : event 。

因为我们要在 MSIE 和其他浏览器下运行,Firefox 和其他浏览器用 event.pageX 和 event.pageY 来表示鼠标相对于文档的位置,如果你有一个 500*500 的窗口并且你的鼠标在绝对中间,那么 pageX 和 pageY  的值都是 250,如果你向下滚动  500, 那么 pageY 将变成 750。

MSIE 正好相反,它使用 event.clientX 和 event.clientY 表示鼠标相当于窗口的位置,而不是文档。在同样的例子中,如果你向下滚动500,clientY 依然是 250,因此,我们需要添加 scrollLeft 和 scrollTop 这两个相对于文档的属性。最后,MSIE 中文档并不是从 0,0 开始,而是通常有一个小的边框(通常是 2 象素),边框的大小定义在  document.body.clientLeft 和 clientTop 中,我们也把这些加进去。

下面是mousePosition(ev)方法的代码:

function mousePosition(ev)...{
    
if(ev.pageX || ev.pageY)...{
        
return ...{x:ev.pageX, y:ev.pageY};
    }

    
return ...{
        x:ev.clientX 
+ document.body.scrollLeft - document.body.clientLeft,
        y:ev.clientY 
+ document.body.scrollTop  - document.body.clientTop
    }
;
}

 

上面的方法可以这样调用:

例如,我们为整个窗口注册onmousemove事件,定义了方法mouseMove(ev),用于监视鼠标移动的轨迹坐标:

 

document.onmousemove = mouseMove;//注册onmousemove事件

function mouseMove(ev)...{
    ev 
= ev || window.event;
    
var mousePos = mousePosition(ev);//调用上述mousePosition()方法
//
下面,我们就可以这样获取鼠标位置了
  var x=mousePosition.x;//获取鼠标所在位置的x轴坐标
    var y=mousePosition.y;//获取鼠标所在位置的y轴坐标

}
 

 上述代码只是举个例子而已,监视的是窗体的mousemove事件,而我们在设计此例时,却不能用这个。想一下,我们的查询是在用户用鼠标选择某一文本后执行的,因此,我们要用的事件无疑是onmouseup了,在用户选定文本以后才触发。具体代码如下:

document.onmouseup=keyUp;//为窗体注册onmouseup事件
function keyUp(ev)...{
    ev 
= ev || window.event;
    
var mousePos = mousePosition(ev);

    
var x = mousePos.x;
    
var y= mousePos.y;
}

 

好了,到这里我们已经解决鼠标的定位了,为以后的结果显示层定位做好了准备。

MSN跟我交流

星际译王,金山词霸,有道词典,词库下载 2

七国语言词典 (19): [七国语言]英汉机械工程大词典 13213[七国语言]英汉信息大词典 14788[七国语言]英汉数学大词典 12736[七国语言]英汉农业大词典 15560[七国语言]...

金山词霸2016.1.3.3 手动去广告方法

该词典的2012版可以通过修改xml文件实现去广告,之前有人发过百度经验了。然而2016版中根本没有xml文件了,故需要新的方法。        先看一看去广告前后的效果对比: 金山词霸的广告主要...

详解如何从安卓金山词霸导出单词本上的单词

因为金山词霸没有带导出功能也没有在线同步功能,所以会比较蛋疼,像我这种读专业书,边查边存的,积累了很多词汇,肯定要导出到电脑才会爽。 我们可以这样,首先在你的sdcard上找到powerword.d...

金山词霸抓词机理 -- HOOK消息功能的使用

内容提要 Windows系统是建立在事件驱动的机制上的,说穿了就是整个系统都是通过消息的传递来实现的。而钩子是Windows系统中非常重要的系统接口,用它可以截获并处理送给其他应用程序的消息,来完...

Android自定义View之仿金山词霸加载效果

今天,闲来无事,看到金山词霸的加载时的LoadingView甚是不错,于是就小模仿了一下。先看效果: 下面切入正题,先说下思路: 1.确定中心点的坐标 2.根据正余弦函数,确定8个小圆的圆心坐标...

解决金山词霸2010牛津旗舰版破解词典丢失的方法

金山词霸丢失牛津词典的问题似乎从2009版就开始了,到了金山词霸2010版这个问题依旧没有解决。今天看到winzheng的Anson4朋友给出了一个解决金山词霸2010牛津旗舰版词典丢失的解决办法,贴...
  • bat67
  • bat67
  • 2017年01月14日 15:02
  • 1059

自定义加载等待动画,仿金山词霸

打开金山词霸,当加载下一页或者切换页面时,数据没有立即加载出来,会出现一个LoadingView 一起看看效果: 分析一下效果图,关键的技术点如下:1.绘制除出9个圆点(圆点的个数可以自己定义...

黑马程序员 手写山寨版的金山词霸

---------------------- ASP.Net+Unity开发、.Net培训、期待与您交流! ----------------------...

控制其他程序1(金山词霸2009)

基于个人需要,想控制其他程序,获取其他程序接运行结果。 具体来说,现在我想要在我的程序中控制金山词霸查询一个单词,最后能在我的程序中显示查询的结果。   就像把其他程序作为一个函数来调用,首先想...

金山词霸没落了么?

作为英语小白,金山词霸是我电脑的必备软件。用金山词霸的历史几乎与用电脑的历史是相同的。 之前好多年用的都是金山词霸2005,后来想起作为一个IT业人士,总用盗版似乎不够仗义。我一直比较尊敬金山,因为...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:金山词霸即划即译设计随笔(二)
举报原因:
原因补充:

(最多只允许输入30个字)