jq 「頂」與「踩」代碼分享

頂和踩JQ實現
樣式如下：


js程式碼部分：<script><br />     $(function () {<br />         //滑鼠滑向與離開投票按鈕時，轉換背景樣式<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 />         //點選「頂」時動作方法<br />         $("#dig_up").click(function () {<br />             //兩種方式由其一題<br />             //getdata("{:U('Index/votes',array('action'=>'like'))}",aid);<br />             getdata("/votes/action/like/aid/" + aid);<br />         });<br />         //點選「踩」時動作方法<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樣式依自己的實際狀況調整吧<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 次 )