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 ...
随机推荐
- JuJu团队12月4号工作汇报
JuJu团队12月4号工作汇报 JuJu Scrum 团队成员 今日工作 剩余任务 困难 于达 调试 无 无 婷婷 和陈灿一起提升acc 无 无 恩升 纠正chunk evaluator 无 无 ...
- redis学习（五）
一.Redis 发布订阅 1.Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. 2.Redis 客户端可以订阅任意数量的频道. 比如你订阅 ...
- P1010 一元多项式求导
1010 一元多项式求导 (转跳点:
- MongoDB 常用查询语法
一.查询 find方法 db.collection_name.find(); 查询所有的结果: select * from users; db.users.find(); 指定返回那些列(键): se ...
- 如何让手游更省带宽，耗电量更少？TBR渲染架构解析!
如何让手游更省带宽,耗电量更少?渲染或是其中一个可突破的点.本文中,腾讯游戏学院专家Hailong将从为大家解析TBR渲染架构的特点. 什么是TBR? 全称是Tile Based Rendering, ...
- SPOJ RENT 01背包的活用+二分
这个题目给定N航班的发出时间和结束时间以及价值,要求不冲突时间的最大价值 第一时间想到经典的N方DP,即对航班按发出时间排一下序之后每个i对前面的都扫一遍 时间过不了N有10万,只能想优化了,一开始想 ...
- VM ESXi虚拟化使用学习笔记
由于疫情原因,没有条件介绍安装部分的内容,也没有安装部分内容的相关截图,所以安装部分可以选择网上资料.但是只要熟练安装CentOS系统的,基本安装ESXi一看就会,设置主机地址方面有一定图形化界面,比 ...
- ACM-DFS Template
自己写的DFSTemplate: // DFS_Template.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" //DFS的思想是:一直向 ...
- AI 伴游小精灵
北京市商汤科技开发有限公司面向青少年研发了一款智能伴游机器人-- AI 伴游小精灵.一经推出,深受孩子们的喜爱,可爱又机智的小精灵会想出很多有趣的小游戏来启迪孩子们思考.今天,小精灵给你提出了一个神奇 ...
- selenium2Library无法启动chrome
使用其他浏览器都没有影响,唯独chrome启动不起来,去掉IE-连接-局域网设置-自动检测设置就OK了