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

原创: 2016-10-12 09:49:59 885浏览

顶和踩JQ实现
样式如下：

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

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 次 )