<script>
$(function(){
$('#closeCon').click(function(){ $('#kfms').hide('slow'); });
$('.kfConDiv').bind('click',function(e){
var xx = e.originalEvent.x || e.originalEvent.layerX || 0;
var yy = e.originalEvent.y || e.originalEvent.layerY || 0;
$('#kfms').css('top',yy);
$('#kfms').css('left',xx);
$('#kfms').show('slow',function(){ $('#kfContent').text('扣分原因'); });
});
});
</script>
<style>
body{ background:url(../../../vehstyle/css/material/bg/examTblBg.jpg)}
.drvScoreDataTr td{border:1px solid blue;}
.kfConDiv{
width:262px; height:36px; border:1px solid red; text-overflow:ellipsis;
}
.mesCtn{ position:absolute; top:500px; left:460px; width:200px; height:120px; padding:2px; background-color:#6CF; display:none;}
.closeCtn{ float:left; width:200px; height:23px; padding:1px; background-color:#6699FF;}
.closeDiv{ float:right; width:25px; height:25px; line-height:25px; color:#009; font-size:38px; text-align:center; background-color:#F33; border:#009; cursor:pointer;}
.contentDiv{ float:left; font-size:13px; width:192px; height:86px; padding:5px;}
</style>
<body>
<table id="drvScoreMes" cellpadding="0" cellspacing="0" style=" border:1px solid #ccc;">
<tr id="drvScoreMesTitle">
<td style="width:40px;" align="center"> 扣分 </td>
<td class="titleSplit"></td>
<td style="width:262px;"> 扣分原因 </td>
<td class="titleSplit"></td>
<td style="width:90px;" align="center"> 操作 </td>
<td></td>
</tr>
<tr class="drvScoreDataTr">
<td style="width:40px;" colspan="2" align="center"> 扣分 </td>
<td style="width:262px;" colspan="2">
<div class="kfConDiv"> 扣分原因扣分原因扣分原因扣分原因扣分原因扣分原因扣分原因扣分原因扣分原因扣分原因扣分原因扣</div> </td>
<td style="width:90px;" align="center"> <input type="button" value="删除" /> </td>
<td></td>
</tr>
</table>
<!-- =================================== 内容层 =================================== -->
<div id="kfms" class="mesCtn"><div class="closeCtn"><div id="closeCon" class="closeDiv">×</div></div><div id="kfContent" class="contentDiv"></div></div>
</body>
分享到:
相关推荐
JQuery获得鼠标横、纵坐标,看看是不是你想要的。
元素相当于窗口的左边的偏移量 元素相对于窗口的上边的偏移量 元素相对于滚动条左边的偏移量 元素相对于滚动条顶部的偏移量
jquery 实现鼠标单击行时,改变行的背景颜色,选中checkbox复选框
Jquery跟随滚动条漂浮层
jQuery插件,就是沿着一个角度弹来弹去的,代码写得不怎么样,不过效果达到了,调用很简单的,里面有调用例子。ie6/ie7/ie8/firefox下都能用
mindex工作室,写得更少,做得更多。jquery实现的一款特效:鼠标拖拽改变块坐标。详细注释
完美的鼠标放上去jquery显示隐藏层,源程序来自网络,感谢原作者,我在上面增加成了显示隐藏多个层,而且是任意位置的图片、文字均可以,非常实用。简单到一眼看明白使用方法,希望帮到需要的朋友。
jquery漂浮客服代码,支持左右漂浮. 可随滚动条上下移动。目前还没发现不兼容的浏览器。
jquery右侧固定层鼠标悬停微信图标显示二维码和页面滚动显示返.
Jquery 跟随滚动条漂浮层,实现漂浮层不随网页下移而滚动,jquery实现
鼠标移上某一位置,随即在鼠标附近弹出层,鼠标移动则层移动
jquery实现鼠标悬浮动态添加显示内容,鼠标悬浮在控件上,动态添加一个悬浮层显示详细信息
jquery全屏漂浮广告插件,可点击关闭
jquery hover图片放大特效鼠标滑过图片浮动层变大显示 jquery hover图片放大特效鼠标滑过图片浮动层变大显示 jquery hover图片放大特效鼠标滑过图片浮动层变大显示
JQuery 弹出层,div始终显示在屏幕正中间
jquery弹出层当鼠标点击文字或图片弹出层,弹出层浮动在屏幕上可以随浏览器上下滚动,弹出层可自动居中在页面中间
jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示
jquery 鼠标移入显示悬浮框 jquery 鼠标移入显示悬浮框 jquery 鼠标移入显示悬浮框
用jQuery实现div跟着鼠标走 鼠标移动时,层也跟着鼠标的移动而移动
jQuery鼠标滑过显示二级下拉菜单代码