基于jquery的自定义鼠标提示效果 jquery.toolTip

 更新时间:2010年11月14日 22:34:27   作者:  
看到其它网站A标签title效果,心里痒痒,就想也用到自己网站上。 正好在学jquery 插件扩展,就参照前辈代码,自己动手写了一个
IE下效果

Firefox或其它浏览器效果


代码

复制代码 代码如下:

//版权 酷车中国 www.kuchechina.com
//作者 逐月 zhuyue.cnblogs.com
//演示 http://www.kuchechina.com/carstools/Default.aspx
jQuery.fn.toolTip = function() {
this.unbind().hover(
function(e) {
this.t = this.title;
this.title = '';
$('body').append( '<p id="p_toolTip" style="display:none; max-width:320px;text-align:left;"><img id="img_toolTip_Arrow" src="images/arrow.gif" />' + this.t + '</p>' );
var tip = $('p#p_toolTip').css({ "position": "absolute", "padding": "10px 5px 5px 10px", "left": "5px", "font-size": "14px", "background-color": "white", "border": "1px solid #a6c9e2","line-height":"160%", "-moz-border-radius": "5px", "-webkit-border-radius": "5px", "z-index": "9999"});
var target = $(this);
var position = target.position();
this.top = (position.top - 8); this.left = (position.left + target.width() + 5);
$('p#p_toolTip #img_toolTip_Arrow').css({"position": "absolute", "top": "8px", "left": "-6px" });
tip.css({"top": this.top+"px","left":this.left+"px"});
tip.fadeIn("slow");
},
function() {
this.title = this.t;
$("p#p_toolTip").fadeOut("slow").remove();
}
);
};

使用方法:
复制代码 代码如下:

<script type="text/javascript">
$(document).ready(function(){
$("#tootlsMain img[title]").toolTip();
});
</script>

可以利用jquery 选择器,选择带title属性的标签,当然可以适当的修改代码使适用带alt属性标签。
title属性支持简单html标签。如<br/>等。注意引号的使用
实现原理:
利用标签title属性,使hover事件取代默认鼠标事件,显示浮动层。this.unbind().hover 就是这句代码。jquery帮我们做好很多事情。堆积我们的现实代码就行。
程序员,文笔一般希望您能看懂。

代码下载

相关文章

  • jQuery实现鼠标经过提示信息的地图热点效果

    jQuery实现鼠标经过提示信息的地图热点效果

    这是一个升级版本,更新了一个在IE8里的小问题,加入了提示框的内容自动换行处理(北京点上有演示)!估计差不多该是最后样式了。IE6、IE8、谷歌、火狐、测试正常。
    2015-04-04
  • jQuery实现网页抖动的菜单抖动效果

    jQuery实现网页抖动的菜单抖动效果

    这篇文章主要介绍了jQuery实现网页抖动的菜单抖动效果,鼠标滑过菜单项可见到菜单项的抖动效果,涉及jquery鼠标事件及页面元素样式动态操作的技巧,需要的朋友可以参考下
    2015-08-08
  • jQuery简单图表peity.js使用示例

    jQuery简单图表peity.js使用示例

    这篇文章主要介绍了jQuery简单图表peity.js的使用,需要的朋友可以参考下
    2014-05-05
  • jquery animate 动画效果使用说明

    jquery animate 动画效果使用说明

    jquery animate 动画效果使用说明,需要的朋友可以参考下。
    2009-11-11
  • jquery动态加载js三种方法实例

    jquery动态加载js三种方法实例

    这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\");就OK了。
    2013-08-08
  • 『jQuery』名称冲突使用noConflict方法解决

    『jQuery』名称冲突使用noConflict方法解决

    jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号,这样就会发生名称冲突,使用名为 noConflict() 的方法来解决该问题
    2013-04-04
  • jQuery 全选效果实现代码

    jQuery 全选效果实现代码

    利用jquery实现的全选效果代码,实际上我感觉直接用js好像更容易些。不过这样对于jquery的操作可以更熟悉。
    2009-03-03
  • 使用DataTable插件实现异步加载数据

    使用DataTable插件实现异步加载数据

    本文给大家分享的是Jquery+dataTable插件来实现异步加载数据的示例代码,非常实用,有需要的小伙伴可以参考下
    2017-11-11
  • jQuery实例—选项卡的简单实现(js源码和jQuery)

    jQuery实例—选项卡的简单实现(js源码和jQuery)

    下面小编就为大家带来一篇jQuery实例—选项卡的简单实现(js源码和jQuery) 。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • jquery处理json对象

    jquery处理json对象

    JSON(JavaScript Object Notation)javscript对象标记,是一种轻量级的数据交换格式。具体的详细基础知识可以参考JSON官网http:/www.json.org/。不说太多废话,直接说说我对JSON的理解吧。
    2014-11-11

最新评论