点击事件后动画提示

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>点击事件后动画提示</title>
<style>
.addhot{ display:none; width:100px; height:30px; line-height:30px;position:absolute; top:-80px; left:30px; padding-top:50px; text-align:center; font-size:20px; font-weight:600; color:#ff0454;}
a.btn_like{background-position:-2px -5px;color:#ffffff;text-shadow:0 -1px 0 rgba(51,51,51,0.35);}
a.btn_like:hover{ background-position:-2px -55px;}
</style>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<head>
<body>
<div style="display:block; width:180px; height:200px; position:absolute; top:200px; right:180px;">
  <div class="addhot"></div>
  <a href="javascript:void(0)" class="btn_like">还不错</a>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
    $(".btn_like").click(function(){
	$(".addhot").slideDown(500).text("积分+10").hide(500);
    });
});
</script>
</body>
</html>

posted @ 2013-08-07 14:08 大力哥的技术阅读(258) 评论(0) 收藏举报

刷新页面返回顶部

四川宋嘉信息技术有限公司

www.songjiasoft.com 四川宋嘉信息技术有限公司，承接网站，微信，app开发！欢迎来电咨询！

点击事件后动画提示

公告