`
dcdc723
  • 浏览: 183665 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

jQueryCSSAjaxJavaScriptXHTML
阅读更多 
<!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> 

 运行效果

  • 大小: 5.6 KB
7
顶
1
踩
分享到：
| jquery 操作复选框 取值
评论
9 楼 dcdc723 2010-03-10  
D-tune 写道
纯css的tips不是跟好吗

纯CSS的肯定比较好。但是涉及到帮助信息是从数据库中读取的时候就不能实现了。
各有所长。
8 楼 D-tune 2010-03-10  
纯css的tips不是跟好吗
7 楼 happysoul 2010-03-09  
果然IE6兼容有点问题 只有最后一个“CSS”那行可以看到效果
用的IE8 测试环境 IEtest
6 楼 dcdc723 2010-03-04  
sarin 写道
标题伸长时，两部分长度不一致

可以把标题的DIV删除，把标题放到tip内容中换行居中即可。。
5 楼 pouyang 2010-03-04  
我的ie6没有效果
4 楼 sarin 2010-03-03  
标题伸长时，两部分长度不一致
3 楼 怕瓦落地 2010-03-03  
马的脸猛鹿 写道
相当不错的效果，简单明了。

2 楼 马的脸猛鹿 2010-03-03  
相当不错的效果，简单明了。
1 楼 dedemao 2010-03-03  
不错的效果啊。~~~
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics