[关闭]
@EncyKe 2016-01-21T08:43:35.000000Z 字数 11909 阅读 2544

JS：导航条（幽灵按钮、气泡按钮）

前端 JavaScript

一、幽灵按钮

HTML部分

  1. <div class="box">
  2.     <div class="link mission-link">
  3.         <span class="icon animated"></span>
  4.         <a class="button" data-title="My mission is clear">
  5.             <span class="line line-top"></span>
  6.             <span class="line line-right"></span>
  7.             <span class="line line-bottom"></span>
  8.             <span class="line line-left"></span>
  9.             Mission
  10.         </a>
  11.     </div>
  12.     <div class="link play-link">
  13.         <span class="icon animated"></span>
  14.         <a class="button" data-title="This is my playground">
  15.             <span class="line line-top"></span>
  16.             <span class="line line-right"></span>
  17.             <span class="line line-bottom"></span>
  18.             <span class="line line-left"></span>
  19.             Play
  20.         </a>
  21.     </div>
  22.     <!-- 添加提示气泡，通过jQuery追加到各自按钮上方 -->
  23.     <p class="tip"><em></em><span></span></p>
  24. </div>

CSS部分

  1. *{
  2.     margin:0;
  3.     padding:0;
  4. }
  5. body{
  6.     background:#333;
  7. }
  9. .box{
  10.     width:800px;
  11.     height:280px;
  12.     margin:50px auto;
  13.     overflow:hidden;
  14. }
  16. .box .link{
  17.     display:inline-block;
  18.     width:205px;
  19.     height:220px;
  20.     margin:0 20px; 
  21.     position:relative;
  22. }
  24. .link .icon{
  25.     display:block;
  26.     width:100%;
  27.     height:180px;
  28.     -webkit-transition:ease-out 0.2s;
  29.     -moz-transition:ease-out 0.2s;
  30.     -ms-transition:ease-out 0.2s;
  31.     -o-transition:ease-out 0.2s;
  32.     transition:ease-out 0.2s;
  33. }
  34. .link .icon:hover{
  35.     -webkit-transform:rotate(360deg) scale(1.2);
  36.     -moz-transform:rotate(360deg) scale(1.2);
  37.     -ms-transform:rotate(360deg) scale(1.2);
  38.     -o-transform:rotate(360deg) scale(1.2);
  39.     transform:rotate(360deg) scale(1.2);
  40. }
  41. .mission-link .icon{
  42.     background:url(../images/mission.png) no-repeat center 0;
  43. }
  44. .play-link .icon{
  45.     background:url(../images/play.png) no-repeat center 0;
  46. }
  48. .button{
  49.     display:block;
  50.     width:180px;
  51.     height:50px;
  52.     border:2px solid rgba(255,255,255,0.8);
  53.     line-height:50px;
  54.     padding-left:20px;
  55.     -webkit-box-sizing:border-box;
  56.     -moz-box-sizing:border-box;
  57.     -ms-box-sizing:border-box;
  58.     -o-box-sizing:border-box;
  59.     box-sizing:border-box;
  60.     margin:0 auto;
  61.     font-weight:bold;
  62.     font-size:18px;
  63.     text-decoration:none;
  64.     text-transform:uppercase;
  65.     font-family:Arial;
  66.     color:#2DCB70;
  67.     background:url(../images/allow.png) no-repeat 130px center;
  68.     -webkit-transition:ease 0.4s;
  69.     -moz-transition:ease 0.4s;
  70.     -ms-transition:ease 0.4s;
  71.     -o-transition:ease 0.4s;
  72.     transition:ease 0.4s;
  73.     position:relative;
  74. }
  75. .button:hover{
  76.     border:2px solid #fff;
  77.     background-position:140px center;
  78. }
  79. .button .line{
  80.     position:absolute;
  81.     background:none; 
  82.     -webkit-transition:ease 0.4s;
  83.     -moz-transition:ease 0.4s;
  84.     -ms-transition:ease 0.4s;
  85.     -o-transition:ease 0.4s;
  86.     transition:ease 0.4s;
  87. }
  88. .button:hover .line{
  89.     background:#fff;
  90. }
  91. .button .line-top{
  92.     width:0px;
  93.     height:2px;
  94.     left:-110%;
  95.     top:-2px;
  96. }
  97. .button:hover .line-top{
  98.     width:180px;
  99.     left:-2px;
  100. }
  101. .button .line-right{
  102.     width:2px;
  103.     height:0px;
  104.     right:-2px;
  105.     top:-110%;
  106. }
  107. .button:hover .line-right{
  108.     height:50px;
  109.     top:-2px;
  110. }
  111. .button .line-bottom{
  112.     width:2px;
  113.     height:0px;
  114.     left:-2px;
  115.     bottom:-110%;
  116. }
  117. .button:hover .line-bottom{
  118.     height:50px;
  119.     bottom:-2px;
  120. }
  121. .button .line-left{
  122.     width:0px;
  123.     height:2px;
  124.     right:-110%;
  125.     bottom:-2px;
  126. }
  127. .button:hover .line-left{
  128.     width:180px;
  129.     right:-2px;
  130. }
  132. .box .tip{
  133.     position:absolute;
  134.     padding:0px 14px;
  135.     height:35px;
  136.     line-height:35px;
  137.     background:#2DCB70;
  138.     color:#fff;
  139.     top:160px;
  140.     font-size:16px;
  141.     font-weight:normal;
  142.     text-transform:none;
  143.     margin:0 auto;
  144.     opacity:0;
  145.     -webkit-border-radius:3px;
  146.     -moz-border-radius:3px;
  147.     -ms-border-radius:3px;
  148.     -o-border-radius:3px;
  149.     border-radius:3px;
  150. }
  151. .tip em{
  152.     font-style:normal;
  153. }
  154. .tip span{
  155.     position:absolute;
  156.     width:0;
  157.     height:0;
  158.     overflow:hidden;
  159.     border:7px solid transparent;
  160.     border-top-color:#2DCB70;
  161.     left:50%;
  162.     margin-left:-3px;
  163.     bottom:-14px;
  164. }

