原生js实现的效果

最新推荐文章于 2022-04-23 22:50:21 发布

weixin_30856965

最新推荐文章于 2022-04-23 22:50:21 发布

阅读量172

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/chun6/p/6058473.html

版权

原生js实现tooltip提示框的效果

在js的世界里面，每一个小的特效都那么微不足道，却又那么的令人向往与好奇。前端工程师的任务特别高大上，因为他们的一个小小的设计就会激发别人的求知欲。比如说我，只是随机一瞟，便看到了这个tooltip的特效，就有一种想要征服它的愿望。

比如这个tooltip的效果展示：

这个便是tooltip提示框的效果。

在Hbulider上的代码展示：

  1 <!DOCTYPE html>
  2 <html>  3 <head>  4 <meta charset="UTF-8">  5 <title>ToolTip</title>  6 <style type="text/css">  7  .body{  8  width: 500px;  9  height: 600px;  10  font-size: 14px;  11  background-color: #eee;  12 }  13  #demo{  14  width: 400px;  15  16  margin: auto;  17  position: relative;  18  border-radius: 10px;  19  background-color: #ccc;  20  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.2);  21 }  22  #demo a{  23  color: #11C2EE;  24 }  25  #demo h2{  26  color: #3CC4A9;  27 }  28  #demo tooltip{  29  color: #3CC4A9;  30  cursor: help;  31 }  32  .tooltip-box{  33  display: block;  34  line-height: 1.6;  35  background-color: #fff;  36  border: 1px solid #666;  37  font-size: 12px;  38  border-radius: 5px;  39  overflow: auto;  40 }  41 </style>  42 </head>  43 <body>  44 <div id="demo">  45 <h2>实现tooltip的效果</h2>  46 <hr />  47 <p>  48 渭城朝雨浥轻尘，客舍青青柳色新。劝君更尽一杯酒，西出阳关无故人。这首诗是著名诗人<a class="tooltip" id="tooltip1">王勃</a>的作品。借此来表达自己对友人的依依惜别之意。  49 </p>  50  51 <p>  52 我喜欢古诗，因为它能给别人更多的理解，想象。古诗是很唯美的，随处可见的美景，比如<a class="tooltip" id="tooltip2">荷花</a>，便有，接天莲叶无穷碧，映日荷花别样红。多美的诗呀！  53 </p>  54 </div>  55