@EncyKe
2016-01-21T08:43:35.000000Z
字数 11909
阅读 2497
前端
JavaScript
<div class="box">
<div class="link mission-link">
<span class="icon animated"></span>
<a class="button" data-title="My mission is clear">
<span class="line line-top"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
<span class="line line-left"></span>
Mission
</a>
</div>
<div class="link play-link">
<span class="icon animated"></span>
<a class="button" data-title="This is my playground">
<span class="line line-top"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
<span class="line line-left"></span>
Play
</a>
</div>
<!-- 添加提示气泡,通过jQuery追加到各自按钮上方 -->
<p class="tip"><em></em><span></span></p>
</div>
*{
margin:0;
padding:0;
}
body{
background:#333;
}
.box{
width:800px;
height:280px;
margin:50px auto;
overflow:hidden;
}
.box .link{
display:inline-block;
width:205px;
height:220px;
margin:0 20px;
position:relative;
}
.link .icon{
display:block;
width:100%;
height:180px;
-webkit-transition:ease-out 0.2s;
-moz-transition:ease-out 0.2s;
-ms-transition:ease-out 0.2s;
-o-transition:ease-out 0.2s;
transition:ease-out 0.2s;
}
.link .icon:hover{
-webkit-transform:rotate(360deg) scale(1.2);
-moz-transform:rotate(360deg) scale(1.2);
-ms-transform:rotate(360deg) scale(1.2);
-o-transform:rotate(360deg) scale(1.2);
transform:rotate(360deg) scale(1.2);
}
.mission-link .icon{
background:url(../images/mission.png) no-repeat center 0;
}
.play-link .icon{
background:url(../images/play.png) no-repeat center 0;
}
.button{
display:block;
width:180px;
height:50px;
border:2px solid rgba(255,255,255,0.8);
line-height:50px;
padding-left:20px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
margin:0 auto;
font-weight:bold;
font-size:18px;
text-decoration:none;
text-transform:uppercase;
font-family:Arial;
color:#2DCB70;
background:url(../images/allow.png) no-repeat 130px center;
-webkit-transition:ease 0.4s;
-moz-transition:ease 0.4s;
-ms-transition:ease 0.4s;
-o-transition:ease 0.4s;
transition:ease 0.4s;
position:relative;
}
.button:hover{
border:2px solid #fff;
background-position:140px center;
}
.button .line{
position:absolute;
background:none;
-webkit-transition:ease 0.4s;
-moz-transition:ease 0.4s;
-ms-transition:ease 0.4s;
-o-transition:ease 0.4s;
transition:ease 0.4s;
}
.button:hover .line{
background:#fff;
}
.button .line-top{
width:0px;
height:2px;
left:-110%;
top:-2px;
}
.button:hover .line-top{
width:180px;
left:-2px;
}
.button .line-right{
width:2px;
height:0px;
right:-2px;
top:-110%;
}
.button:hover .line-right{
height:50px;
top:-2px;
}
.button .line-bottom{
width:2px;
height:0px;
left:-2px;
bottom:-110%;
}
.button:hover .line-bottom{
height:50px;
bottom:-2px;
}
.button .line-left{
width:0px;
height:2px;
right:-110%;
bottom:-2px;
}
.button:hover .line-left{
width:180px;
right:-2px;
}
.box .tip{
position:absolute;
padding:0px 14px;
height:35px;
line-height:35px;
background:#2DCB70;
color:#fff;
top:160px;
font-size:16px;
font-weight:normal;
text-transform:none;
margin:0 auto;
opacity:0;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
}
.tip em{
font-style:normal;
}
.tip span{
position:absolute;
width:0;
height:0;
overflow:hidden;
border:7px solid transparent;
border-top-color:#2DCB70;
left:50%;
margin-left:-3px;
bottom:-14px;
}
$(function(){
$('.link .button').hover(
function(){
var title = $(this).attr('data-title');
$('.tip em').text(title);
var pos = $(this).offset().left,
dis = ($('.tip').outerWidth()-$(this).outerWidth())/2,
l = pos - dis;
$('.tip').css({'left':l+'px'}).animate({'top':180,'opacity':1},300);
},
function(){
$('.tip').stop(true,true).animate({'top':160,'opacity':0},300);
}
)
})
<div class="nav">
<ul>
<li>
<a class="tooltip tooltip-effect-1" href="#">
Home
<span class="tooltip-content">
<i class="fa fa-fw fa-home"></i>
</span>
</a>
</li>
<li>
<a class="tooltip tooltip-effect-2" href="#">
About me
<span class="tooltip-content">
<i class="fa fa-fw fa-user"></i>
</span>
</a>
</li>
<li>
<a class="tooltip tooltip-effect-3" href="#">
Photography
<span class="tooltip-content">
<i class="fa fa-fw fa-camera-retro"></i>
</span>
</a>
</li>
<li>
<a class="tooltip tooltip-effect-4" href="#">
Work
<span class="tooltip-content">
<i class="fa fa-fw fa-briefcase"></i>
</span>
</a>
</li>
<li>
<a class="tooltip tooltip-effect-5" href="#">
Contact
<span class="tooltip-content">
<i class="fa fa-fw fa-envelope"></i>
</span>
</a>
</li>
</ul>
</div>
/* Global */
html{
width:100%;
height:100%;
-ms-text-size-adjust:none;
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-o-text-size-adjust:none;
/* 屏幕旋转时文字大小不变 */
}
body{
margin:0;
padding:0;
width:100%;
height:100%;
background:#47c9af;;
color:#74777b;
font-weight:500;
font-size:1em;
font-family:'Raleway', Arial, sans-serif;
}
ul{
list-style:none;
padding:0;
margin:0;
}
a:link,
a:visited{
text-decoration:none;
outline:none;
}
*,
*:after,
*:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after{
content: '';
display:block;
}
.clearfix:after {
clear: both;
}
/* Navigator */
.nav{
width:820px;
height:300px;
margin:200px auto 0 auto;
font-weight:300;
}
.nav ul li {
display: inline-block;
position: relative;
margin: 0 1em;
font-size: 1.5em;
}
.nav ul li a {
display: inline-block;
font-weight: 700;
padding: 0.15em 0.25em 0;
color:rgba(0,0,0,0.3);
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
transition:color 0.3s;
}
.nav a:hover,.nav a:focus{color:#fff;}
/* Tooltip */
.tooltip {
display: inline;
position: relative;
z-index: 999;
}
.tooltip-content {
position: absolute;
z-index: 9999;
width: 80px;
height: 80px;
padding-top: 25px;
left: 50%;
margin-left: -40px;
bottom: 100%;
border-radius: 50%;
text-align: center;
background: #fff;
color: #47c9af;
opacity: 0;
margin-bottom: 20px;
cursor: default;
pointer-events: none;
}
.tooltip-content i {
opacity: 0;
}
.tooltip:hover .tooltip-content,
.tooltip:hover .tooltip-content i {
pointer-events: auto;
-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
transform: translate3d(0,0,0) scale3d(1,1,1);
opacity: 1;
}
.tooltip-effect-1 .tooltip-content {
-webkit-transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-1 .tooltip-content i {
-webkit-transform: scale3d(0,0,1);
transform: scale3d(0,0,1);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-2 .tooltip-content {
-webkit-transform: translate3d(0,10px,0);
transform: translate3d(0,10px,0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-2 .tooltip-content i {
-webkit-transform: translate3d(0,15px,0);
transform: translate3d(0,15px,0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-3 .tooltip-content {
-webkit-transform: translate3d(0,10px,0) rotate3d(0,1,0,90deg);
transform: translate3d(0,10px,0) rotate3d(0,1,0,90deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-3 .tooltip-content i {
-webkit-transform: scale3d(0,0,1);
transform: scale3d(0,0,1);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-4 .tooltip-content {
-webkit-transform: translate3d(0,-20px,0);
transform: translate3d(0,-20px,0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-4 .tooltip-content i {
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-5 .tooltip-content {
-webkit-transform: scale3d(0,0,1);
transform: scale3d(0,0,1);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-5 .tooltip-content i {
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
/* Arrow */
.tooltip-content::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin: -7px 0 0 -15px;
width: 30px;
height: 20px;
background: url(../img/tooltip1.svg) no-repeat center center;
background-size: 100%;
}
<div id="demo">
<h2>原生JavaScript实现ToolTip效果</h2>
<p>ToolTip效果是非常常见的网页特效,它可以在用户将指针放置在控件上时为用户显示提示信息。
比如简称文字显示一行文字全称,例:<a class="tooltip" id="tooltip1">中国</a>, <a class="tooltip" id="tooltip2">NBA</a>。
又比如显示一段文字,例:唐诗三百首中的<a class="tooltip" id="tooltip3">春晓</a>你会么?如果不看tooltip提示你背不出来的话,那么你
可要加油了。
</p>
<p>
ToolTip效果还可以用来显示图片,例:<a class="tooltip" id="tooltip4">西湖美景</a>。当然显示一块儿带格式的内容也不在话下,例:
<a class="tooltip" id="tooltip5">我的资料</a>。
</p>
<p>
甚至你可以显示一整个网站:例:<a class="tooltip" id="tooltip6">慕课网</a>。
</p>
<p>
注意好的ToolTip需要考虑样式、效果、页面的边界等信息,希望你可以做出更漂亮的ToolTip效果。
</p>
</div>
body{
font-size:14px;
line-height:1.8;
background:url("bg.jpg") no-repeat center top;
font-family:"Microsoft YaHei", "微软雅黑";
}
#demo{
width:500px;
margin:30px auto;
padding: 20px 30px;
position:relative;
background-color:#fff;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0px 0px 0px 10px rgba(0,0,0, 0.2);
-moz-box-shadow:0px 0px 0px 10px rgba(0,0,0, 0.2);
-webkit-box-shadow:0px 0px 0px 10px rgba(0,0,0, 0.2);
}
#demo h2{
color: #03F;
}
#demo .tooltip{
color:#03F;
cursor:help;
}
.tooltip-box{
display:block;
background:#fff;
line-height:1.6;
border:1px solid #66CCFF;
color:#333;
padding:20px;
font-size:12px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
overflow:auto;
}
#mycard img {
float: left;
width: 100px;
height: 100px;
padding: 10px;
}
#mycard p {
float: left;
width: 150px;
padding: 0 10px;
}
function addEvent(element, event, callbackFunction) {
if (element.addEventListener) {
element.addEventListener(event, callbackFunction, false);
} else if (element.attachEvent) {
element.attachEvent('on' + event, callbackFunction);
}
}
var toolTipBoxClass = "tooltip-box";
var isIE = navigator.userAgent.indexOf("MSIE") > -1;
var getEl = function(id){
return document.getElementById(id);
}
var demo = getEl("demo");
//obj - ToolTip 超链接元素
//id - ToolTip提示框id
//html - ToolTip提示框HTML
//width - ToolTip提示框宽度(可选)
//height - ToolTip提示框高度(可选)
function showToolTip(obj, id, html, width, height){
if(getEl(id)==null){
//创建 <div class="tooltip-box" id="xx">xxxxxx</div>
var toolTipBox;
toolTipBox = document.createElement("div");
toolTipBox.className = toolTipBoxClass;
toolTipBox.id = id;
toolTipBox.innerHTML = html;
obj.appendChild(toolTipBox);
toolTipBox.style.width = width? width+"px":"auto";
toolTipBox.style.height = height? height+"px":"auto";
if(!width && isIE){
toolTipBox.style.width = toolTipBox.offsetWidth;
}
toolTipBox.style.position = "absolute";
toolTipBox.style.display = "block";
var left = obj.offsetLeft;
var top = obj.offsetTop + 20;
//left,不让ToolTip提示框超出浏览器
if(left + toolTipBox.offsetWidth > document.body.clientWidth){
var demoLeft = demo.offsetLeft;
left = document.body.clientWidth - toolTipBox.offsetWidth - demoLeft;
if (left < 0) {left = 0};
}
toolTipBox.style.left = left + "px";
toolTipBox.style.top = top + "px";
addEvent(obj,"mouseleave", function(){
setTimeout(function(){
getEl(id).style.display = "none";
}, 300);
});
}
else{
//显示
getEl(id).style.display = "block";
}
}
addEvent(demo, "mouseover", function(e){
var event = e || window.event;
var target = event.target || event.srcElement;
if(target.className == "tooltip"){
var _html;
var _id;
var _width = 200;
switch (target.id) {
case "tooltip1":
_id = "t1";
_html = "中华人民共和国";
break;
case "tooltip2":
_id = "t2";
_html = "美国篮球职业联赛";
break;
case "tooltip3":
_id = "t3";
_html = "<h2>春晓</h2><p>春眠不觉晓,</p><p>处处闻啼鸟。</p><p>夜来风雨声,</p><p>花落知多少。</p>";
_width = 100;
break;
case "tooltip4":
_id = "t4";
_html = '<img src="1.jpg" width="500" />';
_width = 520;
break;
case "tooltip5":
_id = "t5";
_html = '<div id="mycard"><img src="2.jpg" alt=""/><p><strong>昵称一定要长</strong></p><p>我的简介我的简介</p></div>';
_width = 300;
break;
case "tooltip6":
_id = "t6";
_html = '<iframe src="http://www.imooc.com/" width="480" height="300"></iframe>';
_width = 500;
break;
default:
return false;
}
showToolTip(target, _id, _html, _width);
}
});
慕课:按钮特效
慕课:CSS3实现漂亮ToolTips效果
慕课:Tooltip浮动提示框效果
附件:幽灵按钮
附件:CSS3实现Tooltip
附件:JS实现Tooltip