jQuery简单纯文字提示条
如何制作jQuery简单纯文字提示条,先介绍提示条(tooltip)的意思是用户鼠标悬停经过事件发生提示title。它们已经呈现在大多数浏览器中,当你可以提供一个链接或图片的title属性,就是用户将鼠标悬停在该元素,浏览器通常会显示它作为一个提示条,通过文本存储使用数据命令,可以清除并替换链接标题。提示条不仅支持文字标题内容,还支持图片按钮空白框控件。那么我从国外作者的技术博客 http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/ 学到一点他的代码,然后设计成自己的样式。
逻辑论
1.抓取标题
我们首先从链接中抓取其标题,将变成文字作为提示条弹出。我们需要从链接中解除默认的标题,为了避免默认的标题提示和我们自定义的提示条发生冲突,所以通过文本存储使用数据命令,再清除并替换链接标题。
2.鼠标经过事件
建立新的段落元素,它们带有tooltip的class类,我们可以下一个方式设置提示条内容。增加子节到页面在appendTo(‘body’)后面写,并自定义fadeIn的动画属性。
3.鼠标离开事件
很简单的,恢复标题的属性,清除提示条。
4.鼠标经过事件
非常重要,当我们需要获得X轴与Y轴坐标才能定位正确的提示条,这样提示条会跟着鼠标的下面。
可以用自定义的tooltip代替标签的默认title值,自由巧妙地设计提示条的样式和动画。
1.代码
<body>
<div class="container">
<h1>jQuery简单提示条<small>如何制作jQuery效果</small></h1>
<div class="container">
<h2>鼠标经过蓝色的文字</h2>
<p><a href="#" title="看见了灰色提示条吧?" class="masterTooltip">世界上有蓝色的蛋蛋</a></p>
<h2>鼠标经过灰色的全段落文章</h2>
<p title="我和蛋蛋之间的故事很有趣吧。" class="masterTooltip">我和蛋蛋是去年七月末认识的,很有意思,我们是网友,蛋蛋在群聊里看见女人的名字,觉得这个名字太简单了,而且明确表明自己已经是女人了,好奇就加了我。我们聊的很好,有点难舍难分的感觉,蛋蛋说等到水到渠成,我就去见你。哈哈,我挺高兴的,反而有马上见见他的感觉。约他出来看看庐山真面目!没沉,是我没在更新。女人昨天喝多了!因为感触,看了很多关于爱情的帖子,觉得很对不起蛋蛋。因为不能给他幸福和一个小家。我爱他,很爱很爱。</p>
<h2 title="此为主标题!" class="masterTooltip">鼠标经过这个标题(有提示条)</h2>
<p title="此为副标题!" class="masterTooltip">我和蛋蛋之间的故事小标题</p>
<h2>鼠标经过搞笑的图片</h2>
<img src="http://dandan500.com/wp-content/uploads/2013/10/fa7a0b2442a7d9334695b2ebad4bd11372f001b6.jpg" class="masterTooltip" title="哇!看看小白蛋和他的伙伴们惊呆了" />
<h2>鼠标经过按钮</h2>
<button type="button" class="masterTooltip" title="点击[确认]按钮,当然只是死按钮,不会给你惊喜">确认</button>
<h2>鼠标经过填写框</h2>
<input type="text" placeholder="你的名字" class="masterTooltip" title="请输入你喜欢的名字"/>
</div>
</body>
2.代码
body{
background:#FF7B3A;
font:bold 12px Arial, Helvetica, sans-serif;
margin:0;
padding:0;
min-width:960px;
color:#666;
}
a {
text-decoration:none;
color:#4979C2;
}
h1 {
font: 4em normal Arial, Helvetica,Microsoft JhengHei, sans-serif;
padding: 0; margin: 0;
text-align:center;
color:#ccc;
}
h1 small{
font: 14px normal Arial, Helvetica, Microsoft JhengHei, sans-serif;
text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
display: block;
}
h2 {
font-weight:700;
color:#fff;
font-size:20px;
font: normal Arial, Helvetica, Microsoft JhengHei, sans-serif;
}http://www.huiyi8.com/huanbao/
h2, p {环保标志
margin-bottom:-1px;
}
.container {width: 960px; margin: 0 auto; overflow: hidden; height:910px;}
img {
border:6px solid #fff;
}
.tooltip {
display:none;
position:absolute;
border:0px solid #333;
background-color:#ccc;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: #000 1px 5px 20px;
-moz-box-shadow: #000 1px 5px 20px;
box-shadow: #000 1px 5px 20px;
padding:10px;
color:#C94338;
font-size:12px;
}
3. [代码]记得在顶部或者底部php引用jquery库
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
4. 代码
$(document).ready(function() {
// 纯文字提示条
$('.masterTooltip').hover(function(){
// 鼠标悬浮经过事件
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function() {
// 鼠标悬浮离开事件
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //获得X轴坐标
var mousey = e.pageY + 10; //获得Y轴坐标
$('.tooltip')
.css({ top: mousey, left: mousex })
});
});
jQuery简单纯文字提示条的更多相关文章
- jQuery 闪动的文字提示
原文地址:http://www.cnblogs.com/kiter/archive/2013/02/22/2922242.html 声明,本文转自网络. jQuery 闪动的文字提示,仿QQ头像闪烁闪 ...
- jquery.autocomplete 搜索文字提示
function GetJobTitle(obj) { $(obj).autocomplete("GetJobTitle.ashx", { max: 12, //列表里的条目数 m ...
- jQuery实现的简单文字提示效果模拟title(转)
来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html 模拟title实现效果,可以修改文字的样式,换行等. 文件下载: ...
- jQuery图片提示和文字提示
图片提示: 效果如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- DOM操作在jQuery中的实用------文字提示和图片提示
关于文字提示想必是家喻户晓,操作呢说简单一点就是在超链接中加入title属性.但是在人机交互越来越倍受恩宠的年代,依靠浏览器自带的文字提示即title属性,提示效果的响应速度就(还是人艰不拆了吧~)s ...
- jQuery渐隐渐出的文字提示
<html> <head> <title>jquery渐隐渐出的文字提示</title> <style type="text/css&q ...
- 第一百九十八节,jQuery EasyUI,ProgressBar(进度条)组件
jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...
- jNotify:操作结果信息提示条
我们在提交表单后,通过Ajax响应后台返回结果,并在前台显示返回信息,jNotify能非常优雅的显示操作结果信息.jNotify是一款基于jQuery的信息提示插件,它支持操作成功.操作失败和操作提醒 ...
- 用js实现文字提示层 ---总结
文字提示层在项目中应该是比较常见的,我工作中项目中就用到了,原理是一样,只不过形式不一样,今天通过看视频学习,学会了,总结下: 首先,页面效果如下: 需求: 当鼠标移入到红色字体是,提示框会显示在下 ...
随机推荐
- Java基础学习之数组基本属性和方法
数组对于每一门编程语言都是重要的数据结构之一,当然不同语言对数组的实现及处理也不尽相同.Java语言中提供的数组是用来存储固定大小的同类型元素.你可以声明一个数组变量,如 int[100] 来代替直接 ...
- 一个jboss启动shell脚本
脚本1: #!/bin/sh # paulo@evencom.com.br #JBOSS_HOME JBOSS_HOME="/opt/app/jboss-eap-6.3" JAVA ...
- codevs 1743 反转卡片 rope or splay
[codevs1743]反转卡片 题目描述 Description [dzy493941464|yywyzdzr原创] 小A将N张卡片整齐地排成一排,其中每张卡片上写了1~N的一个整数,每张卡片上的数 ...
- App竞品技术分析 (3)减小安装包的体积(转)
http://blog.csdn.net/JspAndAsp/article/details/49339403 1 从几件小事说起 春节在家帮姐姐的iPhone手机安装市面上形形色色的App,忘记她是 ...
- C. Wilbur and Points---cf596C
http://codeforces.com/problemset/problem/596/C 题目大意: 给你n个数对 确保如果(x,y)存在这个集合 那么 0<=x'<=x &a ...
- service mesh架构
service mesh 系列文章 https://my.oschina.net/iamlipeng/blog/1631575 http://developer.51cto.com/art/2018 ...
- canvas跟随页面滑动后准确定位到真实坐标
先来了解一个属性: getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var ...
- Java日志框架-Logback手册中文版以及官方配置文档教程
Logback手册中文版:(链接: https://pan.baidu.com/s/1bpMyasR 密码: 6u5c),虽然版本有点旧,但是大体意思差不多,先用中文版了解个大概,然后一切最新的配置以 ...
- foobar2000实现用手机远程控制PC命令行版
实现此功能主要是在手机上使用Telnet命令实现下一首播放. 1.安装Telnet守护进程插件:http://www.foobar2000.org/components/view/foo_telnet ...
- 判断所ping主机的操作系统
根据它的值判断所ping主机的操作系统类型. TTL被称为生存期,也就是你所传输的数据在网络上经过的路由器的最大个数. 操作系统 TTLLINUX 64WIN2K/NT 128WINDOWS 系列 3 ...