关键知识点:

  1、事件对象:当事件一旦被触发,事件对象便会创立。事件对象只能作用于该事件的事件处理程序。

  2、认识了mousemove事件了连续触发执行的特性。

代码:

  HTML:

<div class="box"><a href="javascript:;" class="link" title="超链接的标题,也是要提示的文字">超链接提示效果示例</a></div>

  

  Jquery:

    $('.link').mouseover(function(event){
//event便是事件对象,事件处理函数一旦执行,事件对象便会创立。事件处理函数一旦结束,事件对象便会销毁。
title = this.title;
this.title="";
var tipBox = '<div id="tipContent">'+ title +'</div';
$('body').append(tipBox);
$('#tipContent').css({
'position':'absolute',
'left':event.pageX+5,
'top':event.pageY+5
});
}).mouseout(function(){
$('#tipContent').remove(); //移除提示内容元素
this.title=title; //为链接重新设置title值,为下次指向时使用。
}).mousemove(function(event){
$('#tipContent').css({
'left':event.pageX+5,
'top':event.pageY+5
})
})

[锋利的JQ]-超链接提示效果的更多相关文章

  1. 超链接提示效果jQuery+CSS+html

    我们知道浏览器自带了超链接提示, 只需要在超链接中加入 title 属性就可以了. <a href="#" title="吉大砍人案致1死1伤 受害者死前大喊他手里 ...

  2. Jq超链接提示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. [锋利JQ]-图片提示效果

    新知识点: 在HTML-Dom中 "style" 属性,是所有HTML标签共有的一个对象属性,这个对象属性可以为元素设置内嵌样式. style是元素的属性,但是它自身则是一个对象, ...

  4. jQuery超链接提示,提示跟随鼠标动

    功能:实现鼠标移动到一个超链接时,鼠标右下角产生一个提示,并跟谁鼠标移动,知道鼠标离开超链接. 效果: 源码: <!--本案例是鼠标放在超链接上时,鼠标旁边有提示这是个超练级,以及放在图片上时图 ...

  5. BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  6. jQuery——超链接提示

    在熟悉jQuery过程中,练习超链接提示显示,发现书本上有个问题,经过查询资料,修改如下: <!DOCTYPE html> <html> <head> <ti ...

  7. 炫!一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

  8. Fort.js – 时尚、现代的表单填写进度提示效果

    Fort.js 是一款用于时尚.现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单.提供了Default.Gradi ...

  9. SweetAlert – 替代 Alert 的漂亮的提示效果

    Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果.SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒.另外提 ...

随机推荐

  1. SQL提示介绍-强制并行

    查询提示一直是个很有争议的东西,因为他影响了sql server 自己选择执行计划.很多人在问是否应该使用查询提示的时候一般会被告知慎用或不要使用...但是个人认为善用提示在不修改语句的条件下,是常用 ...

  2. 【T-SQL基础】01.单表查询-几道sql查询题

    概述: 本系列[T-SQL基础]主要是针对T-SQL基础的总结. [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础]02.联接查询 [T-SQL基础]03.子查询 [T-SQL基础 ...

  3. Windbg用法详解

    工作空间 WinDBG的工作空间中保存了以下几种信息 调试会话状态: 包括断点,打开的源文件,用户定义的别名(alias)等. 调试器设置:包括符号文件路径,可执行映像文件路径,源文件路径,用I+/I ...

  4. java提高篇(二十)-----集合大家族

          在编写java程序中,我们最常用的除了八种基本数据类型,String对象外还有一个集合类,在我们的的程序中到处充斥着集合类的身影!java中集合大家族的成员实在是太丰富了,有常用的Arra ...

  5. RSS与公众号

    这次怀念下曾经火热的RSS.RSS是我很喜欢的一种看信息学习的方式,但是这项技术随着谷歌reader产品的停止已经陨落了.之后再无给力的客户端,无法让人愉悦的使用.我也曾尝试用鲜果,有道等国内产品,由 ...

  6. cxf restful

    Restful 服务端 1 创建好pojo.dao.service, dao进行数据库操作,service提供服务 @Path("/roomservice") @Produces( ...

  7. 每天一个linux命令(58):telnet命令

    telnet命令通常用来远程登录.telnet程序是基于TELNET协议的远程登录客户端程序.Telnet协议是TCP/IP协议族中的一员,是Internet远程登陆服务的标准协议和主要方式.它为用户 ...

  8. PHP基础 创建

    注意:1.网页文件放在wamp中的www文件下: 2.www文件下不能出现中文: 网页浏览的方法: 1.没有建立站点:localhost/文件所在位置 2.建立站点: (1)站点-新建站点-打开对话框 ...

  9. 20_学生选课数据库SQL语句练习题1

    25.查询95033班和95031班全体学生的记录. select * from STUDENT t,SCORE s where t.sclass=95033 or t.sclass=95031 26 ...

  10. JavaScript中this的一些怪异现象

    <!--JavaScript伪协议和内联事件对于this的指向不同--> <a href="#" onclick="alert(this.tagName ...