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(&#039;Index/votes&#039;,array(&#039;action&#039;=>&#039;like&#039;))}",aid);<br /> getdata("/votes/action/like/aid/" + aid);<br /> });<br /> //单击“踩”时动作方法<br /> $("#dig_down").click(function () {<br /> //两种方法选其一<br /> //getdata("{:U(&#039;Index/votes&#039;,array(&#039;action&#039;=>&#039;unlike&#039;))}",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({&#039;opacity&#039;: 1, &#039;top&#039;: &#039;40px&#039;}).animate({<br /> top: &#039;-50px&#039;,<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>                 <div> <br>                     <span>42</span><br>                     <p>太差劲了！</p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/xiazai/code/8833"> <img src="https://img.php.cn/upload/webcode/000/000/011/175691340368009.jpg" alt="Modoer多功能点评系统2.5 精华版 Build 20110710 GBK"> </a> <div class="aritcle_card_info"> <a href="/xiazai/code/8833">Modoer多功能点评系统2.5 精华版 Build 20110710 GBK</a> <p>Modoer 是一款以本地分享，多功能的点评网站管理系统。采用 PHP+MYSQL 开发设计，开放全部源代码。因具有非凡的访问速度和卓越的负载能力而深受国内外朋友的喜爱，不局限于商铺类点评，真正实现了多类型的点评，可以让您的网站点评任何事与物，同时增加产品模块，也更好的网站产品在网站上展示。Modoer点评系统 2.5 Build 20110710更新列表1.同步 旗舰版系统框架2.增加 限制图片</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="Modoer多功能点评系统2.5 精华版 Build 20110710 GBK"> <span>0</span> </div> </div> <a href="/xiazai/code/8833" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="Modoer多功能点评系统2.5 精华版 Build 20110710 GBK"> </a> </div> <br>                     <div> <span></span><i>32%</i> </div> <br>                 </div> <br>                 <div></div> <br> </div>CSS代码部分：.digg{width:530px;margin:20px auto;position:relative}<br> #dig_down,#dig_up{width:200px;height:48px;margin:10px;position:relative;border:1px solid #d3d3d3;padding-left:42px;cursor:pointer;float:left}<br> .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}diggs.png 图片附件已上传

diggs.png ( 2.48 KB 下载：4 次 )