点击事件后动画提示

<!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  Care健康  阅读(253)  评论(0编辑  收藏  举报
版权
作者:Bober Song

出处:http://bober.cnblogs.com

Care健康:http://www.aicareyou.com

推荐空间:华夏名网

本文首发博客园,版权归作者跟博客园共有。

转载必须保留本段声明,并在页面显著位置给出本文链接,否则保留追究法律责任的权利。