jquery提示效果实例分析
作者:bea
本文实例讲述了jquery提示效果的用法。分享给大家供大家参考。具体实现方法如下: 代码如下: <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p> <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p> <p><
本文实例讲述了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程序设计有所帮助。
有用 | 无用
代码如下:
<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选择器需要注意的问题
- jquery操作对象数组元素方法详解
- node.js中的定时器nextTick()和setImmediate()区别分析
- JavaScript定义类和对象的方法
- node.js操作mongoDB数据库示例分享
- 教你如何使用node.js制作代理服务器
- 浅析node.js中close事件
- node.js超时timeout详解
- node.js+Ajax实现获取HTTP服务器返回数据
- nodejs中转换URL字符串与查询字符串详解
- 使用node.js 获取客户端信息代码分享
- node+express+jade制作简单网站指南
- JS简单操作select和dropdownlist实例
- node+express+ejs制作简单页面上手指南
- node.js使用require()函数加载模块
- javascript中setTimeout和setInterval的unref()和ref()用法示例
- 浅谈jQuery中对象遍历.eq().first().last().slice()方法
- javascript 原型链维护和继承详解