頂和踩JQ實(shí)現(xiàn)
樣式如下：


js程式碼部分：<script><br /> ????$(function?()?{<br /> ????????//滑鼠滑向與離開投票按鈕時(shí)，轉(zhuǎn)換背景樣式<br /> ????????$("#dig_up").hover(function?()?{<br /> ????????????$(this).addClass("digup_on");<br /> ????????},?function?()?{<br /> ????????????$(this).removeClass("digup_on");<br /> ????????});<br /> ????????$("#dig_down").hover(function?()?{<br /> ????????????$(this).addClass("digdown_on");<br /> ????????},?function?()?{<br /> ????????????$(this).removeClass("digdown_on");<br /> ????????});<br /> ????????//?取得文章ID<br /> ????????var?aid?=?"{$article.art_id}";<br /> ????????//初始化資料<br /> ????????getdata("/votes/aid/"?+?aid);<br /> <br /> ????????//點(diǎn)選「頂」時(shí)動(dòng)作方法<br /> ????????$("#dig_up").click(function?()?{<br /> ????????????//兩種方式由其一題<br /> ????????????//getdata("{:U('Index/votes',array('action'=>'like'))}",aid);<br /> ????????????getdata("/votes/action/like/aid/"?+?aid);<br /> ????????});<br /> ????????//點(diǎn)選「踩」時(shí)動(dòng)作方法<br /> ????????$("#dig_down").click(function?()?{<br /> ????????????//兩種方式由其一題<br /> ????????????//getdata("{:U('Index/votes',array('action'=>'unlike'))}",aid);<br /> ????????????getdata("/votes/action/unlike/aid/"?+?aid);<br /> ????????});<br /> ????});<br /> ????function?getdata(url,?aid)?{<br /> ????????$.getJSON(url,?{aid:?aid},?function?(data)?{<br /> ????????????if?(data.success?==?1)?{<br /> ????????????????$("#num_up").html(data.like);<br /> ????????????????$("#bar_up?span").css("width",?data.like_percent);<br /> ????????????????$("#bar_up?i").html(data.like_percent);<br /> ????????????????$("#num_down").html(data.unlike);<br /> ????????????????$("#bar_down?span").css("width",?data.unlike_percent);<br /> ????????????????$("#bar_down?i").html(data.unlike_percent);<br /> ????????????}?else?{<br /> ????????????????$("#msg").html(data.msg).show().css({'opacity':?1,?'top':?'40px'}). ????????????????????top:?'-50px',<br />????????????????????opacity:?0<br /> ????????????????},?"slow");<br /> ????????????}<br /> ????????});<br /> ????}<br /> </script>HTML程式碼部分：
具體CSS樣式依自己的實(shí)際狀況調(diào)整吧<div> <br> ????????????????<div> <br> ????????????????????<span>133</span><br> ????????????????????<p>寫的好，且我為讚！ </p> <br> ????????????????????????????????<div> <span></span><i>68%</i> ????????????????</div> <br> ????????????????<div> <br> ????????????????????<span>42</span><br> ????????????????????<p>太差勁了！ </p> <br> ??????????????????????????而bar"><span></span><i>32%</i> ????????????????</div> <br> ????????????????<div></div> <br> </div> <br>CSS代碼部分：<br>.digg{width:530px;margin:20px?auto;position:relative} #dig_down,#dig_up{width:200px;height:48px;margin:10px;position:relative;border:1px?solid?#d3d3d3;padding-left:42px;cursor:pointerfloat:left;<code class="prettyprint linenums lang-php"> .digup{background:url(../../images/diggs.png)?no-repeat?4px?2px}<br> .digup_on{background:url(../../images/diggs.png)?no-repeat?4px?-49px}<br> .digdown{background:url(../../images/diggs.png)?no-repeat?4px?-102px}<br> .digdown_on{background:url(../../images/diggs.png)?no-repeat?4px?-154px}<br> #num_down,#num_up{position:absolute;right:6px;top:18px;font-size:20px}<br> #dig_up?p{height:24px;line-height:24px;color:#360}<br> #dig_down?p{height:24px;line-height:24px;color:#f30}<br> .bar{width:100px;height:12px;line-height:12px;border:1px?solid?#f0f0f0;position:relative;text-align:center}<br> .bar?span{display:block;height:12px}<br> .bar?i{position:absolute;top:0;left:104px}<br> #bar_up?span{background:#360}<br> #bar_down?span{background:#f60}<br> #msg{position:absolute;right:20px;top:40px;font-size:18px;color:red}<br>diggs.png 圖片jq 「頂」與「踩」代碼分享已上傳 <br> diggs.png

( 2.48 KB 下載：4 次 )