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


Posted in Javascript onNovember 14, 2010

IE下效果

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

Firefox或其它浏览器效果

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

//版权 酷车中国 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帮我们做好很多事情。堆积我们的现实代码就行。
程序员,文笔一般希望您能看懂。

代码下载

Javascript 相关文章推荐
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 Javascript
JS的数组迭代方法
Feb 05 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 #Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 #Javascript
javascript 学习笔记(onchange等)
Nov 14 #Javascript
javascript取消文本选定的实现代码
Nov 14 #Javascript
IE6下通过a标签点击切换图片的问题
Nov 14 #Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 #Javascript
在次封装easyui-Dialog插件实现代码
Nov 14 #Javascript
You might like
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
PHP XML操作类DOMDocument
2009/12/16 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
yii操作session实例简介
2014/07/31 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
Javascript实现时间倒计时效果
2017/07/15 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
Python之变量类型和if判断方式
2020/05/05 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
幼儿园教师获奖感言
2014/03/11 职场文书
婚庆司仪主持词
2014/03/15 职场文书
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
新兵入伍心得体会
2014/09/04 职场文书
python如何在word中存储本地图片
2021/04/07 Python