<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>
分享到：
相关推荐
- 滚动到指定位置时显示某些元素：比如导航栏在页面滚动到一定位置时出现或消失。 - 动画效果：比如元素随鼠标移动而移动的效果。 #### 二、`scrollLeft()` 和 `scrollTop()` 方法 这两个方法用于获取或设置元素相...
当鼠标在元素上移动时，触发`mousemove`事件，通过该事件的`originalEvent`属性可以访问到浏览器提供的原生事件对象，从中获取鼠标位置信息。 #### 代码实现 ```html <div id="testDiv"></div> $('#testDiv')....
在网页设计和开发中，交互性是提升用户体验的关键因素之一，而“完美的鼠标放上去jquery显示隐藏层”正是实现这种交互效果的一种技术手段。这个标题所指的是一种使用JavaScript库jQuery来实现在鼠标悬停（hover）时...
为了实现“鼠标移动则层移动”的效果，我们需要在鼠标移动事件（`mousemove`）中计算新的坐标，并更新弹出层的位置。`.on('mousemove', function(event) {...})` 会为指定元素绑定`mousemove`事件处理器，通过 `...
在网页设计中，"Jquery跟随滚动条漂浮层"是一种常见的交互效果，它使得某个元素（通常是广告、导航菜单或重要提示）在用户滚动页面时始终保持在屏幕的特定位置，提供持续的可视性。这种效果可以提高用户体验，因为...
"jquery实现的鼠标拖拽改变块坐标"是一个典型的交互式网页特效，允许用户通过鼠标拖动来调整元素的位置，从而改变其在页面上的坐标。这个效果通常用于创建可自定义布局的应用或者游戏等。 首先，我们需要理解jQuery...
jquery 实现鼠标单击行时，改变行的背景颜色，选中checkbox复选框
它允许客服对话框在用户浏览页面时始终保持可见，无论是页面上滑还是下滑，始终在屏幕的一侧漂浮，提供了无缝的交流体验。 jQuery，一个广泛使用的JavaScript库，以其简洁的API和丰富的功能深受开发者喜爱。在这个...
在网页设计中，浮动层是一种常见的交互元素，它可以在用户移动鼠标时跟随鼠标的位置进行动态显示，常用于提示信息、广告展示或者下拉菜单等。本篇将详细讲解如何使用jQuery来实现这样的功能。 首先，我们需要理解...
在网页设计中，有时我们需要实现一些交互效果来增强用户体验，比如在鼠标悬停时显示特定内容，或者在页面滚动时让某些元素始终保持可见。在这个场景中，“jquery右侧固定层鼠标悬停微信图标显示二维码和页面滚动显示...
这段代码将在页面加载完成后执行，初始化漂浮层的位置，并在用户滚动时动态调整。 **四、优化与注意事项** 1. **适应性布局**：如果要考虑响应式设计，可能需要根据不同的屏幕尺寸调整漂浮层的位置和大小。 2. **...
在 `letDivCenter()` 函数中，我们使用 JQuery 的 `offset()` 方法来获取窗口的高度和宽度，然后计算弹出层的位置，并使用 `css()` 方法来设置弹出层的位置和显示状态。 在 `showAll()` 函数中，我们调用 `showMask...
4. **处理mousemove事件**：在鼠标移动期间，根据鼠标的新位置和原始位置计算图片的新坐标，并更新图片的位置。 5. **监听mouseup事件**：当用户释放鼠标按钮时，停止对mousemove事件的处理，图片将保持在最后的位置...
Step 3: 当鼠标移动时，我们可以使用 jQuery 的 `show` 方法来显示提示信息。 Step 4: 我们可以使用 CSS 来美化提示信息的样式。 Step 5: 最后，我们可以使用在线 DEMO 来测试和调整我们的代码。 代码示例 ```...
本主题集中在使用jQuery实现一种特定的用户体验功能：创建一个弹出层，该弹出层在鼠标点击时出现，并且当用户滚动屏幕时能保持其位置固定，即“浮动”在屏幕上方。以下将详细介绍这一技术实现的关键知识点。 首先，...
现在，我们使用jQuery来监听鼠标悬浮(`mouseenter`)和离开(`mouseleave`)事件，并根据这些事件来控制悬浮层的显示与隐藏。这里是一个基本的实现： ```javascript $(document).ready(function() { $('.hover-item')...
总结来说，"Jquery 鼠标浮动层"是一种利用jQuery实现的交互设计，通过监听鼠标事件，动态创建和控制浮动层的显示，以提供更多信息展示，提高用户在网页上的交互体验。理解并掌握这些知识点对于任何Web开发人员来说都...
2. **设置初始状态**：在`mousedown`事件中，记录下鼠标点击时的坐标（相对于页面）和层的当前位置（相对于其父元素）。 3. **处理鼠标移动**：在`mousemove`事件中，计算鼠标当前的位置与初始点击位置的差值，并将...
在网页设计中，"漂浮广告"（Floating Ad）通常指的是那些在页面滚动时始终保持在屏幕某一固定位置的广告，这种广告形式可以持续吸引用户的注意力。 在jQuery中实现漂浮广告，主要涉及到以下几个知识点： 1. **选择...