jQuery部分

  1. $(function(){
  2. 	$('.link .button').hover(
  3. 		function(){
  4. 			var title = $(this).attr('data-title');
  5. 			$('.tip em').text(title);
  6. 			var pos = $(this).offset().left,
  7. 				dis = ($('.tip').outerWidth()-$(this).outerWidth())/2,
  8. 				l = pos - dis;
  9. 			$('.tip').css({'left':l+'px'}).animate({'top':180,'opacity':1},300);
  10. 		},
  11. 		function(){
  12. 			$('.tip').stop(true,true).animate({'top':160,'opacity':0},300);
  13.         }
  14.     )
  15. })

二、气泡按钮CSS3方法

HTML部分

  1. <div class="nav">
  2.     <ul>
  3.         <li>
  4.             <a class="tooltip tooltip-effect-1" href="#">
  5.                 Home
  6.                 <span class="tooltip-content">
  7.                     <i class="fa fa-fw fa-home"></i>
  8.                 </span>
  9.             </a>
  10.         </li>
  11.         <li>
  12.             <a class="tooltip tooltip-effect-2" href="#">
  13.                 About me
  14.                 <span class="tooltip-content">
  15.                     <i class="fa fa-fw fa-user"></i>
  16.                 </span>
  17.             </a>
  18.         </li>
  19.         <li>
  20.             <a class="tooltip tooltip-effect-3" href="#">
  21.                 Photography
  22.                 <span class="tooltip-content">
  23.                     <i class="fa fa-fw fa-camera-retro"></i>
  24.                 </span>
  25.             </a>
  26.         </li>
  27.         <li>
  28.             <a class="tooltip tooltip-effect-4" href="#">
  29.                 Work
  30.                 <span class="tooltip-content">
  31.                     <i class="fa fa-fw fa-briefcase"></i>
  32.                 </span>
  33.             </a>
  34.         </li>
  35.         <li>
  36.             <a class="tooltip tooltip-effect-5" href="#">
  37.                 Contact
  38.                 <span class="tooltip-content">
  39.                     <i class="fa fa-fw fa-envelope"></i>
  40.                 </span>
  41.             </a>
  42.         </li>
  43.     </ul>
  44. </div>

