jq “顶”和“踩”代码分享

顶和踩JQ实现
样式如下：


js代码部分：HTML代码部分：
具体CSS样式根据自己的实际情况调整吧

133

写的好，我很赞！

68%

42

太差劲了！

32%

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 下载：4 次 )