鼠标停在td上经过一秒后弹出悬浮窗口显示td详细内容的js代码
var TdContentShow = (function() {
var getContent=function(jiedian){
var timeout = ”;
$(jiedian).each(function(index) {
$(this).bind(“mouseover”,function(e){//给每个td绑定 mouseover 事件
var contents=””;
if(typeof($(this).find(“input”).val())!=”undefined”){//以下是获取td内容
contents=$(this).find(“input”).val();
}
else{
contents=$(this).text();
}
timeout = setTimeout(function(){getPosition(contents,e);},1000);// setTimeout 实现延时一秒
});
$(this).bind(“mouseout”,function(){//给td绑定 mouseout 事件
clearTimeout(timeout); //解除 setTimeout
$(“#xuanfuchuang”).remove(); //删除之前生成的悬浮窗， xuanfuchuang 是悬浮窗的id
});
});
};
var getPosition=function(content,e){//获取鼠标位置函数，并在所在位置添加悬浮窗
var pointX = e.pageX;//获取鼠标X
var pointY = e.pageY; 获取鼠标XY
$(“body”).append(‘<div id=”xuanfuchuang”>’+content+'</div>’);//添加悬浮窗
var xuanfuheight=$(“#xuanfuchuang”).height();//获取悬浮窗高度
$(“#xuanfuchuang”).css({“margin-top”:(pointY-xuanfuheight-10),”margin-left”:pointX});
};
return {
getContent: getContent,
getPosition:getPosition
};
})();
调用方法：TdContentShow.getContent(“#WuLiuTable tbody td”);
css代码：
#xuanfuchuang{top:0;left:0; position:absolute; color:#262626;width:200px; height:auto; min-height:50px; background:#f9fad9; border:2px #0099FF dotted;padding:5px 10px ;word-wrap: break-word;}
html代码
<table cellspacing=”0″ cellpadding=”0″ id=”WuLiuTable”>
<thead>
<tr>
<th>序号</th>
<th>单件编号</th>
<th>工艺</th>
<th>名称</th>
<th>颜色</th>
<th>品牌</th>
<th>瑕疵</th>
<th>附件</th>
<th>是否加急</th>
<th>档次</th>
<th>优先级</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>增值附加费</th>
</tr>
</thead>
<tbody>
<tr onmouseout=”cleartrbgcolor(this)” onmouseover=”addtrbgcolor(this)” ondblclick=”AddYiTableclick(this)” onselectstart=”return false” style=””>
<td class=”tdxuhao”>1</td>
<td></td>
<td><input type=”text” name=”ServiceName[]” dataname=”ServiceName” value=”干洗” readonly=””>
<input type=”hidden” name=”clothesclass[]” value=”上衣类”></td>
<td><input type=”text” name=”clothesname[]” dataname=”ordername” value=”西服上衣/制服” readonly=””></td>
<td><input type=”text” name=”color[]” dataname=”ordercolor” value=”” readonly=””></td>
<td><input type=”text” name=”brand[]” dataname=”orderpinpai” value=”” readonly=””></td>
<td><input type=”text” name=”SlightDefect[]” dataname=”ordererror” value=”” readonly=””></td>
<td><input type=”text” name=”Appendix[]” dataname=”orderfujian” value=”” readonly=””></td>
<td><input type=”text” name=”SuppleService[]” dataname=”orderservice” value=”否” readonly=””></td>
<td><input type=”text” name=”ServiceScale[]” dataname=”orderlevel” value=”” readonly=””></td>
<td><input type=”text” name=”SpeedName[]” dataname=”orderturn” value=”” readonly=””></td>
<td><input type=”text” name=”TruePrice[]” dataname=”orderdanjia” value=”25″ readonly=””></td>
<td><input type=”text” name=”UnitSum[]” dataname=”ordershuliang” value=”1″ readonly=””></td>
<td><input type=”text” name=”AllPrice[]” dataname=”orderzongjia” value=”25″ readonly=””></td>
<td><input type=”text” name=”SuppleMoney[]” dataname=”orderservice” value=”0″ readonly=””></td>
</tr>
<tr onmouseout=”cleartrbgcolor(this)” onmouseover=”addtrbgcolor(this)” onclick=”AddYiTableclick(this)” style=””>
<td class=”tdxuhao”>2</td>
<td></td>
<td><input type=”text” name=”ServiceName[]” dataname=”ServiceName” value=”干洗” readonly=””>
<input type=”hidden” name=”clothesclass[]” value=”上衣类”></td>
<td><input type=”text” name=”clothesname[]” dataname=”ordername” value=”西服上衣/制服” readonly=””></td>
<td><input type=”text” name=”color[]” dataname=”ordercolor” value=”” readonly=””></td>
<td><input type=”text” name=”brand[]” dataname=”orderpinpai” value=”” readonly=””></td>
<td><input type=”text” name=”SlightDefect[]” dataname=”ordererror” value=”” readonly=””></td>
<td><input type=”text” name=”Appendix[]” dataname=”orderfujian” value=”” readonly=””></td>
<td><input type=”text” name=”SuppleService[]” dataname=”orderservice” value=”否” readonly=””></td>
<td><input type=”text” name=”ServiceScale[]” dataname=”orderlevel” value=”” readonly=””></td>
<td><input type=”text” name=”SpeedName[]” dataname=”orderturn” value=”一般” readonly=””></td>
<td><input type=”text” name=”TruePrice[]” dataname=”orderdanjia” value=”25″ readonly=””></td>
<td><input type=”text” name=”UnitSum[]” dataname=”ordershuliang” value=”1″ readonly=””></td>
<td><input type=”text” name=”AllPrice[]” dataname=”orderzongjia” value=”25″ readonly=””></td>
<td><input type=”text” name=”SuppleMoney[]” dataname=”orderservice” value=”0″ readonly=””></td>
</tr>
</tbody>
</table>
未经允许不得转载：前端撸码笔记 » js实现鼠标经过td 弹出悬浮窗口显示td详细内容