jquery做的一个onmouse出tips帮助文档的一个效果

65 阅读 0 评论 43 点赞

我是靠谱客的博主明亮大叔，最近开发中收集的这篇文章主要介绍jquery做的一个onmouse出tips帮助文档的一个效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<style>
.tool-tips{ position: absolute; visibility: hidden; z-index: 13000; color: #fff; width:200px; }
.tool-title{ font-size:13px; font-weight:bold; margin: 0; color: #9FD4FF;
text-align: center; padding: 6px 6px 4px;
background-color:#666;/*tips标题的背景*/
}
.tool-text{
padding: 4px 8px 8px; font-size:12px; color: #cf9;
background-color:#999;/*tips内容的背景*/
}
</style>
</head>
<body>
<script> $(document).ready(function(){
$('<div class="tool-tips"><div class="tool-title"></div><div class="tool-text"></div></div>').appendTo('body'); //添加tips节点
$('abbr,acronym').mouseover(function(){
//添加onmouse的事件,可改为其他事件如click等
$(this).css('cursor','help'); //添加样式
$('.tool-tips').css('visibility','visible'); //可见
var tip = this;
if(tip.title){tip.arrs=tip.title;tip.title='';}
var arr = tip.arrs.split('｜');//分割
if(arr.length>1){ myTitle = arr[0]; myText = arr[1];
}else{ myTitle = $(this).text(); myText = tip.arrs; }
$('.tool-title').html(myTitle); //为tips节点加标题
$('.tool-text').html(myText); //加内容
}).mousemove(function(e){ $('.tool-tips').css('top',e.pageY+15);
$('.tool-tips').css('left',e.pageX+15); }).mouseout(function(){ $('.tool-tips').css('visibility','hidden'); })
})
</script>
<abbr title="测试的内容">测试</abbr><br/>
<abbr title="this is content">test</abbr><br/>
<abbr title="巅峰网络公司专注于：网站建设、网站设计、网站优化(SEO)、网络推广、品牌网站建设、网页设计
">巅峰网络,http://www.tipnet.cn</abbr><br/>
<acronym title="Cascading Style Sheets">CSS</acronym>
</body>
</html>

运行效果