基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码

先给大家展示效果图：

查看演示 下载源码

这是一个非常实用的投票实例，应用在双方观点对抗投票场景。用户可以选择支持代表自己观点的一方进行投票，本文以红蓝双方投票为例，通过前后台交互，直观展示红蓝双方投票数和所占比例，应用非常广泛。

本文是一篇综合知识应用类文章，需要您具备PHP、jQuery、MySQL以及html和css方面的基本知识。

HTML

我们需要在页面中展示红蓝双方的观点，以及对应的投票数和比例，以及用于投票交互的手型图片，本例以#red和#blue分别表示红蓝双方。.redhand和.bluehand用来做手型投票按钮，.redbar和.bluebar展示红蓝双方比例调，#red_num和#blue_num展示双方投票数。

<div class="vote">  <div class="votetitle">您对Helloweba提供的文章的看法？</div>  <div class="votetxt">非常实用<span>完全看不懂</span></div>  <div class="red" id="red">  <div class="redhand"></div>  <div class="redbar" id="red_bar">   <span></span>   <p id="red_num"></p>  </div>  </div>  <div class="blue" id="blue">  <div class="bluehand"></div>  <div class="bluebar" id="blue_bar">   <span></span>   <p id="blue_num"></p>  </div>  </div> </div> 

CSS

使用CSS将页面美化，加载背景图片，确定相对位置等等，你可以直接复制以下代码，在自己的项目中稍作修改即可。

.vote{width:288px; height:220px; margin:60px auto 20px auto;position:relative} .votetitle{width:100%;height:62px; background:url(icon.png) no-repeat 0 30px; font-size:15px} .red{position:absolute; left:0; top:90px; height:80px;} .blue{position:absolute; right:0; top:90px; height:80px;} .votetxt{line-height:24px} .votetxt span{float:right} .redhand{position:absolute; left:0;width:36px; height:36px; background:url(icon.png) no-repeat -1px -38px;cursor:pointer} .bluehand{position:absolute; right:0;width:36px; height:36px; background:url(icon.png) no-repeat -41px -38px;cursor:pointer} .grayhand{width:34px; height:34px; background:url(icon.png) no-repeat -83px -38px;cursor:pointer} .redbar{position:absolute; left:42px; margin-top:8px;} .bluebar{position:absolute; right:42px; margin-top:8px; } .redbar span{display:block; height:6px; background:red; width:100%;border-radius:4px;} .bluebar span{display:block; height:6px; background:#09f; width:100%;border-radius:4px; position:absolute; right:0} .redbar p{line-height:20px; color:red;} .bluebar p{line-height:20px; color:#09f; text-align:right; margin-top:6px}