效果图：
html:
css:
.an{
margin-top:0px;
position: relative;
.popzframe,.popcframe{
display: none;
word-wrap: break-word;
position: absolute;
left:333px;
top:85px;
120px;
height: 60px;
border:1px solid #e9e9e9;
background-color: #fff;
box-shadow: 4px 4px 7px -2px #888;
text-align: center;
vertical-align: middle;
.log{
display: inline-block;
margin-top: 20px;
span{
color: #FB452F;
font-weight: bold;
}
}
}
.popzgframe,.popcgframe{
display: none;
word-wrap: break-word;
position: absolute;
left:333px;
top:85px;
130px;
height: 60px;
border:1px solid #e9e9e9;
background-color: #fff;
box-shadow: 4px 4px 7px -2px #888;
padding-left: 20px;
vertical-align: middle;
.log{
display: inline-block;
margin-top: 15px;
span{
color: #FB452F;
font-weight: bold;
}
}
.havecomment{
font-size: 12px;
}
}
.popcframe,.popcgframe{
left:457px;
}
.view{
display: inline-block;
text-align: center;
100px;
height:30px;
background:#FB452F;
border-radius:2px;
margin-right: 20px;
color:#fff;
font-size: 14px;
line-height: 30px;
margin-top:53px;
outline: none;
}
.dz{
margin-left: 333px;
&:hover{
cursor: pointer;
background: #FF5844;
}
}
.cc{
&:hover{
cursor: pointer;
background: #FF5844;
}
}
.ds{
background:#FFA42D;
&:hover{
cursor: pointer;
background: #FFAF48;
}
}
}
js:
//楼主处按钮
//说明：点赞和踩是互斥的，并且只能点一次
host(){
//给楼主的点赞
var onoff=true;
var gate =true;
$(".hostdz").click(function(){
//两者都为真时，是没有按钮点击过，所以可以点击
if(onoff && gate){
var num=$(".hostdznum")[0].innerHTML;
num++;
//一个人只能点击一次，所以点击过的按钮就设置为false
onoff=false;
//点赞次数窗口下滑
$(".hostdznum")[0].innerHTML=num;
$(".popzframe").slideDown();
$(".popzframe .log span")[0].innerHTML=num;
//点赞次数窗口下滑三秒后收起来
setTimeout(function(){
$(".popzframe").slideUp();
},2000)
//当onoff按钮被点击后(false)，那么踩踩按钮点击时，就会弹出已经评价过的窗口
if(onoff){
}else{
//给楼主的踩
$(".hostdown").click(function(){
$(".popcgframe").slideDown();
$(".popcgframe .log span")[0].innerHTML=$(".popzframe .log span")[0].innerHTML;
setTimeout(function(){
$(".popcgframe").slideUp();
},2000)
})
}
}else{
//如果有按钮被点击过，那么弹出窗口都是已经点击过
//第二次点击点赞按钮(gate)
$(".popzgframe .log span")[0].innerHTML=$(".popzframe .log span")[0].innerHTML;
$(".popzframe").slideUp();
$(".popzgframe").slideDown();
setTimeout(function(){
$(".popzgframe").slideUp();
},2000)
}
})
//给楼主的踩
$(".hostdown").click(function(){
if(onoff && gate){
var num=$(".hostdownnum")[0].innerHTML;
num++;
gate=false;//设置只能点击一次
$(".hostdownnum")[0].innerHTML=num;
$(".popcframe").slideDown();
$(".popcframe .log span")[0].innerHTML=num;
setTimeout(function(){
$(".popcframe").slideUp();
},2000)
if(gate){
}else{
//给楼主的赞
$(".hostdz").click(function(){
console.log(9999)
$(".popzgframe").slideDown();
$(".popzgframe .log span")[0].innerHTML=$(".popcframe .log span")[0].innerHTML;
setTimeout(function(){
$(".popzgframe").slideUp();
},2000)
})
}
}else{
//第二次点击踩按钮(onoff)
$(".popcgframe .log span")[0].innerHTML=$(".popcframe .log span")[0].innerHTML;
$(".popcframe").slideUp();
$(".popcgframe").slideDown();
setTimeout(function(){
$(".popcgframe").slideUp();
},2000)
}
})
}