在开发企业内容信件系统模块时,需要实现这样的功能:
table 中有 from title delete 三个 <td>
其中title中显示信件的标题
当用户不需要查看该信件的所有内容,而只需要查看大体内容时,只需要将鼠标移动到title 的td中,则在鼠标焦点附近会显示出content内容。
具体做法有两种:
第一种:(content 直接写入td)
1. 在初始化table 内容时,将content内容以 content=“${message.msg}” 的形式写入 td中,当鼠标进入td后,触发hover事件。
2. hover 事件获取到 鼠标的位置 $locx=event.locX ; $locy=event.locY;
3. 将原来隐藏的div class=“mydiv” 显示在 鼠标触发事件的位置处,并将content作为mydiv 的显示内容
具体代码如下:
$(".hrefClass").hover(function(event){
$thiss=$(this);
$locx=event.pageX;
$locy=event.pageY;
$(".mydiv").css("left",$locx+8).css("top",$locy).text($thiss.attr("content"));
$setTime=setTimeout(function(){
$(".mydiv").css("left",$locx+8).css("top",$locy).text($thiss.attr("content")).slideDown("slow");
},500);
},function(){
$(".mydiv").slideUp();
clearTimeout($setTime);
})
为什么css("left",$locx+8) 而不是 css("left",$locx) 呢?
因为当mydiv在 鼠标位置时,会将td 遮挡住,这样 鼠标就算是 mouseout td了,也就会触发 hover 的第二个函数,将 mydiv 隐藏。而当mydiv 隐藏时,鼠标又mouseover td了,又一次触发hover 的一个函数。如此循环下去,用户就会看到 mydiv 一直在重复 出现-》隐藏 动作。
而将mydiv 显示的位置离 mouse 的原始位置,则可以避免这一点。
如果用户刚进入td 立刻就离开了该 td 则表示他并不希望查看message 的内容,对于这种情况也要加以区别
我使用了setTimeout 来使mydiv 延迟500毫秒显示,如果在这500毫秒期间,用户离开了td ,则不显示mydiv
第二种:(Jquery $.post)
1. 鼠标进入td ,触发hover事件
2.获取到message的id,通过$.post 将id 传到 后台的messageAction ,查询到该 message 的内容
3.当message内容从后台返回后,$.post 调用回调函数,将返回的JSON数据解析后,交给mydiv 作为显示内容来显示
4.当鼠标从td 离开时,触发hover的第二个函数,将mydiv 隐藏
具体代码如下:
var startTime=0;
var endTime;
$(".message_id").css("cursor","pointer");
$(".message_id").hover(function(ee){
var dateTime=new Date();
endTime=dateTime.getTime();
if(endTime-startTime<=1000){
return false;
}
$thiss=$(this);
$locx=ee.pageX;
$locy=ee.pageY;
timeOutId=setTimeout(
function(){
$manager_id= $thiss.text();
$url1="messageAction!findMessage.action?message.id="+$thiss.attr("messageId");
$.post(
$url1,
function(json){
var data=eval((json.theaterString));
$(".mywindow").text(data[0].userName);
$(".mywindow").css("left",$locx).css("top",$locy);
$(".mywindow").css("display","block");
},
"json"
);
}
,300);
startTime=endTime;
},function(){
$(".mywindow").css("display","none");
clearTimeout(timeoutId);
return false;
})
如果用户频繁地或者无意的一直在table中滑动鼠标,而每次进入一个td都会调用ajax 来与后台进行交互,这样势必会对网络和后台服务器带来很大的开销,因此我使用了代码来控制用户的行为,要求前后两次mouseover 时间间隔必须大于1000毫秒
startTime=0
endTime=mouseover(time)
if(endTime-startTime<1000) 不执行
否则 发送请求,显示mydiv ,startTime=endTime;
如果用户刚进入td 立刻就离开了该 td 则表示他并不希望查看message 的内容,对于这种情况也要加以区别
我使用了setTimeout 来使mydiv 延迟500毫秒显示,如果在这500毫秒期间,用户离开了td ,则不发送请求
分享到:
相关推荐
jquery鼠标滑过图片显示个人具体信息 jquery鼠标滑过图片显示个人具体信息 jquery鼠标滑过图片显示个人具体信息 jquery鼠标滑过图片显示个人具体信息 jquery鼠标滑过图片显示个人具体信息
鼠标滑过显示完整内容鼠标滑过显示完整内容鼠标滑过显示完整内容鼠标滑过显示完整内容鼠标滑过显示完整内容鼠标滑过显示完整内容鼠标滑过显示完整内容鼠标滑过显示完整内容鼠标滑过显示完整内容鼠标滑过显示完整内容...
jQuery炫酷鼠标滑过图片显示遮罩层特效是一款基于jQuery和CSS3制作的炫酷的鼠标滑过图片显示遮罩层特效。
jquery鼠标滑过显示二级下拉菜单代码,代码完成可运行。包括html, js, css.
jquery左侧导航条鼠标滑过导航菜单详细内容提示框说明
jquery经鼠标滑过显示图片特效是一款基于jquery实现的鼠标响应式列表图片显示效果。 jquery经鼠标滑过显示图片特效图:
jQuery tip cards插件用法实例:鼠标滑过翻转,比较集成的一个效果吧,不但是提示效果,还有焦点图切换特效,还有些文字和图片特效,可以自己整理下,用在自己的网页上,提示一下,请运行于支持HTML5的浏览器中。
当鼠标移动到图片上的时候,图片下方默认显示图片对应的文字内容.
jQuery 鼠标滑过改变图片内容 jQuery 鼠标滑过改变图片内容 jQuery 鼠标滑过改变图片内容
jquery图标导航鼠标滑过类似气泡放大缩小显示二级菜单
jquery鼠标滑过闪光滑出标题是一款点击左右箭头,图片谈出消失,图片淡入显示。
jQuery带标题的鼠标滑过切换焦点图是一款基于jQuery实现的鼠标滑过带标题的焦点图片轮播代码。
jQuery鼠标滑过显示二级下拉菜单代码
很多带星星的评论,jquery鼠标滑过星星打分
jquery鼠标悬停图片标题滑动 jquery鼠标悬停图片标题滑动
jquery提示框鼠标滑过图片提示框 jquery提示框鼠标滑过图片提示框 jquery提示框鼠标滑过图片提示框 jquery提示框鼠标滑过图片提示框 jquery提示框鼠标滑过图片提示框
jquery hover鼠标滑过图片列表上下滚动显示图片详细内容 jquery hover鼠标滑过图片列表上下滚动显示图片详细内容 jquery hover鼠标滑过图片列表上下滚动显示图片详细内容
NULL 博文链接:https://xjwolaile.iteye.com/blog/1906805
jquery实现鼠标滑过图片黑白显示的特效
jquery hover鼠标滑过动画导航条是一款蓝色jQuery滑动导航栏特效代码。