需要解决的问题:鼠标停在图片上面的时候的 现在这个张图片的相关信息,
我的第一个感觉是使用鼠标事件:mousemove 当他/她停留在图片上面都 时候就可以触发相应显示的事件, mouseout离开的时候触发隐藏事件
但是在实际的完成中发现:鼠标停留在图片上 信息会不停的抖动,查阅相关资料发现,手册对mouseover事件的解释是:
注意:用户把鼠标移动一个像素,就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。
也就是说:我们鼠标是即使有一个像素的抖动都会触发显示事件 , 难怪会造成图片信息的资源
解决的办法是:使用hover,官方手册对这个方法的解释:
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。
实例代码:
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
分享到:
相关推荐
《锋利的jquery》利用mousemove方法实现鼠标跟动
今天用vue+原生js的mousemove事件,写了个拖动,发现只能慢慢拖动才行,鼠标只要移动快了,就失效,不能拖动了; 搞了半天在,总算解决了,但是问题的深层原理还没搞清楚,知道的大侠可以留言分享,下面直接上代码:...
鼠标移动事件的监控!
VB-MouseMove的用法,当鼠标路过不同图片时,状态栏将显示不同的状态和鼠标的位置,也就是显示鼠标的坐标。当鼠标悬停在对应的头像上时,状态栏显示该头像的文字提示,表明该图标是生气或是喜悦。
VisualBasic程序设计 形考任务三实验5鼠标MouseMove事件应用.zip
jquery magnify:把mousemove事件绑定在镜头上,稍微移动快了鼠标会脱离镜头,有明显BUG。 jquery imagezoom主要是为了满足传统商品展示,比如淘宝、京东的商品图片展示功能。特别是淘宝的商品图片均是用户自己上传...
鼠标移动事件的应用 procedure TForm1.DBGrid1MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer); begin self.X := X; self.Y := Y; Dbgrid1.Repaint; end;
鼠标的mousemove与mouseout事件,jquery制作的图片放大效果
代码片段: [removed][removed] [removed][removed] [removed] ... * $('.grid-content')... * '.grid-shade' 该元素为鼠标移入移出的遮罩层 */ $('.grid-content').mouseMove('.grid-shade') [removed]
PB实现PB鼠标经过变色的功能。当鼠标放到数据窗口上时,字的颜色就变成蓝色。
MouseMove的用法,当鼠标路过不同图片时,状态栏将显示不刚的状态和鼠标的位置VB6.0源代码
鼠标拖动实现窗口跳转,每一个子窗口是单独的背景
这是一款可以拖动拖拽表格来翻页,十分方便,界面也很漂亮的鼠标拖动翻页js特效代码。 function id(obj){ return document.getElementById(obj); } var page; var mx; var md=false; var sh=0; var en=...
本文实例为大家分享了javascript实现图片跟随鼠标移动的具体代码,供大家参考,具体内容如下 实现思路 1、给 document 绑定 mousemove 事件,获取鼠标的坐标:e.pageX ,e.pageY 2、将图片设置成绝对定位:...
C#321鼠标移动事件MouseMove 源代码
鼠标事件即鼠标操作点击图表的图形(如click、dblclick、contextmenu)或hover图表的图形(如mouseover、mouseout、mousemove)时触发的事件。 在ECharts中,用户的任何操作,都可能会触发相应的事件。在ECharts中...
<script src="js/jquery-3.2.1.min.js"> var OX = $('<div class="x"></div>'); var OY = $('<div class="y"><div>'); $('body').append(OX); $('body').append(OY); $(document).on('mousemove', ...
本文实例讲述了jQuery实现获取当前鼠标位置并输出功能。分享给大家供大家参考,具体如下: jQuery获取当前鼠标位置并输出 1.html <body onmousemove="mousemove(event)"></body> 2.css html, body { ...
要在界面上按下鼠标,拖动之后松开鼠标,然后就在界面上绘制出了线、矩形和圆形 代码用了抽象的概念,将三种图形抽象成了一个myShape,在代码中的体现就是定义了一个基类myShape类,其他所有的图像类都继承自这个...