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 ...
随机推荐
- Java程序员学习Go指南（三）
转载:https://www.luozhiyun.com/archives/213 人是否会进步以及进步得有多快,依赖的恰恰就是对自我的否定,这包括否定的深刻与否,以及否定自我的频率如何.这其实就是& ...
- maven杂碎汇总
本来是想写一篇关于maven知识点的详细总结的,但需要看一本书或教材,然后再汇总一下,这样做自然是好的,这个在年前争取做完.本文是主要记录在工作和学习遇到关于maven的一些困惑.很乐意看到它 ...
- SpringBoot-属性配置yaml自定义属性和值
SpringBoot-属性配置yaml自定义属性和值 SpringBoot-属性配置yaml自定义属性和值 在SpringBoot中yml/yaml文件可以自定义一些属性,以供注入给自定义bean对象 ...
- POJ3295 Tautology重言式
Tautology 思路很简单,对于p.q.r.s.t暴力枚举是0还是1,判断即可.判断时像写表达式求值那样用栈.为了方便可以从后往前,因为最后一个肯定不是运算.那几个奇奇怪怪的函数可以找规律然后转为 ...
- htmp to pdf
C++ Library to Convert HTML to PDF html2pdf PrinceXML 收费 CutePDF Ghostscript PDFDoc VisPDF PDFDoc Sc ...
- mcu运行时间估算
昨个伙计问我他那个板子的程序运行时间估算问题… 现在说一下估算的思路.首先确定有几个点,板子的主频.时钟周期,机器周期. 首先由主频f得到一个时钟周期为1/f. 再者时钟周期与机器周期有一个比例关系, ...
- TensorFlow中的L2正则化函数：tf.nn.l2_loss()与tf.contrib.layers.l2_regularizerd()的用法与异同
tf.nn.l2_loss()与tf.contrib.layers.l2_regularizerd()都是TensorFlow中的L2正则化函数,tf.contrib.layers.l2_regula ...
- 158-PHP strstr函数输出第一次出现字符串的位置到字符串结尾的所有字符串
<?php $str='PHP is a very good programming language!'; //定义一个字符串 echo '第一次出现字母l的位置到字符串结尾的所有字符串'.s ...
- 面试题（10）之 leetcode-26
题目描述 解法一 对数组去重求数组长度,没有必要 /** * @param {number[]} nums * @return {number} */ var removeDuplicates = f ...
- centos7-虚拟机 主机 互通 静态ip网络设置
由于目前互联网发展的速度之快.用户量之多,很多时候作为服务端单台服务器的硬件配置已经不足以支撑业务.集群.分布式等技术架构变得越来越普及,作为开发人员也有必要掌握相关技能.笔者打算选用virtual ...