标签:
1、移动端1px问题
<style> .border{ position: relative; width: 80%; height: 20px; background: yellow; } .border_btm:after{ position: absolute; bottom: 0; left: 0; width: 100%; content: ‘ ‘; border: 1px solid red; transform: scaleY(.5); } </style> <div class="border border_btm"> 1像素 </div>
2.水平垂直居中
<style> .oneToast{ position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform:translate(50%,50%); white-space: nowrap; /*内容过多时不折行*/ min-width: 8rem; padding: .9rem 1.6rem; text-align: center; font-size: 1.4rem; color: #fff; background: rgba(0,0,0, .5); border-radius: 40px; } </style> <div class="oneToast"> 您的购物车已满99件,建议先去结算或清理 </div>
3、点赞加1,再次点击取消(这里前端只是实现交互效果,需要后台数据)
<span class="z_dz"> <i class="icon-vdz"></i> <b class="zan">56</b> </span>
var zDz = $(‘.z_dz‘); zDz.tap(function(){ $(this).toggleClass(‘z_dzColor‘); var zanNum =parseInt($(‘.zan‘,this).text()); if(zDz.hasClass(‘z_dzColor‘)){ zanNum +=1; $(‘.zan‘,this).text(zanNum); }else { zanNum -=1; $(‘.zan‘,this).text(zanNum); } });
$(‘.zan‘,this).text(zanNum)
ps:$(‘.zan‘,this) 等同于 $(this).find(‘.zan‘)
标签:
原文地址:http://www.cnblogs.com/wine/p/5908538.html