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

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

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. }
  48. /* Navigator */
  49. .nav{
  50. width:820px;
  51. height:300px;
  52. margin:200px auto 0 auto;
  53. font-weight:300;
  54. }
  55. .nav ul li {
  56. display: inline-block;
  57. position: relative;
  58. margin: 0 1em;
  59. font-size: 1.5em;
  60. }
  61. .nav ul li a {
  62. display: inline-block;
  63. font-weight: 700;
  64. padding: 0.15em 0.25em 0;
  65. color:rgba(0,0,0,0.3);
  66. -webkit-transition: color 0.3s;
  67. -moz-transition: color 0.3s;
  68. -o-transition: color 0.3s;
  69. transition:color 0.3s;
  70. }
  71. .nav a:hover,.nav a:focus{color:#fff;}
  72. /* Tooltip */
  73. .tooltip {
  74. display: inline;
  75. position: relative;
  76. z-index: 999;
  77. }
  78. .tooltip-content {
  79. position: absolute;
  80. z-index: 9999;
  81. width: 80px;
  82. height: 80px;
  83. padding-top: 25px;
  84. left: 50%;
  85. margin-left: -40px;
  86. bottom: 100%;
  87. border-radius: 50%;
  88. text-align: center;
  89. background: #fff;
  90. color: #47c9af;
  91. opacity: 0;
  92. margin-bottom: 20px;
  93. cursor: default;
  94. pointer-events: none;
  95. }
  96. .tooltip-content i {
  97. opacity: 0;
  98. }
  99. .tooltip:hover .tooltip-content,
  100. .tooltip:hover .tooltip-content i {
  101. pointer-events: auto;
  102. -webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
  103. transform: translate3d(0,0,0) scale3d(1,1,1);
  104. opacity: 1;
  105. }
  106. .tooltip-effect-1 .tooltip-content {
  107. -webkit-transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
  108. transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
  109. -webkit-transform-origin: 50% 100%;
  110. transform-origin: 50% 100%;
  111. -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  112. transition: opacity 0.3s, transform 0.3s;
  113. }
  114. .tooltip-effect-1 .tooltip-content i {
  115. -webkit-transform: scale3d(0,0,1);
  116. transform: scale3d(0,0,1);
  117. -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  118. transition: opacity 0.3s, transform 0.3s;
  119. }
  120. .tooltip-effect-2 .tooltip-content {
  121. -webkit-transform: translate3d(0,10px,0);
  122. transform: translate3d(0,10px,0);
  123. -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  124. transition: opacity 0.3s, transform 0.3s;
  125. }
  126. .tooltip-effect-2 .tooltip-content i {
  127. -webkit-transform: translate3d(0,15px,0);
  128. transform: translate3d(0,15px,0);
  129. -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  130. transition: opacity 0.3s, transform 0.3s;
  131. }
  132. .tooltip-effect-3 .tooltip-content {
  133. -webkit-transform: translate3d(0,10px,0) rotate3d(0,1,0,90deg);
  134. transform: translate3d(0,10px,0) rotate3d(0,1,0,90deg);
  135. -webkit-transform-origin: 50% 100%;
  136. transform-origin: 50% 100%;
  137. -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  138. transition: opacity 0.3s, transform 0.3s;
  139. }
  140. .tooltip-effect-3 .tooltip-content i {
  141. -webkit-transform: scale3d(0,0,1);
  142. transform: scale3d(0,0,1);
  143. -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  144. transition: opacity 0.3s, transform 0.3s;
  145. }
  146. .tooltip-effect-4 .tooltip-content {
  147. -webkit-transform: translate3d(0,-20px,0);
  148. transform: translate3d(0,-20px,0);
  149. -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  150. transition: opacity 0.3s, transform 0.3s;
  151. }
  152. .tooltip-effect-4 .tooltip-content i {
  153. -webkit-transform: translate3d(0,20px,0);
  154. transform: translate3d(0,20px,0);
  155. -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  156. transition: opacity 0.3s, transform 0.3s;
  157. }
  158. .tooltip-effect-5 .tooltip-content {
  159. -webkit-transform: scale3d(0,0,1);
  160. transform: scale3d(0,0,1);
  161. -webkit-transform-origin: 50% 100%;
  162. transform-origin: 50% 100%;
  163. -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  164. transition: opacity 0.3s, transform 0.3s;
  165. }
  166. .tooltip-effect-5 .tooltip-content i {
  167. -webkit-transform: translate3d(0,20px,0);
  168. transform: translate3d(0,20px,0);
  169. -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  170. transition: opacity 0.3s, transform 0.3s;
  171. }
  172. /* Arrow */
  173. .tooltip-content::after {
  174. content: '';
  175. position: absolute;
  176. top: 100%;
  177. left: 50%;
  178. margin: -7px 0 0 -15px;
  179. width: 30px;
  180. height: 20px;
  181. background: url(../img/tooltip1.svg) no-repeat center center;
  182. background-size: 100%;
  183. }

三、气泡按钮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. }
  7. #demo{
  8. width:500px;
  9. margin:30px auto;
  10. padding: 20px 30px;
  11. position:relative;
  12. background-color:#fff;
  13. border-radius:10px;
  14. -moz-border-radius:10px;
  15. -webkit-border-radius:10px;
  16. box-shadow:0px 0px 0px 10px rgba(0,0,0, 0.2);
  17. -moz-box-shadow:0px 0px 0px 10px rgba(0,0,0, 0.2);
  18. -webkit-box-shadow:0px 0px 0px 10px rgba(0,0,0, 0.2);
  19. }
  20. #demo h2{
  21. color: #03F;
  22. }
  23. #demo .tooltip{
  24. color:#03F;
  25. cursor:help;
  26. }
  27. .tooltip-box{
  28. display:block;
  29. background:#fff;
  30. line-height:1.6;
  31. border:1px solid #66CCFF;
  32. color:#333;
  33. padding:20px;
  34. font-size:12px;
  35. border-radius:5px;
  36. -moz-border-radius:5px;
  37. -webkit-border-radius:5px;
  38. overflow:auto;
  39. }
  40. #mycard img {
  41. float: left;
  42. width: 100px;
  43. height: 100px;
  44. padding: 10px;
  45. }
  46. #mycard p {
  47. float: left;
  48. width: 150px;
  49. padding: 0 10px;
  50. }

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

附:参考

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

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