鼠标经过文本内特定类型元素显示提示信息
2011-01-06 11:07
429 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title> New Document </title>
</head>
<style type="text/css">
div{
text-indent:2em;
}
div strong {
color:orange;
}
</style>
<script type="text/javascript">
/*
功能：
实现鼠标经过文本内特定类型元素（此处为加粗文本）时（onmouseover事件）显示出对应的提示信息，
离开时（onmouseover）时关闭提示信息。
部件：
1. addTip()，为每个元素添加onmouseover和onmouseout事件；
2. showTip()，显示提示信息；
3. hiddenTip()，隐藏提示信息（实质是关闭Remove掉，以免造成内存泄露）。
说明：
1. 文本内特定类型元素必须指定id，统一编号方式为：两个字符＋两个数字，若要其他方式也可以自行修改代码；
2. 在body的onload事件中执行。
*/
// 定义一个数组tips，保存所有的提示信息
var tips = new Array(
"1.3D programming for Mobile Phones by onenGL ES2.0 3D移动游戏设计",
"2.Android下的VOIP客户端源码",
"3.扫雷游戏，android源码，有注解",
"4.演示如何使用Location和Google Map"
);
// addTip()，为每个元素添加onmouseover和onmouseout事件
function addTip(){
var strongs = document.getElementsByTagName("strong");//取所有元素到数组，此处特定类型元素为strong，加粗
for(var i=0;i<strongs.length;i++){ //遍历元素数组
strongs[i].onmouseover = showTip; //为每个元素添加onmouseover事件
strongs[i].onmouseout = hiddenTip; //为每个元素添加onmouseout事件
}
}
// showTip()，显示提示信息
function showTip(){
this.style.cursor = "pointer";
this.style.color = "red";
var x = window.event.clientX; //取当前鼠标坐标值
var y = window.event.clientY;
var divTip = document.createElement("div");
divTip.style.position = "absolute"; //采取绝对定位方式
divTip.style.top = y + 20 ; //定位提示信息显示位置在当前元素附近
divTip.style.left = x + 20 ;
divTip.style.background = "yellow";
divTip.style.textIndent = 0;
divTip.id = "div" + this.id.substring(2,4); //根据元素id生成提示信息DIV的id
divTip.style.display = ""; //允许显示，为none则为不显示，但仍然在内存中
divTip.innerHTML = tips[parseInt(this.id.substring(2,4))-1];//添加提示信息内容
document.getElementsByTagName("body")[0].appendChild(divTip); //添加到body作为网页内容的一部分，不添加则不会显示
}
// hiddenTip()，隐藏提示信息
function hiddenTip(){
this.style.color = 'orange';
var divTip = document.getElementById("div" + this.id.substring(2,4));
if(divTip){ // 判断id是否存在，防止出现出错信息
divTip.parentNode.removeChild(divTip); // 实质是关闭，Remove掉，以免造成内存泄露
// this.style.display = 'none'; 或者 divTip.style.display = 'none' 只是隐藏提示信息，仍占用内存空间，
// 反复多次使用则会因为内存空间未释放而造成内存泄露问题
}
};
</script>
<body onload="addTip()">
<div><strong id="st01">Android</strong>的在智能手机市场之所以能够持续的保持上升的势头，除了开源之外，另外一个主要的因素就是他的<strong id="st02">应用程序商店</strong>对于广大开发者以及手机终端消费者的吸引力。国内基于Android平台的应用商店可谓是五花八门，不仅是开发商有商店，智能手机厂商有而且运营商同样也涉足这个领域。而且大都有客户端，置入手机内部，方便消费者使用。
</div>
<div><strong id="st03">Google</strong>称，近期Android Market工程团队一直在致力于改善Android Market用户体验，而新版<strong id="st04">Android Market</strong>客户端将于未来两周内推出。新版的Android Market将采用封面浏览形式的首页操作界面，用户可以以手指轻弹的方式在选择点击应用程序图标，此外Google还将在Android Market的首页上增添一些时下最受智能手机用户欢迎的内容，比如Live Wallpapers以及Widgets等等。</div>
</body>
</html>
<html>
<head>
<title> New Document </title>
</head>
<style type="text/css">
div{
text-indent:2em;
}
div strong {
color:orange;
}
</style>
<script type="text/javascript">
/*
功能：
实现鼠标经过文本内特定类型元素（此处为加粗文本）时（onmouseover事件）显示出对应的提示信息，
离开时（onmouseover）时关闭提示信息。
部件：
1. addTip()，为每个元素添加onmouseover和onmouseout事件；
2. showTip()，显示提示信息；
3. hiddenTip()，隐藏提示信息（实质是关闭Remove掉，以免造成内存泄露）。
说明：
1. 文本内特定类型元素必须指定id，统一编号方式为：两个字符＋两个数字，若要其他方式也可以自行修改代码；
2. 在body的onload事件中执行。
*/
// 定义一个数组tips，保存所有的提示信息
var tips = new Array(
"1.3D programming for Mobile Phones by onenGL ES2.0 3D移动游戏设计",
"2.Android下的VOIP客户端源码",
"3.扫雷游戏，android源码，有注解",
"4.演示如何使用Location和Google Map"
);
// addTip()，为每个元素添加onmouseover和onmouseout事件
function addTip(){
var strongs = document.getElementsByTagName("strong");//取所有元素到数组，此处特定类型元素为strong，加粗
for(var i=0;i<strongs.length;i++){ //遍历元素数组
strongs[i].onmouseover = showTip; //为每个元素添加onmouseover事件
strongs[i].onmouseout = hiddenTip; //为每个元素添加onmouseout事件
}
}
// showTip()，显示提示信息
function showTip(){
this.style.cursor = "pointer";
this.style.color = "red";
var x = window.event.clientX; //取当前鼠标坐标值
var y = window.event.clientY;
var divTip = document.createElement("div");
divTip.style.position = "absolute"; //采取绝对定位方式
divTip.style.top = y + 20 ; //定位提示信息显示位置在当前元素附近
divTip.style.left = x + 20 ;
divTip.style.background = "yellow";
divTip.style.textIndent = 0;
divTip.id = "div" + this.id.substring(2,4); //根据元素id生成提示信息DIV的id
divTip.style.display = ""; //允许显示，为none则为不显示，但仍然在内存中
divTip.innerHTML = tips[parseInt(this.id.substring(2,4))-1];//添加提示信息内容
document.getElementsByTagName("body")[0].appendChild(divTip); //添加到body作为网页内容的一部分，不添加则不会显示
}
// hiddenTip()，隐藏提示信息
function hiddenTip(){
this.style.color = 'orange';
var divTip = document.getElementById("div" + this.id.substring(2,4));
if(divTip){ // 判断id是否存在，防止出现出错信息
divTip.parentNode.removeChild(divTip); // 实质是关闭，Remove掉，以免造成内存泄露
// this.style.display = 'none'; 或者 divTip.style.display = 'none' 只是隐藏提示信息，仍占用内存空间，
// 反复多次使用则会因为内存空间未释放而造成内存泄露问题
}
};
</script>
<body onload="addTip()">
<div><strong id="st01">Android</strong>的在智能手机市场之所以能够持续的保持上升的势头，除了开源之外，另外一个主要的因素就是他的<strong id="st02">应用程序商店</strong>对于广大开发者以及手机终端消费者的吸引力。国内基于Android平台的应用商店可谓是五花八门，不仅是开发商有商店，智能手机厂商有而且运营商同样也涉足这个领域。而且大都有客户端，置入手机内部，方便消费者使用。
</div>
<div><strong id="st03">Google</strong>称，近期Android Market工程团队一直在致力于改善Android Market用户体验，而新版<strong id="st04">Android Market</strong>客户端将于未来两周内推出。新版的Android Market将采用封面浏览形式的首页操作界面，用户可以以手指轻弹的方式在选择点击应用程序图标，此外Google还将在Android Market的首页上增添一些时下最受智能手机用户欢迎的内容，比如Live Wallpapers以及Widgets等等。</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 当鼠标移到某一元素上时候显示提示信息，离开时提示信息也消失
- 鼠标移到元素上显示提示信息
- 鼠标经过链接显示提示信息
- 鼠标悬浮在元素上显示提示文本
- 鼠标经过datalist 中的图片显示提示信息列表
- JfreeChart 在Struts2 web上显示柱状图并当鼠标经过是出现提示信息
- 10-鼠标经过表格显示提示信息（表格样式）
- 纯CSS实现的鼠标经过文本时提示的信息
- 纯CSS实现的鼠标经过文本时提示的信息
- datagrid 文本溢出时候 鼠标经过出现提示信息tooltip
- C#中怎样在Button控件上添加提示语，让鼠标经过按钮时显示提示信息！
- EXTJS 4.2 实现 gridpanel 鼠标悬停单元格以提示信息的方式显示单元格内容。
- Swing鼠标悬停时巧用上下文菜单显示提示信息
- jQuery鼠标悬停显示提示信息窗体
- Android编程开发之EditText中不输入特定字符会显示相关提示信息的方法
- 用windows media player打开mp3文件时提示，找不到指定模块；并且鼠标指向音乐文件时不能显示详细的文件信息，如位速等
- 鼠标点击清空文本框 失去焦点显示提示信息
- 在GridView中为特定的信息加色，鼠标放上后显示详细信息
- jQuery实现鼠标经过弹出提示信息的地图热点效果
- Jquery地图热点效果-鼠标经过弹出提示信息