码迷,mamicode.com
首页 > 其他好文 > 详细

项目总结1

时间:2016-09-26 12:58:29      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:

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

标签:

原文地址:http://www.cnblogs.com/wine/p/5908538.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!