CSS部分

  1. /* Global */
  2. html{
  3.     width:100%;
  4.     height:100%;
  5.     -ms-text-size-adjust:none;
  6.     -webkit-text-size-adjust:none;
  7.     -moz-text-size-adjust:none;
  8.     -o-text-size-adjust:none;
  9.     /* 屏幕旋转时文字大小不变 */
  10. }
  11. body{
  12.     margin:0;
  13.     padding:0;
  14.     width:100%;
  15.     height:100%;
  16.     background:#47c9af;;
  17.     color:#74777b;
  18.     font-weight:500;
  19.     font-size:1em;
  20.     font-family:'Raleway', Arial, sans-serif;
  21. }
  22. ul{
  23.     list-style:none;
  24.     padding:0;
  25.     margin:0;
  26. }
  27. a:link,
  28. a:visited{
  29.     text-decoration:none;
  30.     outline:none;
  31. }
  32. *, 
  33. *:after, 
  34. *:before{
  35.     -webkit-box-sizing: border-box;
  36.     -moz-box-sizing: border-box;
  37.     -o-box-sizing: border-box;
  38.     box-sizing: border-box; 
  39. }
  40. .clearfix:before,
  41. .clearfix:after{ 
  42.     content: ''; 
  43.     display:block;
  44. }
  45. .clearfix:after { 
  46.     clear: both; 
  47. }
  49. /* Navigator */
  50. .nav{
  51.     width:820px;
  52.     height:300px;
  53.     margin:200px auto 0 auto;
  54.     font-weight:300;
  55. }
  57. .nav ul li {
  58.     display: inline-block;
  59.     position: relative;
  60.     margin: 0 1em;
  61.     font-size: 1.5em;
  62. }
  64. .nav ul li a {
  65.     display: inline-block;
  66.     font-weight: 700;
  67.     padding: 0.15em 0.25em 0;
  68.     color:rgba(0,0,0,0.3);
  69.     -webkit-transition: color 0.3s;
  70.     -moz-transition: color 0.3s;
  71.     -o-transition: color 0.3s;
  72.     transition:color 0.3s;
  73. }
  75. .nav a:hover,.nav a:focus{color:#fff;}
  77. /* Tooltip */
  78. .tooltip {
  79.     display: inline;
  80.     position: relative;
  81.     z-index: 999;
  82. }
  84. .tooltip-content {
  85.     position: absolute;
  86.     z-index: 9999;
  87.     width: 80px;
  88.     height: 80px;
  89.     padding-top: 25px;
  90.     left: 50%;
  91.     margin-left: -40px;
  92.     bottom: 100%;
  93.     border-radius: 50%;
  94.     text-align: center;
  95.     background: #fff;
  96.     color: #47c9af;
  97.     opacity: 0;
  98.     margin-bottom: 20px;
  99.     cursor: default;
  100.     pointer-events: none;
  101. }
  103. .tooltip-content i {
  104.     opacity: 0;
  105. }
  107. .tooltip:hover .tooltip-content,
  108. .tooltip:hover .tooltip-content i {
  109.     pointer-events: auto;
  110.     -webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
  111.     transform: translate3d(0,0,0) scale3d(1,1,1);
  112.     opacity: 1;
  113. }
  116. .tooltip-effect-1 .tooltip-content {
  117.     -webkit-transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
  118.     transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
  119.     -webkit-transform-origin: 50% 100%;
  120.     transform-origin: 50% 100%;
  121.     -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  122.     transition: opacity 0.3s, transform 0.3s;
  123. }
  125. .tooltip-effect-1 .tooltip-content i {
  126.     -webkit-transform: scale3d(0,0,1);
  127.     transform: scale3d(0,0,1);
  128.     -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  129.     transition: opacity 0.3s, transform 0.3s;
  130. }
  132. .tooltip-effect-2 .tooltip-content {
  133.     -webkit-transform: translate3d(0,10px,0);
  134.     transform: translate3d(0,10px,0);
  135.     -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  136.     transition: opacity 0.3s, transform 0.3s;
  137. }
  139. .tooltip-effect-2 .tooltip-content i {
  140.     -webkit-transform: translate3d(0,15px,0);
  141.     transform: translate3d(0,15px,0);
  142.     -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  143.     transition: opacity 0.3s, transform 0.3s;
  144. }
  146. .tooltip-effect-3 .tooltip-content {
  147.     -webkit-transform: translate3d(0,10px,0) rotate3d(0,1,0,90deg);
  148.     transform: translate3d(0,10px,0) rotate3d(0,1,0,90deg);
  149.     -webkit-transform-origin: 50% 100%;
  150.     transform-origin: 50% 100%;
  151.     -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  152.     transition: opacity 0.3s, transform 0.3s;
  153. }
  155. .tooltip-effect-3 .tooltip-content i {
  156.     -webkit-transform: scale3d(0,0,1);
  157.     transform: scale3d(0,0,1);
  158.     -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  159.     transition: opacity 0.3s, transform 0.3s;
  160. }
  162. .tooltip-effect-4 .tooltip-content {
  163.     -webkit-transform: translate3d(0,-20px,0);
  164.     transform: translate3d(0,-20px,0);
  165.     -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  166.     transition: opacity 0.3s, transform 0.3s;
  167. }
  169. .tooltip-effect-4 .tooltip-content i {
  170.     -webkit-transform: translate3d(0,20px,0);
  171.     transform: translate3d(0,20px,0);
  172.     -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  173.     transition: opacity 0.3s, transform 0.3s;
  174. }
  176. .tooltip-effect-5 .tooltip-content {
  177.     -webkit-transform: scale3d(0,0,1);
  178.     transform: scale3d(0,0,1);
  179.     -webkit-transform-origin: 50% 100%;
  180.     transform-origin: 50% 100%;
  181.     -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  182.     transition: opacity 0.3s, transform 0.3s;
  183. }
  185. .tooltip-effect-5 .tooltip-content i {
  186.     -webkit-transform: translate3d(0,20px,0);
  187.     transform: translate3d(0,20px,0);
  188.     -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  189.     transition: opacity 0.3s, transform 0.3s;
  190. }
  192. /* Arrow */
  193. .tooltip-content::after {
  194.     content: '';
  195.     position: absolute;
  196.     top: 100%;
  197.     left: 50%;
  198.     margin: -7px 0 0 -15px;
  199.     width: 30px;
  200.     height: 20px;
  201.     background: url(../img/tooltip1.svg) no-repeat center center;
  202.     background-size: 100%;
  203. }

三、气泡按钮JS方法

HTML部分

  1. <div id="demo">
  2.     <h2>原生JavaScript实现ToolTip效果</h2>
  3.     <p>ToolTip效果是非常常见的网页特效，它可以在用户将指针放置在控件上时为用户显示提示信息。
  4.         比如简称文字显示一行文字全称，例：<a class="tooltip" id="tooltip1">中国</a>， <a class="tooltip" id="tooltip2">NBA</a>。
  5.         又比如显示一段文字，例：唐诗三百首中的<a class="tooltip" id="tooltip3">春晓</a>你会么？如果不看tooltip提示你背不出来的话，那么你
  6.         可要加油了。
  7.     </p>
  8.     <p>
  9.         ToolTip效果还可以用来显示图片，例：<a class="tooltip" id="tooltip4">西湖美景</a>。当然显示一块儿带格式的内容也不在话下，例：
  10.         <a class="tooltip" id="tooltip5">我的资料</a>。
  11.     </p>
  12.     <p>
  13.         甚至你可以显示一整个网站：例：<a class="tooltip" id="tooltip6">慕课网</a>。
  14.     </p>
  15.     <p>
  16.         注意好的ToolTip需要考虑样式、效果、页面的边界等信息，希望你可以做出更漂亮的ToolTip效果。
  17.     </p>
  18. </div>

CSS部分

  1. body{
  2.     font-size:14px;
  3.     line-height:1.8;
  4.     background:url("bg.jpg") no-repeat center top;
  5.     font-family:"Microsoft YaHei", "微软雅黑";
  6. }
  8. #demo{
  9.     width:500px;
  10.     margin:30px auto;
  11.     padding: 20px 30px;
  12.     position:relative;
  13.     background-color:#fff;
  14.     border-radius:10px;
  15.     -moz-border-radius:10px;
  16.     -webkit-border-radius:10px;
  17.     box-shadow:0px 0px 0px 10px rgba(0,0,0, 0.2);
  18.     -moz-box-shadow:0px 0px 0px 10px rgba(0,0,0, 0.2);
  19.     -webkit-box-shadow:0px 0px 0px 10px rgba(0,0,0, 0.2);
  20. }
  22. #demo h2{
  23.     color: #03F;
  24. }
  26. #demo .tooltip{
  27.     color:#03F;
  28.     cursor:help;
  29. }
  31. .tooltip-box{
  32.     display:block;
  33.     background:#fff;
  34.     line-height:1.6;
  35.     border:1px solid #66CCFF;
  36.     color:#333;
  37.     padding:20px;
  38.     font-size:12px;
  39.     border-radius:5px;
  40.     -moz-border-radius:5px;
  41.     -webkit-border-radius:5px;
  42.     overflow:auto;
  43. }
  45. #mycard img {
  46.     float: left;
  47.     width: 100px;
  48.     height: 100px;
  49.     padding: 10px;
  50. }
  52. #mycard p {
  53.     float: left;
  54.     width: 150px;
  55.     padding: 0 10px;
  56. }

