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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
jquery.post用法示例代码
Jan 03 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
vue插件实现v-model功能
Sep 10 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
新闻分类录入、显示系统
2006/10/09 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
如何快速上手Vuex
2017/02/14 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
python读取二进制mnist实例详解
2017/05/31 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
pytorch 修改预训练model实例
2020/01/18 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
最热门的自我评价
2013/12/30 职场文书
跟单文员岗位职责
2014/01/03 职场文书
组工干部演讲稿
2014/09/02 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
学历证明范文
2015/06/16 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL