首页 > 代码库 > 项目总结1
项目总结1
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‘)
项目总结1
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。