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

dcdc723

浏览: 188106 次
性别:
来自: 北京

最近访客更多访客>>

liuxuqing2010

mingning179

nv_xxx

xuwenyan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery 相关

jQuery CSS Ajax JavaScript XHTML

<!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>

运行效果

tips的消息帮助.rar (1.2 KB)
下载次数: 334

查看图片附件

7
顶

1
踩

分享到：

jquery1.4 中文文档 | jquery 操作复选框取值

2010-03-03 09:25
浏览 4549
评论(9)
分类:Web前端
查看更多

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

不错的效果啊。~~~

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论