zoukankan      html  css  js  c++  java

  • css flex 兼容ios android--商品展示 添加购物车

    https://blog.csdn.net/u010035608/article/details/52711248

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="apple-touch-icon" href="https://img.alicdn.com/tfs/TB1ZDNRuhGYBuNjy0FnXXX5lpXa-468-644.jpg_320x5000q100.jpg_.webp">
    <link rel="Shortcut Icon" href="https://img.alicdn.com/tfs/TB1ZDNRuhGYBuNjy0FnXXX5lpXa-468-644.jpg_320x5000q100.jpg_.webp" type="image/x-icon">
    <link rel="stylesheet" href="css/mobile.css">
    <!--<link rel="stylesheet" type="text/css" href="css/newMobile.css" />-->
    <title>mobile</title>

    </head>

    <body>

    <div class="item-section" data-repeat="sections">
    <div class="item-header">
    <img src="http://gw.alicdn.com/mt/TB1PNLZKXXXXXaTXXXXXXXXXXXX-750-481.jpg" alt="" />
    </div>
    <ul>
    <li data-repeat="items" class="flag" role="link" href="">
    <a class="figure flag-item" href="">
    <img src="https://img.alicdn.com/tfs/TB1ZDNRuhGYBuNjy0FnXXX5lpXa-468-644.jpg_320x5000q100.jpg_.webp" class='goodsImg' alt="">
    <div class="aniContainer"></div>
    </a>
    <div class="figcaption flag-item">
    <div class="flag-title">
    <a href="" title="">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093</a>
    </div>
    <div class="flag-price">
    <span>双11价</span>
    <strong>¥299.06</strong>
    <small>(满400减100)</small>
    </div>
    <div class="flag-type">热卖100件</div>
    <a class="flag-btn" href="javascript:;">马上抢</a>
    </div>
    </li>

    <li data-repeat="items" class="flag" role="link" href="">
    <a class="figure flag-item" href="">
    <img src="//img.alicdn.com/bao/uploaded/i4/1940689151/TB2dldEHhWYBuNjy1zkXXXGGpXa_!!1940689151-0-item_pic.jpg" class='goodsImg' alt="">
    <div class="aniContainer"></div>
    </a>
    <div class="figcaption flag-item">
    <div class="flag-title">
    <a href="" title="">Nike耐克官方ZOOM KOBE VENOMENON 5 EP科比男子篮球鞋815757</a>
    </div>
    <div class="flag-price">
    <span>双11价</span>
    <strong>¥299.06</strong>
    <small>(满400减100)</small>
    </div>
    <div class="flag-type">热卖100件</div>
    <a class="flag-btn" href="javascript:;">马上抢</a>
    </div>
    </li>

    <li data-repeat="items" class="flag" role="link" href="">
    <a class="figure flag-item" href="">
    <img src="//img.alicdn.com/bao/uploaded/i2/859494695/TB1Hd84yLiSBuNkSnhJXXbDcpXa_!!0-item_pic.jpg" class='goodsImg' alt="">
    <div class="aniContainer"></div>
    </a>
    <div class="figcaption flag-item">
    <div class="flag-title">
    <a href="" title="">现货【送皮套+钢膜+耳机】Xiaomi/小米 红米Note2手机note2</a>
    </div>
    <div class="flag-price">
    <span>双11价</span>
    <strong>¥299.06</strong>
    <small>(满400减100)</small>
    </div>
    <div class="flag-type">热卖100件</div>
    <a class="flag-btn" href="javascript:;">马上抢</a>
    </div>
    </li>

    <li data-repeat="items" class="flag" role="link" href="">
    <a class="figure flag-item" href="">
    <img src="//img.alicdn.com/bao/uploaded/i4/1025480580/TB141m.iXuWBuNjSszbXXcS7FXa_!!0-item_pic.jpg" class='goodsImg' alt="">
    <div class="aniContainer"></div>
    </a>
    <div class="figcaption flag-item">
    <div class="flag-title">
    <a href="" title="">现货【送皮套+钢膜+耳机】Xiaomi/小米 红米Note2手机note2</a>
    </div>
    <div class="flag-price">
    <span>双11价</span>
    <strong>¥299.06</strong>
    <small>(满400减100)</small>
    </div>
    <div class="flag-type">热卖100件</div>
    <a class="flag-btn" href="javascript:;">马上抢</a>
    </div>
    </li>

    <li data-repeat="items" class="flag" role="link" href="">
    <a class="figure flag-item" href="">
    <img src="//img.alicdn.com/bao/uploaded/i3/911810517/TB15wKraS8YBeNkSnb4XXaevFXa_!!0-item_pic.jpg" class='goodsImg ' alt="" />
    <div class="aniContainer"></div>
    </a>
    <div class="figcaption flag-item">
    <div class="flag-title">
    <a href="" title="">底部【送皮套+钢膜+耳机】Xiaomi/小米 红米Note2手机note2</a>
    </div>
    <div class="flag-price">
    <span>双11价</span>
    <strong>¥299.06</strong>
    <small>(满400减100)</small>
    </div>
    <div class="flag-type">热卖100件</div>
    <a class="flag-btn" href="javascript:;">马上抢</a>
    </div>
    </li>
    <li data-repeat="items" class="flag" role="link" href="">
    <a class="figure flag-item" href="">
    <img src="https://img.alicdn.com/tfs/TB1ZDNRuhGYBuNjy0FnXXX5lpXa-468-644.jpg_320x5000q100.jpg_.webp" class='goodsImg' alt="">
    <div class="aniContainer"></div>
    </a>
    <div class="figcaption flag-item">
    <div class="flag-title">
    <a href="" title="">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093</a>
    </div>
    <div class="flag-price">
    <span>双11价</span>
    <strong>¥299.06</strong>
    <small>(满400减100)</small>
    </div>
    <div class="flag-type">热卖100件</div>
    <a class="flag-btn" href="javascript:;">马上抢</a>
    </div>
    </li>

    <li data-repeat="items" class="flag" role="link" href="">
    <a class="figure flag-item" href="">
    <img src="//img.alicdn.com/bao/uploaded/i4/1940689151/TB2dldEHhWYBuNjy1zkXXXGGpXa_!!1940689151-0-item_pic.jpg" class='goodsImg' alt="">
    <div class="aniContainer"></div>
    </a>
    <div class="figcaption flag-item">
    <div class="flag-title">
    <a href="" title="">Nike耐克官方ZOOM KOBE VENOMENON 5 EP科比男子篮球鞋815757</a>
    </div>
    <div class="flag-price">
    <span>双11价</span>
    <strong>¥299.06</strong>
    <small>(满400减100)</small>
    </div>
    <div class="flag-type">热卖100件</div>
    <a class="flag-btn" href="javascript:;">马上抢</a>
    </div>
    </li>

    <li data-repeat="items" class="flag" role="link" href="">
    <a class="figure flag-item" href="">
    <img src="//img.alicdn.com/bao/uploaded/i2/859494695/TB1Hd84yLiSBuNkSnhJXXbDcpXa_!!0-item_pic.jpg" class='goodsImg' alt="">
    <div class="aniContainer"></div>
    </a>
    <div class="figcaption flag-item">
    <div class="flag-title">
    <a href="" title="">现货【送皮套+钢膜+耳机】Xiaomi/小米 红米Note2手机note2</a>
    </div>
    <div class="flag-price">
    <span>双11价</span>
    <strong>¥299.06</strong>
    <small>(满400减100)</small>
    </div>
    <div class="flag-type">热卖100件</div>
    <a class="flag-btn" href="javascript:;">马上抢</a>
    </div>
    </li>

    <li data-repeat="items" class="flag" role="link" href="">
    <a class="figure flag-item" href="">
    <img src="//img.alicdn.com/bao/uploaded/i4/1025480580/TB141m.iXuWBuNjSszbXXcS7FXa_!!0-item_pic.jpg" class='goodsImg' alt="">
    <div class="aniContainer"></div>
    </a>
    <div class="figcaption flag-item">
    <div class="flag-title">
    <a href="" title="">现货【送皮套+钢膜+耳机】Xiaomi/小米 红米Note2手机note2</a>
    </div>
    <div class="flag-price">
    <span>双11价</span>
    <strong>¥299.06</strong>
    <small>(满400减100)</small>
    </div>
    <div class="flag-type">热卖100件</div>
    <a class="flag-btn" href="javascript:;">马上抢</a>
    </div>
    </li>

    <li data-repeat="items" class="flag" role="link" href="">
    <a class="figure flag-item" href="">
    <img src="//img.alicdn.com/bao/uploaded/i3/911810517/TB15wKraS8YBeNkSnb4XXaevFXa_!!0-item_pic.jpg" class='goodsImg ' alt="" />
    <div class="aniContainer"></div>
    </a>
    <div class="figcaption flag-item">
    <div class="flag-title">
    <a href="" title="">底部【送皮套+钢膜+耳机】Xiaomi/小米 红米Note2手机note2</a>
    </div>
    <div class="flag-price">
    <span>双11价</span>
    <strong>¥299.06</strong>
    <small>(满400减100)</small>
    </div>
    <div class="flag-type">热卖100件</div>
    <a class="flag-btn" href="javascript:;">马上抢</a>
    </div>
    </li>
    </ul>

    </div>
    <div class="item-footer">
    <div class="footer-img">
    <img src="img/home.png/" alt="首页" />
    <span>首页</span>
    </div>
    <div class="footer-img">
    <img src="img/phone.png/" alt="电话" />
    <span>电话</span>
    </div>
    <div class="footer-img"><img src="img/customSer.png/" alt="客服" /> <span>客服</span></div>
    <div class="footer-img"><img src="img/collection.png" alt="收藏" /> <span>收藏</span></div>
    <div class="footer-cat">加入购物车</div>
    <div class="footer-buy">立即购买</div>
    </div>

    <script type="text/javascript">
    $(function() {
    $(".flag-btn").on("click", function() {
    var thisBoundCl = $(this).parent().siblings("a").find(".goodsImg")[0].getBoundingClientRect();
    var thisAniHtml = '<img src="' + $(this).parent().siblings("a").find(".goodsImg").attr("src") + '" alt="" class="goodsBuy" style="top:' + thisBoundCl.top + 'px;left:' + thisBoundCl.left + 'px;position:fixed" />'
    $(this).parent().siblings("a").find(".aniContainer").append(thisAniHtml);
    setTimeout(function() {
    if($(".aniContainer").find("img").length > 0) {
    $(".aniContainer").find("img:eq(0)").remove();
    }
    }, 500);
    });
    })
    </script>
    </body>

    </html>

    


    $color:#20B2AA;
    @function px2em($px, $base-font-size: 16px) {
        @if (unitless($px)) {
            @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
            @return px2em($px + 0px);
        }
        @else if (unit($px)==em) {
            @return $px;
        }
        @return ($px / $base-font-size) * 1em;
    }
    

    @mixin px2rem($property, $px-values, $baseline-px:16px, $support-for-ie:false) {
        $baseline-rem: $baseline-px / 1rem * 1;
        @if $support-for-ie {
            #{$property}: $px-values;
        }
        @if type-of($px-values)=="number" {
            #{$property}: $px-values / $baseline-rem;
        }
        @else {
            @each $value in $px-values {
                @if $value==0 or type-of($value) !="number" {
                    $rem-values: append($rem-values, $value / $baseline-rem);
                }
            }
        }
    }
    

    @mixin displayFlex {
        display: -webkit-box;
        /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
        display: -moz-box;
        /* 老版本语法: Firefox (buggy) */
        display: -ms-flexbox;
        /* 混合版本语法: IE 10 */
        display: -webkit-flex;
        /* 新版本语法: Chrome 21+ */
        display: -ms-flex;
        display: -moz-flex;
        display: -webkit-flex;
        display: flex;
        /* 新版本语法: Opera 12.1, Firefox 22+ */
    }
    

    @mixin flexCom {
        @include displayFlex;
        // 兼容苹果 安卓
        -webkit-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: space-between;
        -webkit-justify-content: space-between;
        -ms-flex-pack: space-between;
        justify-content: space-between;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
    

    .item-section {
        background-color: #f5294c;
        padding: px2em(20) px2em(10);
        .item-header {
            text-align: center;
            img {
                 100%;
            }
        }
        ul {
             100%;
            margin-bottom: px2em(60);
            li {
                 100%;
                @include displayFlex;
                flex-direction: row;
                margin-bottom: px2em(2);
                background-color: #fffffd;
                .figure {
                     px2em(100);
                    margin: px2em(20) px2em(6) px2em(14) px2em(6);
                    .aniContainer img {
                        position: fixed;
                         px2em(100);
                        z-index: 100;
                    }
                }
                .figcaption {
                     calc(100% - #{px2em(130)});
                     -moz-calc(100% - #{px2em(130)});
                     -webkit-calc(100% - #{px2em(130)});
                    margin: px2em(20) px2em(0) px2em(14) px2em(10);
                    >div {
                         100%;
                    }
                }
                .flag-item {
                    @include displayFlex;
                    position: relative;
                    // 兼容苹果 安卓
                    -webkit-box-orient: vertical;
                    -webkit-flex-direction: column;
                    -ms-flex-direction: column;
                    flex-direction: column;
                    -webkit-box-pack: space-between;
                    -webkit-justify-content: space-between;
                    -ms-flex-pack: space-between;
                    justify-content: space-between;
                    -webkit-box-pack: center;
                    -webkit-justify-content: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                    -webkit-box-align: center;
                    -webkit-align-items: center;
                    -ms-flex-align: center;
                    align-items: center;
                    img {
                         100%;
                        height: px2em(114);
                    }
                    .flag-title a {
                        text-decoration: none;
                        color: #000000;
                    }
                    .flag-price {
                        color: #f32a4c;
                        padding: px2em(14) 0;
                        span {
                            padding: px2em(6) px2em(4);
                            margin-right: px2em(10);
                            border-radius: px2em(2);
                            color: #ffffff;
                            background-color: #f32a4c;
                        }
                        strong {
                            font-weight: 700;
                            margin-right: px2em(10);
                            font-size: px2em(20);
                        }
                        small {
                            font-weight: 700;
                            font-size: px2em(16);
                        }
                    }
                    .flag-type {
                        color: #ff6a30;
                    }
                    >a {
                         px2em(90);
                        height: px2em(30);
                        border-radius: px2em(2);
                        align-self: flex-end;
                        text-align: center;
                        line-height: px2em(30);
                        letter-spacing: px2em(6);
                        text-indent: px2em(6);
                        color: #ffffff;
                        text-decoration: none;
                        background-color: #f5294c;
                        position: absolute;
                        bottom: px2em(-8);
                        left: 100%;
                        margin-left: px2em(-90);
                    }
                }
            }
        }
    }
    

    .item-footer {
        position: fixed;
        bottom: 0;
         100%;
        height: px2em(60);
        background-color: #ffffff;
        text-align: center;
        @include displayFlex;
        .footer-img {
             13%;
            height: 100%;
            @include flexCom;
            img {
                 px2em(24);
                height: px2em(24);
            }
            span {
                display: block;
                font-size: px2em(14);
            }
        }
        .footer-cat {
             24%;
            height: 100%;
            font-size: px2em(20);
            line-height: px2em(50);
            background-color: #FF7F50;
            color: #ffffff;
        }
        .footer-buy {
             24%;
            height: 100%;
            font-size: px2em(20);
            line-height: px2em(50);
            background-color: #FF4500;
            color: #ffffff;
        }
    }
    

    .goodsBuy {
        -moz-animation: to_cart .5s linear;
        -webkit-animation: to_cart .5s linear;
        animation: to_cart .5s linear;
    }
    

    @-moz-keyframes to_cart {
        from {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        to {
            left: 6.5%;
            top: 100%;
            margin-left: px2em(-50);
            margin-top: px2em(-72);
            -webkit-transform: scale(0);
            transform: scale(0);
        }
    }
    

    @-o-keyframes to_cart {
        from {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        to {
            left: 6.5%;
            top: 100%;
            margin-left: px2em(-50);
            margin-top: px2em(-72);
            -webkit-transform: scale(0);
            transform: scale(0);
        }
    }
    

    @-webkit-keyframes to_cart {
        from {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        to {
            left: 6.5%;
            top: 100%;
            margin-left: px2em(-50);
            margin-top: px2em(-72);
            -webkit-transform: scale(0);
            transform: scale(0);
        }
    }
    

    @keyframes to_cart {
        from {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        to {
            left: 6.5%;
            top: 100%;
            margin-left: px2em(-50);
            margin-top: px2em(-72);
            -webkit-transform: scale(0);
            transform: scale(0);
        }
    }
    

    

    

    兼容 安卓 ios
    

    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  【前端】原生event对象和jquery event对象的区别
                    
    【前端】js代码模拟用户键盘鼠标输入
                    
    【前端】回到顶部
                    
    【前端】Three.js
                    
    【前端】三种复制数组的方法
                    
    【Python】Django
                    
    【前端】CommonJS的模块加载机制
                    
    注释声明：TODO HACK XXX FIXME REVIEW
                    
    【Python】Python3中的str和bytes
                    
    【前端】iterable类型的 forEach方法
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/lgjc/p/9373258.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看