顶和踩JQ实现
样式如下:


js代码部分:<script type="text/javascript">
$(function () {
//鼠标滑向和离开投票按钮时,变换背景样式
$("#dig_up").hover(function () {
$(this).addClass("digup_on");
}, function () {
$(this).removeClass("digup_on");
});
$("#dig_down").hover(function () {
$(this).addClass("digdown_on");
}, function () {
$(this).removeClass("digdown_on");
});
// 获得文章ID
var aid = "{$article.art_id}";
//初始化数据
getdata("/votes/aid/" + aid);

//单击"顶"时动作方法
$("#dig_up").click(function () {
//两种方法选其一
//getdata("{:U('Index/votes',array('action'=>'like'))}",aid);
getdata("/votes/action/like/aid/" + aid);
});
//单击"踩"时动作方法
$("#dig_down").click(function () {
//两种方法选其一
//getdata("{:U('Index/votes',array('action'=>'unlike'))}",aid);
getdata("/votes/action/unlike/aid/" + aid);
});
});
function getdata(url, aid) {
$.getJSON(url, {aid: aid}, function (data) {
if (data.success == 1) {
$("#num_up").html(data.like);
$("#bar_up span").css("width", data.like_percent);
$("#bar_up i").html(data.like_percent);
$("#num_down").html(data.unlike);
$("#bar_down span").css("width", data.unlike_percent);
$("#bar_down i").html(data.unlike_percent);
} else {
$("#msg").html(data.msg).show().css({'opacity': 1, 'top': '40px'}).animate({
top: '-50px',
opacity: 0
}, "slow");
}
});
}
</script>HTML代码部分:
具体CSS样式根据自己的实际情况调整吧<div class="digg">
<div id="dig_up" class="digup">
<span id="num_up">133</span>
<p>写的好,我很赞!</p>
<div id="bar_up" class="bar"><span style="width:68%"></span><i>68%</i></div>
</div>
<div id="dig_down" class="digdown">
<span id="num_down">42</span>
<p>太差劲了!</p>
<div id="bar_down" class="bar"><span style="width:32%"></span><i>32%</i></div>
</div>
<div id="msg"></div>
</div>CSS代码部分:.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:pointer;float:left}
.digup{background:url(../../images/diggs.png) no-repeat 4px 2px}
.digup_on{background:url(../../images/diggs.png) no-repeat 4px -49px}
.digdown{background:url(../../images/diggs.png) no-repeat 4px -102px}
.digdown_on{background:url(../../images/diggs.png) no-repeat 4px -154px}
#num_down,#num_up{position:absolute;right:6px;top:18px;font-size:20px}
#dig_up p{height:24px;line-height:24px;color:#360}
#dig_down p{height:24px;line-height:24px;color:#f30}
.bar{width:100px;height:12px;line-height:12px;border:1px solid #f0f0f0;position:relative;text-align:center}
.bar span{display:block;height:12px}
.bar i{position:absolute;top:0;left:104px}
#bar_up span{background:#360}
#bar_down span{background:#f60}
#msg{position:absolute;right:20px;top:40px;font-size:18px;color:red}diggs.png 图片附件已上传

附件 diggs.png ( 2.48 KB 下载:30 次 )

评论() 相关

收藏

赞

阳阳VIP

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。