html标签title属性效果优化
html标签title属性效果不友好，最致命的是响应慢，体验不好，JQuery-UI提供了很好的支持。在jquery.tip的基础上又做了修改，这样子定制效果更强。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现的简单文字提示效果</title>
<!-- 无需引用jQuery，下面的js已经自带了简化的jquery代码 -->
<script src="jquery.tip.js" type="text/javascript"></script>
<style type="text/css">
body {
margin: 0;
padding: 40px;
background: #fff;
font: 80% Arial, Helvetica, sans-serif;
color: #555;
line-height: 180%;
} p {
clear: both;
margin: 0;
padding: .5em 0;
} /* tooltip */ #tooltip {
position: absolute;
border: 1px solid #333;
background: #f7f5d1;
padding: 1px;
color: #333;
display: none;
}
</style>
<script type="text/javascript">
$(function () {
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function (e) {
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>" + this.myTitle + "<\/div>"; //创建 div 元素 文字提示
$("body").append(tooltip); //把它追加到文档中
$("#tooltip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function () {
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function (e) {
$("#tooltip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
});
});
})
</script>
</head> <body>
<h1 align="center">jQuery实现的简单文字提示效果</h1>
<h2 align="center">请将鼠标指向超链接文字</h2>
<p>
<a href="" class="tooltip" title="这是我的超链接这是我的超链接提这是我的超链接提这是我的超链接提这是我的超链接提示1.">jQuery提示1</a>
</p>
<p>
<a href="" class="tooltip" title="这是我的超链接这是我的超链接提这是我的超链接提这是我的超链接提这是我的超链接提提示2.">jQuery提示2</a>
</p>
</body> </html>
转载地址：http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html
html标签title属性效果优化的更多相关文章
- html a 链接标签title属性换行鼠标悬停提示内容的换行效果
鼠标经过悬停于对象时提示内容(title属性内容)换行排版方法,html title 换行方法总结. html的title属性默认是显示一行的.如何换行呢? 这里DIVCSS5总结介绍两种换行方法为大 ...
- 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
- html标签title属性值包括处理
用js赋给title属性的html实体,<br/>无法解析,导致 也无法解析,应该使用\r\n代替,使用 无法实现换行,因为没有经过浏览器的再解析. str_info.replace(/\ ...
- HTML中input标签的alt属性和title属性的比较
经常用到这两个属性,但是一直没有总结他们的区别.现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容. 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性 ...
- 【HTML】input标签中alt属性和title属性的比较
经常用到这两个属性,但是一直没有总结他们的区别.现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容. 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性 ...
- img标签中alt和title属性的正确使用
在的img标签有两个属性分别为alt和title,对于很多初学者而言对这两个属性的正确使用都还抱有迷惑,当然这其中一部分原因也是ie浏览器所导致的.正确的使用这两个属性除了可以提高图片的搜索能力外,在 ...
- 同一容器中a标签比较多的情况下通过title属性值隐藏
同一容器中a标签比较多的情况下如何通过title属性值控制a标签的隐藏或显示 最近项目中遇到一个IE兼容性问题,网站需要在底部footer添加"站长统计"代码,容器中动态添加很多a ...
- img标签中alt属性与title属性在seo的作用-摘自网友
img标签中alt属性与title属性作用,也许大家比较迷惑,现在给大家举例说明.alt属性是图片的替换文字.title属性规定元素的额外信息,有视觉效果. 目录 alt属性 title属性 ie和f ...
- HTML语言中img标签的alt属性和title属性的作用与区别
alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在原本加载图片的地方,而title属性是在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,有点类似jQuery的h ...
随机推荐
- 格雷码（Grey Code）生成规则
(1) Grey码在FPGA实际应用中是实用的码,在8421BCD码累加计数器中,如果寄存器需要发生多位(两位或者以上)的跳变,会出现中间态,这样作为组合逻辑的输入是不稳妥的. 下面看两个中间态的例子 ...
- BAT 五路internet负载均衡
一个网上下载的bat文件 也不记得从那里下载的了 记得似乎需要管理员权限运行 依稀记得测试有效 放在这里做个记录 @echo off echo. echo ╭─────────╮ echo ╭──── ...
- TFIDF介绍
简介 全称: Term Frequency-inverse document frequency(文本频率与逆文档频率指数) 目的: 表征一个token(可以是一个字或者一个词)的重要程度 是Elas ...
- Python中语法糖及带参语法糖
在python中,@符号常被称作语法糖(装饰器),在某函数定义时,用以包装该函数,以达到截取,控制该函数的目的. def d(f): print('d...') k=f #此处保留了传进来的原函数 f ...
- git commit -m 和 git commit -am 区别
git commit -m 和 git commit -am 通常修改一个文件 并且将文件提交到本地分支的命令是: git add . git commit -m 'update' 以上两个命令其实可 ...
- S7-300数据处理基本知识（结尾以MW8+1 ADD指令实训仿真，并用状态表监控及刷写变量）
数据处理基本知识汇总 STEP7 的数据类型包括什么? 基本数据类型 复杂数据类型 用于FB(功能块)的输入,输出参数类型 用于FC(功能)的输入,输出参数类型 基本数据类型是什么? 先列举12种数据 ...
- UVA - 211 The Domino Effect（多米诺效应）（dfs回溯）
题意:根据多米诺骨牌的编号的7*8矩阵,每个点可以和相邻的点组成的骨牌对应一个编号,问能形成多少种由编号组成的图. 分析:dfs,组成的图必须有1~28所有编号. #pragma comment(li ...
- POJ 3983：快算24
快算24 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 4791 Accepted: 2930 Description ...
- 【BZOJ2400】Optimal Marks
题意 定义无向图中的一条边的值为:这条边连接的两个点的值的异或值. 定义一个无向图的值为:这个无向图所有边的值的和. 给你一个有 \(n\) 个结点 \(m\) 条边的无向图.其中的一些点的值是给定的 ...
- XTU 1205 Range
还是五月湘潭赛的题目,当时就是因为我坑...连个银牌都没拿到,擦. 这个题目枚举区间是不可能的,明显是要考虑每个数对全局的影响,即找到每个数最左和最右能满足是最大的位置 以及 最小的时候,相乘即为该数 ...