Jquery hover鼠标经过时弹出div动态提示语
一、效果图
二、需求描述
1、鼠标经过table每一行时,弹出div动态提示语;
2、div弹出层的位置随鼠标位置的变化而变化;
3、鼠标离开table或获取的动态提示语为空时,div弹出层消失。
下面我做了一个简单的实现,第一次在博客园写随笔记录下来。
三、实现思路
1、设计一个div弹出层的样式。该div在页面只有一个,哪里需要就往哪里搬。
2、获取并保存鼠标的位置,定位div弹出层的位置。
3、获取table每行隐藏的提示语,设置到div中区显示。
4、使用鼠标经过和离开事件,对div进行控制。
四、具体实现步骤
1、定义div的HTML代码如下:
<div class="hoverdiv">
<div style="text-align: center; vertical-align: middle;"><label id="message" style="color: #000000;"></label></div>
</div>
//保存鼠标的位置
<input type="hidden" id="pagex" />
<input type="hidden" id="pagey" />
2、div样式
<style type="text/css">
.blockdiv{
width:285px;
height:30px;
display:none;
left: 977px;
top: 300px;
position: absolute;
z-index:1002;
opacity:1;
background:#D6D6D6;
}
</style>
3、需要鼠标经过table每一行,弹出div,table设计如下:
<table>
<thead>
<tr>
<th class="center">name</th>
<th>pass</th>
</tr>
</thead>
<tbody>
#foreach(${item} in ${draftPage.result})
<tr class="hoverTag">
<td>
<label>
<input type="hidden" name="message" value="$!dateTool.format("yyyy-MM-dd HH:mm:ss", $!{item.tagTime})">
</label>
</td>
<td>$!{item.name}</td>
<td>$!{item.pass}</td>
</tr>
#end
</tbody
</table>
4、鼠标经过和离开事件处理如下:
<script>
//获取鼠标的位置,并保存到页面隐藏域中
$(document).mousemove(function (e) {
document.getElementById("pagex").value = e.pageX;//pageX() 属性是鼠标指针的位置,相对于文档的左边缘。
document.getElementById("pagey").value = e.pageY;//pageY() 属性是鼠标指针的位置,相对于文档的上边缘。
});
var MouseEvent = function(e){
this.x = e.pageX;
this.y = e.pageY;
}
var Mouse = function(e){
var kdheight = jQuery(document).scrollTop();
mouse = new MouseEvent(e);
leftpx = mouse.x+15;
toppx = mouse.y-10;
}
$(".hoverTag").hover(
function (e) {//鼠标经过时业务处理
Mouse(e);
var message = e.currentTarget.firstElementChild.firstElementChild.lastElementChild.defaultValue;
if(message == null || message == '' || message == undefined){
$(".hoverdiv").css({
"display": "none",
});
$("#message").html("");
}else{
$(".hoverdiv").css({
"display": "block",
"left": leftpx,
"top": toppx,
});
$("#message").html(message);
}
},
function () {//鼠标离开时业务处理
$(".hoverdiv").css({
"display": "none",
});
$("#message").html("");
}
)
</script>
Jquery hover鼠标经过时弹出div动态提示语的更多相关文章
- 工作当中实际运用(3)——js原生实现鼠标点击弹出div层 在点击隐藏
function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...
- JavaScript总结之鼠标划过弹出div单击出现对话框
为了满足他们的永无止境的要求,我可谓是任劳任怨啊,累断了双手,看瞎了双眼.这个是来写鼠标划过一个按钮,然后弹出一个小提示框解释,另外根据radio是否选中,判断点击后如何执行,然后执行之后再有一个确认 ...
- JavaScript鼠标事件,点击鼠标右键,弹出div
document.oncontextmenu = function(){return false}; //禁止鼠标右键菜单显示 var res = document.getElementById('b ...
- jQuery实现鼠标移上弹出提示框,移出消失
<TD>里有一行数据 "那片笑声让我想起......" 假设超出规定长度将用......代替, 而现在要通过鼠标移动到......上 显示全部内容,移出则消失.如下图 ...
- Win7关机时弹出对话框,提示你想要的信息
博主换了个公司,要求每天写日志,次日8点前没写的话就要扣钱,1篇10块钱,博主已经两次写完忘记提交到ERP系统了,捂脸... 因为公司要求所有工作在公司配的台式电脑上,所以如果能在关机前弹个提示(不关 ...
- jQuery 弹出div层
目的:使用jQuery弹出一个div窗口:这种效果经常应用于页面内容的展示,登录效果的实现.其实,实现这种效果有好多种方式: 效果如下: 代码如下: <html> <head> ...
- 鼠标滑过弹出jquery在线客服
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <input type=" ...
- jQuery插件--zTree中点击节点实现页面跳转时弹出两个页面的问题
这是第一次使用zTree,所以在使用之前我要先写一个demo来学习一下.我们要注意的是,zTree是一个jQuery插件,所以我们在导入zTree的js文件之前要先导入jQuery的js文件. 我们先 ...
随机推荐
- Git实现1个项目2个地址1次推送
Git实现1个项目2个地址1次推送 考虑到不需要pull操作,因此本方法适用于个人项目分别在两个平台或地址进行部署 给origin 增加一个可以push的地址 git remote set-url - ...
- Linux远程拷贝scp
Linux的scp命令可以实现两台服务器之间互相拷贝文件,我的测试环境是Centos6.4. 基本的命令格式 scp 拷贝目标文件 远程用户@远程主机地址:远程目录 一.从本机拷贝到目标远程主机 # ...
- HDU5213 Lucky【容斥+莫队】
HDU5213 Lucky 题意: 给出\(N\)个数和\(k\),有\(m\)次询问,每次询问区间\([L1,R1]\)和区间\([L2,R2]\)中分别取一个数能相加得到\(k\)的方案数 题解: ...
- 关于KMP算法的理解
上次因为haipz组织的比赛中有道题必须用到KMP算法,因此赛后便了解了下它,在仔细拜读了孤~影神牛的文章之后有种茅塞顿开的感觉,再次ORZ. 附上链接http://www.cnblogs.com/y ...
- zjnu1707 TOPOVI (map+模拟)
Description Mirko is a huge fan of chess and programming, but typical chess soon became boring for h ...
- CodeForces - 220B 离散化+莫队算法
莫队算法链接:传送门 题意: 有n个数,m个区间.问区间内有多少个x,x满足x的个数等于x的值的个数(如果x是3,区间内要存在3个3). 题解: 因为a[i]太大,所以要离散化一下,但是不能用map容 ...
- ef实现左关联查询
在EF中,当在dbset使用join关联多表查询时,连接查询的表如果没有建立相应的外键关系时,EF生成的SQL语句是inner join(内联),对于inner join,有所了解的同学都知道,很多时 ...
- RSA 加密解密使用实例
http://www.dtmao.cc/news_show_692109.shtml 本文不讨论RSA加密解密本身,只记录使用方法及遇到的坑,RSA原理及注意事项可在网上查找. 背景:公司的一个需求, ...
- 破解编码面试第六版 - JavaScript
破解编码面试第六版 - JavaScript Cracking the Coding Interview: 189 Programming Questions and Solutions 6th Ed ...
- git alias all in one
git alias all in one workspace:工作区 staging area:暂存区/缓存区 local repository:或本地仓库 remote repository:远程仓 ...