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 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
mouse_on_title.js
Aug 25 Javascript
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
js单例模式的两种方案
Oct 22 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
js实现右键弹出自定义菜单
Sep 08 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
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
js实现登录与注册界面
2017/11/01 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
Python translator使用实例
2008/09/06 Python
Python基础入门之seed()方法的使用
2015/05/15 Python
Python实现ping指定IP的示例
2018/06/04 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
优秀研究生自我鉴定
2013/12/04 职场文书
上班看电影检讨书
2014/02/12 职场文书
员工考核评语大全
2014/04/26 职场文书
建筑投标担保书
2014/05/20 职场文书
租车协议书
2015/01/27 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
python tkinter实现定时关机
2021/04/21 Python
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python