<script type="text/javascript">
//全局变量,标注是否创建了元素
var isCreate = false;
//显示元素
function showMp(event,obj,text,newline,width){
var x = event.clientX+3 + "px";
var y = event.clientY-30 + "px";
var width = width;
//如果没有创建过元素可以创建元素
if(!isCreate){
//创建新元素
var newSpan = document.createElement("span");
//设置个id.用来删除
newSpan.id = "ow_xl_test_view_mp";
//设置元素内容
newSpan.innerHTML = text;
//设置元素样式.根据当前鼠标位置显示
newSpan.style.fontSize = '12px';
newSpan.style.fontStyle = 'normal';
newSpan.style.fontWeight = 'normal';
newSpan.style.textDecoration = 'none';
newSpan.style.color = '#000000';
newSpan.style.border = '1px solid #000000';
newSpan.style.background = '#CECECE';
newSpan.style.position = 'absolute';
newSpan.style.width = 'auto';
newSpan.style.top = y;
newSpan.style.left = x;
newSpan.style.zIndex = '1000';
newSpan.style.whiteSpace = 'normal';
newSpan.style.wordWrap = 'break-word';
newSpan.style.wordBreak = 'normal';
//如果自动换行,进行处理
if(newline){
if(width==null)
width = 200;
newSpan.style.width = width;
}
//添加元素
obj.parentNode.appendChild(newSpan);
//全局变量,标注是否创建了元素
isCreate = true;
}
}
//删除元素
function hideMp(obj){
isCreate = false;
try{
var node = document.getElementById('ow_xl_test_view_mp');
node.parentNode.removeChild(node);
}catch(e){}
}
</script>
<style>
.content{
border: 1px solid red;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
width:500px;
}
</style>
<body>
<table width="800">
<tr>
<td>
<div class="content" onmouseout="hideMp(this)" onmousemove="showMp(event,this,this.innerHTML)">生死不离，你的梦落在哪里。想着生活继续。天空失去美丽，你却等待明天站起。无论你在哪里，我都要找到你。血脉能创造奇迹。你的呼喊就刻在我的血液里</div>
</td>
</tr>
<tr>
<td>
<div class="content" onmouseout="hideMp(this)" onmousemove="showMp(event,this,this.innerHTML,true)">生死不离，你的梦落在哪里。想着生活继续。天空失去美丽，你却等待明天站起。无论你在哪里，我都要找到你。血脉能创造奇迹。你的呼喊就刻在我的血液里</div>
</td>
</tr>
<tr>
<td>
<div class="content" onmouseout="hideMp(this)" onmousemove="showMp(event,this,this.innerHTML,true,100)">生死不离，你的梦落在哪里。想着生活继续。天空失去美丽，你却等待明天站起。无论你在哪里，我都要找到你。血脉能创造奇迹。你的呼喊就刻在我的血液里</div>
</td>
</tr>
<tr>
<td>
<a href="#"><div class="content" onmouseout="hideMp(this)" onmousemove="showMp(event,this,this.innerHTML,true,100)">生死不离，你的梦落在哪里。想着生活继续。天空失去美丽，你却等待明天站起。无论你在哪里，我都要找到你。血脉能创造奇迹。你的呼喊就刻在我的血液里</div></a>
</td>
</tr>
</table>
</body>
封装了一个jsp标签..有兴趣的可以看看
http://www.iteye.com/topic/195459
分享到：
相关推荐
然而，为了让用户能够方便地查看被隐藏的文字内容，我们可以采用一种交互式的设计——当鼠标移动到省略号或特定的标识（如加号）上时，显示原本被隐藏的文字。这就是"鼠标移动到加号上显示隐藏的文字内容"这一技术的...
根据给定的文件信息，我们可以总结出以下关于jQuery在网页设计中的应用以及如何利用鼠标事件显示和隐藏部分内容的关键知识点： ### 1. jQuery基础概念与功能 jQuery是一种快速、简洁的JavaScript库，它极大地简化...
2. **用户体验**：下拉菜单的显示和隐藏应有良好的交互反馈，例如鼠标悬停、点击等事件触发下拉显示，以及合理的动画效果。 3. **可访问性**：确保菜单对于屏幕阅读器和其他辅助技术友好，遵循WCAG（Web Content ...
通过JavaScript库jQuery，我们可以实现图片在用户鼠标移动时自动调整，确保用户无论在页面的哪个位置都能看到完整的图像。 首先，我们需要理解jQuery的基本概念。jQuery是一个轻量级、高性能的JavaScript库，它简化...
在Linux操作系统中，限制鼠标移动是一项实用的功能，尤其在多用户环境或者进行远程演示时，可能需要将鼠标的活动范围限定在一个特定区域内。这个功能主要通过X Window系统提供的工具来实现，比如`xwarppointer`。接...
为了在宽度达到特定阈值时自动隐藏内容，我们需要在`mousemove`事件处理函数中添加判断逻辑。如果新的宽度小于某个值，比如20像素，就将该列的`overflow`属性设置为`hidden`，否则设置为`auto`或默认值，以便内容...
功能描述： x轴文字显示过长会影响柱状图显示不全，需要对文字进行处理，为了美观，限定文字只显示在一行，...当鼠标悬浮在"..."时，显示全部内容，其它长度为4的文字正常显示；当鼠标移出"..."时，悬浮显示内容消失。
例如，我们可以在一个div元素上监听鼠标的移动： ```javascript let element = document.getElementById('myArea'); element.addEventListener('mousemove', handleMouseMove); ``` 2. `event`对象：在事件处理...
此外，考虑到实际应用，可能还需要对鼠标移动的边界做一些处理，防止纸飞机超出页面范围。这可能需要计算窗口的宽度和高度，然后限制飞机的坐标值。 标签“前端”表明这是一个关于网页开发的技术问题，主要涉及的是...
如果想要更高级的效果，比如在页面的某个固定位置显示悬浮框，可以通过计算鼠标的坐标位置来动态创建一个悬浮框元素，并在鼠标移动时更新其位置。 ### 多个元素的悬浮显示 如果页面中有多个需要悬浮显示完整文本的...
标题 "C#实现窗口贴边自动隐藏" 涉及的是Windows桌面应用程序开发中的一个特性，即当用户将窗口拖动到屏幕边缘时，窗口会自动隐藏或最小化，为用户提供更大的工作空间。这种功能常见于许多现代操作系统，包括Windows...
"jQuery相册封面横向跟随鼠标移动动态效果"是一种常见的交互设计，它利用jQuery库的特性，使相册封面在用户鼠标移动时能沿水平方向平滑地跟随，营造出一种动态、直观且有趣的浏览体验。下面将详细介绍这一技术实现的...
标题“图片移动不超出边界”涉及的是在编程中处理图像时的一个常见问题，尤其是在开发图形用户界面（GUI）或者游戏引擎时。这个问题的核心是确保图片或图像对象在屏幕上移动时不会离开预设的显示区域，以免导致视觉...
在编程领域，尤其是在开发图形用户界面（GUI）应用程序时，"鼠标移动划线"功能是一项基本但非常实用的技术。在给定的C#项目中，它实现了一个简单的绘图功能，让用户可以通过鼠标拖动来绘制自由曲线，类似于Windows...
在JavaScript的世界里，实现页面元素随鼠标移动而移动的效果是一种常见的动态效果，它能增加用户交互体验，使得网站更加生动有趣。本项目“javascript经典特效---用鼠标移动页面.rar”显然是一个聚焦于这一特性的...
- 使用`MouseMove`事件来监听鼠标移动，根据鼠标位置的变化实时更新文本框的宽度与高度。 2. **更新控件位置与尺寸**： - 通过`Left`和`Top`属性来记录鼠标相对于文本框左上角的坐标变化量，并据此更新文本框的...
在JavaScript中，我们可以利用事件监听和DOM操作来实现一个跟随鼠标移动的盒子效果。这个例子主要涉及以下几个知识点： 1. **事件监听**： - `onmousedown`：鼠标按键被按下时触发的事件，用于初始化跟随操作。 -...
然而，为了提供更加丰富的用户体验，我们经常需要实现一些高级功能，比如多点触碰（Multitouch）支持，使得用户能够通过手势来拖拽图片、移动图片位置以及缩放图片大小。在本教程中，我们将深入探讨如何在Android的...
还可以设置延迟显示，避免用户快速移动鼠标时频繁地显示和隐藏ToolTip。 通过以上步骤，我们可以实现一个高效且用户友好的超长HTML内容展现方案。这种技巧对于那些需要固定宽度显示且内容可变的控件非常有用，比如...
当用户按下鼠标按钮时，我们记录下当前鼠标位置（MouseDown），在鼠标移动时更新矩形的位置和大小（MouseMove），最后在鼠标释放时完成操作（MouseUp）。 2. **矩形对象**：使用Rectangle类来表示矩形。初始化矩形...