jquery顶支持投票按钮js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery顶支持投票按钮js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery顶/支持/投票按钮</title>
<style type="text/css">
.votecard {
	background: url(images/sprite.png) no-repeat 0 0;
	padding: 4px;
	width: 63px;
	height: 43px;
	text-align: center;
}

.votecard div {
	position: relative;
	overflow: hidden;
	width: 63px;
	height: 43px;
}

.votecard em {
	display: block;
	position: relative;
	width: 63px;
	height: 33px;
	padding: 6px 0 6px 0;
	font: normal 24px/24px "Helvetica Neue","Helvetica","Arial",Sans-serif;
	color: #45453f;
}
.votecard strong {
	font-weight: bold;
}
.votecard span {
	font-size: 10px;
	line-height: 10px;
	display: block;
	color: #9a9a94;
}
a.voteaction {
	margin: 0 0 0 3px;
	display: block;
	text-indent: -9999px;
	width: 71px;
	height: 21px;
	background: url(images/sprite.png) no-repeat -3px -75px;
}
a.voteaction:hover {
	outline: none;
	background-position: -3px -54px;
}
a.voted,
a.voted:hover {
	outline: none;
	background-position: -3px -96px;
	cursor: default;
}

</style>
	
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	/* create a node for the flip-to number */
	$(".votecard em").clone().appendTo(".votecard div");
	/* increment that by 1 */
	var node = $(".votecard em:last strong")
	node.text(parseInt(node.text())+1);
	
	
	function flip(obj) {
		obj.prev().find("em").animate({
			top: '-=45'
		}, 200);
		obj.toggleClass("voted",true);
	}
	
	$('.voteaction').bind({
	  click: function(event) {
	    event.preventDefault()
	  },
	  mouseup: function() {
	    flip($(this));
		$(this).unbind('mouseup');
	  }
	});
	
});
</script>
	

	
</head>
<body>
<center><br>
	<div class="votecard">
		<div>
			<em><strong>293</strong><span>Flips</span></em>
		</div>
	</div>
	<a class="voteaction" href="">Flippit</a>
</center>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)