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

原创 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跟我交流

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

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

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

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

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

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

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

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

金山词霸没落了么?

作为英语小白,金山词霸是我电脑的必备软件。用金山词霸的历史几乎与用电脑的历史是相同的。 之前好多年用的都是金山词霸2005,后来想起作为一个IT业人士,总用盗版似乎不够仗义。我一直比较尊敬金山,因为...

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

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

金山词霸生词本生成器

金山词霸除了单词查词功能,大家用得比较多的是金山词霸的生词本功能。 不可否认,金山词霸是个非常棒的英文单词查询工具,但其它功能还是有很多功能不完善。如生词本功能。 每一个人学单词时,学的顺序和内容都...
  • skyhh
  • skyhh
  • 2015-04-06 11:28
  • 2037

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

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

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

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

“金山词霸”屏幕取词技术揭密(讨论稿)

主题  屏幕取词技术系列讲座(一)  作者   亦东  很多人对这个问题感兴趣。  原因是这项技术让人感觉很神奇,也很有商业价值。  现在词典市场金山词霸占了绝对优势,所以再做字典也没什么前途了。我就...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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