jquery提示效果实例分析


Posted in Javascript onNovember 25, 2014

本文实例讲述了jquery提示效果的用法。分享给大家供大家参考。具体实现方法如下:

<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>

<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>

<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>

<p><a href="#" title="这是自带提示2.">自带提示2.</a></p>
$(function(){

    $(".tooltip").mouseenter(function(e){

 this.mytitle=this.title

 this.title=""

 var a="<div>"+this.mytitle+"</div>"

 $("body").append(a);

 $("div").css({

     "top": (e.pageY + y) + "px",

     "left": (e.pageX  + x) + "px"

 }).show("fast")

    }).mouseout(function(){

 this.title= this.mytitle;

 $("div").remove();

     });

})

心得体会:

不要在p标签下追加div元素,会出现一个大的偏差值!

原来!this和$("this")是有所不同,如果上文this.title改写成$("this").attr("title")会导致下面的mouseout事件无法访问保存下来的title。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
详解小程序退出页面时清除定时器
Apr 28 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 Javascript
jQuery操作cookie方法实例教程
Nov 25 #Javascript
JavaScript常用验证函数实例汇总
Nov 25 #Javascript
JavaScript导出Excel实例详解
Nov 25 #Javascript
JS倒计时代码汇总
Nov 25 #Javascript
jquery中push()的用法(数组添加元素)
Nov 25 #Javascript
Jquery焦点图实例代码
Nov 25 #Javascript
jQuery事件绑定和委托实例
Nov 25 #Javascript
You might like
php str_pad 函数用法简介
2009/07/11 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
在Django的session中使用User对象的方法
2015/07/23 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
Python常见的pandas用法demo示例
2019/03/16 Python
java判断三位数的实例讲解
2019/06/10 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
Python3的socket使用方法详解
2020/02/18 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
教育课题研究自我鉴定范文
2013/12/28 职场文书
大学生个人事迹材料
2014/01/21 职场文书
鸿星尔克广告词
2014/03/21 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA
MySQL的存储过程和相关函数
2022/04/26 MySQL