JS部分

  1. function addEvent(element, event, callbackFunction) {
  2.     if (element.addEventListener) {
  3.         element.addEventListener(event, callbackFunction, false);
  4.     } else if (element.attachEvent) {
  5.         element.attachEvent('on' + event, callbackFunction);
  6.     }
  7. }
  9. var toolTipBoxClass = "tooltip-box";
  11. var isIE = navigator.userAgent.indexOf("MSIE") > -1;
  13. var getEl = function(id){ 
  14.     return document.getElementById(id);
  15. }
  17. var demo = getEl("demo");
  19. //obj - ToolTip 超链接元素
  20. //id - ToolTip提示框id
  21. //html - ToolTip提示框HTML
  22. //width - ToolTip提示框宽度（可选）
  23. //height - ToolTip提示框高度（可选）
  24. function showToolTip(obj, id, html, width, height){
  25.     if(getEl(id)==null){ 
  26.         //创建 <div class="tooltip-box" id="xx">xxxxxx</div>
  27.         var toolTipBox;
  28.         toolTipBox = document.createElement("div");
  29.         toolTipBox.className = toolTipBoxClass;
  30.         toolTipBox.id = id;
  31.         toolTipBox.innerHTML = html;
  32.         obj.appendChild(toolTipBox);
  34.         toolTipBox.style.width = width? width+"px":"auto";
  35.         toolTipBox.style.height = height? height+"px":"auto";
  37.         if(!width && isIE){ 
  38.             toolTipBox.style.width = toolTipBox.offsetWidth;
  39.         }
  41.         toolTipBox.style.position = "absolute";
  42.         toolTipBox.style.display = "block";
  44.         var left = obj.offsetLeft;
  45.         var top = obj.offsetTop + 20;
  47.         //left，不让ToolTip提示框超出浏览器
  48.         if(left + toolTipBox.offsetWidth > document.body.clientWidth){ 
  49.             var demoLeft = demo.offsetLeft;
  50.             left = document.body.clientWidth - toolTipBox.offsetWidth - demoLeft;
  51.             if (left < 0) {left = 0};
  52.         }
  54.         toolTipBox.style.left = left + "px";
  55.         toolTipBox.style.top = top + "px";
  57.         addEvent(obj,"mouseleave", function(){
  58.             setTimeout(function(){
  59.                 getEl(id).style.display = "none";
  60.             }, 300);
  61.         });
  62.     }
  63.     else{ 
  64.         //显示
  65.         getEl(id).style.display = "block";
  66.     }   
  67. }
  69. addEvent(demo, "mouseover", function(e){
  70.     var event = e || window.event; 
  71.     var target = event.target || event.srcElement;
  73.     if(target.className == "tooltip"){ 
  74.         var _html;
  75.         var _id;
  76.         var _width = 200;
  78.         switch (target.id) {
  79.             case "tooltip1":
  80.                 _id = "t1";
  81.                 _html = "中华人民共和国";
  82.                 break;
  83.             case "tooltip2":
  84.                 _id = "t2";
  85.                 _html = "美国篮球职业联赛";
  86.                 break;
  87.             case "tooltip3":
  88.                 _id = "t3";
  89.                 _html = "<h2>春晓</h2><p>春眠不觉晓，</p><p>处处闻啼鸟。</p><p>夜来风雨声，</p><p>花落知多少。</p>";
  90.                 _width = 100;
  91.                 break;
  92.             case "tooltip4":
  93.                 _id = "t4";
  94.                 _html = '<img src="1.jpg" width="500" />';
  95.                 _width = 520;
  96.                 break;
  97.             case "tooltip5":
  98.                 _id = "t5";
  99.                 _html = '<div id="mycard"><img src="2.jpg" alt=""/><p><strong>昵称一定要长</strong></p><p>我的简介我的简介</p></div>';
  100.                 _width = 300;
  101.                 break;
  102.             case "tooltip6":
  103.                 _id = "t6";
  104.                 _html = '<iframe src="http://www.imooc.com/" width="480" height="300"></iframe>';
  105.                 _width = 500;
  106.                 break;
  107.             default:
  108.                 return false;
  109.         }
  111.         showToolTip(target, _id, _html, _width);
  112.     }
  113. });

附：参考

慕课：按钮特效
慕课：CSS3实现漂亮ToolTips效果
慕课：Tooltip浮动提示框效果
附件：幽灵按钮
附件：CSS3实现Tooltip
附件：JS实现Tooltip

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注