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 相关文章推荐
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 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 数组入门教程小结
2009/05/20 PHP
php 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
PHP学习 变量使用总结
2011/03/24 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
神经网络python源码分享
2017/12/15 Python
python验证码识别实例代码
2018/02/03 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
python算法题 链表反转详解
2019/07/02 Python
python实现从wind导入数据
2019/12/03 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
治庸问责心得体会
2014/09/12 职场文书
学校政风行风整改方案
2014/10/25 职场文书
房地产项目合作意向书
2015/05/08 职场文书
情况说明书怎么写
2015/10/08 职场文书
zabbix监控mysql的实例方法
2021/06/02 MySQL
zabbix配置nginx监控的实现
2022/05/25 Servers