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 相关文章推荐
JavaScript 继承详解(二)
Jul 13 Javascript
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
Angular4表单验证代码详解
Sep 03 Javascript
js前端导出Excel的方法
Nov 01 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
Vue实现表格批量审核功能实例代码
May 28 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中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
永不消失的title提示代码
2007/02/15 Javascript
javascript AutoScroller 函数类
2009/05/29 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
puppeteer库入门初探
2019/01/09 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python的迭代器和生成器
2015/07/29 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python关于变量名的基础知识点
2020/03/03 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
信息技术教学反思
2014/02/12 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL