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 {
width: 100%;
}
}
ul {
width: 100%;
margin-bottom: px2em(60);
li {
width: 100%;
@include displayFlex;
flex-direction: row;
margin-bottom: px2em(2);
background-color: #fffffd;
.figure {
width: px2em(100);
margin: px2em(20) px2em(6) px2em(14) px2em(6);
.aniContainer img {
position: fixed;
width: px2em(100);
z-index: 100;
}
}
.figcaption {
width: calc(100% - #{px2em(130)});
width: -moz-calc(100% - #{px2em(130)});
width: -webkit-calc(100% - #{px2em(130)});
margin: px2em(20) px2em(0) px2em(14) px2em(10);
>div {
width: 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 {
width: 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 {
width: 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;
width: 100%;
height: px2em(60);
background-color: #ffffff;
text-align: center;
@include displayFlex;
.footer-img {
width: 13%;
height: 100%;
@include flexCom;
img {
width: px2em(24);
height: px2em(24);
}
span {
display: block;
font-size: px2em(14);
}
}
.footer-cat {
width: 24%;
height: 100%;
font-size: px2em(20);
line-height: px2em(50);
background-color: #FF7F50;
color: #ffffff;
}
.footer-buy {
width: 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
css flex 兼容ios android--商品展示 添加购物车的更多相关文章
- 关于前端本地压缩图片，兼容IOS/Android/PC且自动按需加载文件之lrz.bundle.js
一.介绍说明主要特点: ①在前端压缩好要上传的图片可以更快的发送给后端,因此也特别适合在移动设备上使用. ②兼容IOS/Android,修复了IOS/Android某些版本已知的BUG. ③按需加载文 ...
- cordova for ios(android一样)添加插件
1.进入当前工程文件夹 终端:cd ~/Desktop/ cd piao 2.添加插件 :cordova plugin add Basic device information (Device API ...
- LocalResizeIMG前端HTML5本地压缩图片上传，兼容移动设备IOS,android
LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...
- select设置text的值选中（兼容ios和Android）基于jquery
前一段时间改了一个bug,是因为select引起的.当时我没有仔细看,只是把bug改完了就完事了,今天来总结一下. 首先说option中我们通常会设置value的属性的,还有就是text值的,请参见下 ...
- 利用React Native 从0到1 开发一款兼容IOS和android的APP（仿造京东）
最近有一部电视剧叫做<微微一笑很傻逼>里面有个男猪脚,人们都叫他大神~我觉得吧~大神是相对的~所以~啥事都得谦虚! 好了 今天介绍的是如何从0到1利用React Native开发一款兼容I ...
- 【原】常见CSS3属性对ios&android&winphone的支持
2个月前,我在博文<webapp开发中兼容Android4.0以下版本的css hack>中写过“那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了” ,在 ...
- Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异
Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...
- iOS/Android 浏览器(h5)及微信中唤起本地APP
在移动互联网,链接是比较重要的传播媒质,但很多时候我们又希望用户能够回到APP中,这就要求APP可以通过浏览器或在微信中被方便地唤起. 这是一个既直观又很好的用户体验,但在实现过程中会遇到各种问题: ...
- iOS / Android 移动设备中的 Touch Icons
上次转载了一篇<将你的网站打造成一个iOS Web App>,但偶然发现这篇文章的内容有些是错误的——准确来说也不是错误,只是不适合自半年前来的情况了(也可以说是iOS7 之后的时间)—— ...
随机推荐
- sql server 给表加说明，给列/字段加说明
--sql server给表加说明: --banner EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'Banner ...
- VS2015 无法启动 IIS服务器
打开VS2012解决方案资源管理器 -> 点选 Web 项目选择 -> 属性 -> Web ->创建虚拟目录. 再次运行Web项目,成功.
- qtftp 客户端
今天上午看了看FTP网络,但是当添加头文件时发现qt creater并不包括此头文件,于是找了一下资料发现:在QT5上将QFtp去掉了,建议使用QNetworkAccessManager,但是后者并没 ...
- TessorFlow学习 之 手写数字识别的搭建
手写数字识别的搭建
- android TextView 例子代码（文字中划线、文字下划线）
XML: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android ...
- tomcat和eclipse-wtp的一些配置
TOMCAT配置UTF-8 server.xml配置文件: <Connector port="8080" protocol="HTTP/1.1" conn ...
- Your password has expired. To log in you must change it using a client that supports expired passwords.
[Lk] ERROR [11-26 23:01:51] [main] net.jweb.listener.AppInitializerListener.contextInitialized(231) ...
- .Net MVC 获取Response和Request对象
通过 System.Web.HttpContext.Current 获取 public static string ConstractExportExcel(List<ERP_Contrac ...
- react-native启动页面设置，react-native-splash-screen
用于解决iOS和Android启动白屏问题及简单的启动页面展示 下载 react-native-splash-screen yarn add react-native-splash-screen re ...
- Java继承与多态浅析
一.继承 1.通过extends继承的父类可以是不加abstract关键字的普通类,也可以是加了abstract关键字的抽象类.继承普通类时可以覆写父类的方法,或者创建自己独有的方法,或者这两 ...