<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery+CSS3提示框按钮过渡效果 - 网页模板</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('.link .button').hover(function(){
var title=$(this).attr('data-title');
$('.tip em').text(title);
var pos=$(this).offset().left;
var dis=($('.tip').outerWidth()-$(this).outerWidth())/2;
var l=pos-dis;
$('.tip').css({'left':l+'px'}).animate({'top':180,'opacity':1},300);
},function(){
$('.tip').animate({'top':160,'opacity':0},300);
})
})
</script>
</head>
<body>
<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>
<div class="link touch-link">
<span class="icon animated"></span>
<a class="button" data-title="This is my playground demos">
<span class="line line-top"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
<span class="line line-left"></span>
Touch
</a>
</div>
<p class="tip"><em></em><span></span></p>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery+CSS3提示框按钮过渡效果.zip
版权申诉
97 浏览量
2022-11-19
19:46:52
上传
评论
收藏 59KB ZIP 举报
jQuery+CSS3提示框按钮过渡效果.zip （9个子文件） 
jQuery+CSS3提示框按钮过渡效果 jiaoben3079 css 
style.css 3KB images 
return副本.png 389B touch.png 6KB mission.png 6KB Thumbs.db 8KB play.png 7KB allow.png 412B
index.html 2KB js jquery-1.8.3.min.js 91KB资源评论
