开发者学堂课程【jQuery 开发教程：jQuery 特效实例_幽灵按钮4】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4315
jQuery 特效实例_幽灵按钮4
一、代码示例
实现 tooltip 提示框思路，要写一个div来承载提示框，需要位置的计算和下面的三角号，已经显示里面的内容。
首先让提示框承载出来，然后通过js控制位置。
1.承载提示框，以及字体三角符号
.box . tooltip{ //观察可以看到效果有应该设置宽度和高度，仔细观察宽度是自动撑开的，高度是固定的，然后有一个边框圆角的效果，设置字体以及下面的三角符号。 position: absolute; //设置绝对定位 padding: 0 15px; //中间字体不是靠边的，设置上下为0px，左右为15px height: 35px; //高度为35px background-color: #2dcb70; //设置背景颜色为绿色 border-radius: 5px; //设置圆角效果为5px line-height: 35px; margin: 0 auto; //使文字垂直居中 color: #ffffff; //设置字体颜色为白色 font-size: 18px; //字体大小为18px font-weight: 700; //字体加粗效果 }
文本框效果图：
.box . tooltip span{ //三角形符号 position: absolute; //设置为绝对定位 width:0; //高度为0 height:0; //宽度为0 border: 8px solid transparent; //边框宽度为8px，实线，给一个透明的颜色 border- top-color: #2dcb70; //设置上边框颜色为绿色 Left: 50%; //使得三角符号居中 margin-left: -4p; //三角号再左一点 }
运行结果：
2.script鼠标移动上动态获取，添加文本
观察可知文本的添加都是动态获取动态添加的。
首先可以写div承载提示框，类名为tooltip，里面的内容可以用<em>承载，也可以用span标签，文本框下面的三角号也可以用<span>标签承载，
通过index.html主体代码为：
< !DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="app.css" type="text/css"/> < /head> <body> <div class="box"> <div class="link Link-miss"> <span class="icon"></span> <a href="#" class="button" data-text=”My mission is clear”> //使用自定义属性添加内容并且可以获取到 <span class="line line- top"></span> <span class="line Line-left"></span> <span class="line line-right"></span> <span class="line line- bottom"></span> MISSION </a> </div> <div class="link link-play"> <span class="icon">< /span> <a href="#" class= "button" data-text=”This is my playground”> <span class="line Line-top"></span> <span class="line line-left"></span> <span class="line line-right"></span> <span class="line line- bottom"></span> PLAY </a> </div> <div class="link link- touch'"> <span class="icon"></span> <a href="#" class="button" data-text=”Lets do something together”> <span class="line line- top"></span> <span class="line line-left"></span> <span class="line line-right"></span> <span class="line line- bottom"> </span> TOUCH </a> </div> <div class="tooltip"> <em> </em> //随便添加内容，便于观察，设置成em标签方便查找span <span></span> </div> </div> <script src=”jquery-2.2.1.min.js”></script> //使用js动态获取内容，并添加到<em>标签中 <script> $( function(){ $(".button") . hover ( function() { //当鼠标略过时获取按钮，hover有两个参数，都为函数类型 var titleText=$(this) .attr ("data- text") ; //获取内容，声明变量titleText获取data- text内容 $(". tooltip em"). text(titleText);//使用指针指向，attr的方式动态获取titleText内容并添加 //返回的是个对象，只要获取距离左边的位置即可 var leftLoc=$(this).offset() .left; var addleft=($(". tooltip"). outerWidth()-$(this) .outerwidth())/2; //将距离赋给提示框，声明需要移动左边的距离变量addleft，因为是自适应的一个宽度，所以要动态获取tooltip，然后减去当前bottom的宽度。 $(". tooltip").css({ left: leftLoc-addleft； top:140 }) .animate({ //添加自定义动画 top:195, opacity: 1 },300) //动画执行时间为300 }, function(){ }) }) </script> < /body> < /html>
最终效果图：
