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 相关文章推荐
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
js实现索引图片切换效果
Nov 21 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
Javascript的无new构建实例详解
May 15 Javascript
js canvas实现擦除动画
Jul 16 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
vue中提示$index is not defined错误的解决方式
Sep 02 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实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
js简单抽奖代码
2015/01/16 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
python扫描线填充算法详解
2020/02/19 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
文案策划求职信
2014/04/14 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
单身申明具结书
2015/02/26 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
2015年药店工作总结
2015/04/20 职场文书
年会主持人开场白台词
2015/05/29 职场文书
优秀员工演讲稿
2019/06/21 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书