[锋利的JQ]-超链接提示效果
关键知识点:
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]-超链接提示效果的更多相关文章
- 超链接提示效果jQuery+CSS+html
我们知道浏览器自带了超链接提示, 只需要在超链接中加入 title 属性就可以了. <a href="#" title="吉大砍人案致1死1伤 受害者死前大喊他手里 ...
- Jq超链接提示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [锋利JQ]-图片提示效果
新知识点: 在HTML-Dom中 "style" 属性,是所有HTML标签共有的一个对象属性,这个对象属性可以为元素设置内嵌样式. style是元素的属性,但是它自身则是一个对象, ...
- jQuery超链接提示,提示跟随鼠标动
功能:实现鼠标移动到一个超链接时,鼠标右下角产生一个提示,并跟谁鼠标移动,知道鼠标离开超链接. 效果: 源码: <!--本案例是鼠标放在超链接上时,鼠标旁边有提示这是个超练级,以及放在图片上时图 ...
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
- jQuery——超链接提示
在熟悉jQuery过程中,练习超链接提示显示,发现书本上有个问题,经过查询资料,修改如下: <!DOCTYPE html> <html> <head> <ti ...
- 炫!一组单元素实现的 CSS 加载进度提示效果
之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...
- Fort.js – 时尚、现代的表单填写进度提示效果
Fort.js 是一款用于时尚.现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单.提供了Default.Gradi ...
- SweetAlert – 替代 Alert 的漂亮的提示效果
Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果.SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒.另外提 ...
随机推荐
- Asp.Net MVC中使用ACE模板之Jqgrid
第一次看到ACE模板,有种感动,有种相见恨晚的感觉,于是迅速来研究.它本身是基于bootstrap和jqueryui,但更nice,整合之后为后台开发节省了大量时间. 发现虽然不是完美,整体效果还是不 ...
- .NET中Dictionary<TKey, TValue>浅析
.NET中Dictionary<TKey, Tvalue>是非常常用的key-value的数据结构,也就是其实就是传说中的哈希表..NET中还有一个叫做Hashtable的类型,两个类型都 ...
- Winform 可取消的单选按钮(RadioButton)
在项目当中有一组选择项,要求单选并且可以取消,但Winform提供的单选按钮一旦选择上就不能取消了,经过研究和测试,总算搞定了功能的要求,主要代码如下,就不一一说明了,代码里有注释,给有需要的朋友一个 ...
- http学习笔记(三)
几乎所有的http通信都是由TCP/IP承载的.http好比一辆汽车,而TCP是一条公路,所有的汽车都要在公路上跑,看看http是如何在tcp这条公路上往返的. 首先简单地看看tcp,TCP连接是通过 ...
- js模版引擎handlebars.js实用教程——由于if功力不足引出的Helper
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
- 基于Token的WEB后台认证机制
几种常用的认证机制 HTTP Basic Auth HTTP Basic Auth简单点说明就是每次请求API时都提供用户的username和password,简言之,Basic Auth是配合RES ...
- Setting up SSL for SCM-Manager with Microsoft CA and TortoiseHg
You can configure SSL for SCM-Manager so that the communication of your repositories are encrypted. ...
- SQL-truncate && delete && drop 的区别
有些人在删除表的所有记录的时候,喜欢这样来——不给DELETE 语句提供WHERE 子句,表中的所有记录都将被删除.但这种方法是不可取的,正确的应该使用 TRUNCATE TABLE tb_name ...
- vue在多级联动时,一些情况不用watch而用onchange会更好
onchange事件在内容改变且失去焦点时触发,因此在一些多级联动需要清空次级内容的时候,用onchange就非常有用了,尤其是浏览器会提前加载数据的情况下.有篇文章可以看一下,链接. PS:路漫漫其 ...
- Lucene学习
一.全文索引的原理 数据存在形式: 1.结构化数据: 指具有固定格式或有限长度的数据,如数据库,元数据等. 2.非结构化数据(全文数据): 指不定长或无固定格式的数据,如邮件,word文档等. 3.半 ...