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 相关文章推荐
两个DIV等高的JS的实现代码
Dec 23 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
Mar 28 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
jquery form 加载数据示例
Apr 21 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
jquery实现百叶窗效果
Jan 12 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 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
用cookies来跟踪识别用户
2006/10/09 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
简述vue中的config配置
2018/01/23 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
Python Socket编程之多线程聊天室
2018/07/28 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
课堂教学改革实施方案
2014/03/17 职场文书
个人授权委托书范本
2014/04/03 职场文书
一体化教学实施方案
2014/05/10 职场文书
学生安全承诺书
2014/05/22 职场文书
廉洁自律证明
2015/06/24 职场文书
重阳节主题班会
2015/08/17 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书