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 之后的时间)—— ...
随机推荐
- 不用MathType, 如何在Mac Word中插入公式
不用MathType, 如何在Mac Word中插入公式 找了好久都找不到MathType的破解版,不得不使用免费清爽的MarkDown编辑工具Typora_for_Mac. 我是很喜欢Typora的 ...
- Win7平台下配置Sublime Text2 的C++编译环境
Sublime Text 是一个跨平台的编辑器,之前在 Mac 上成功配置了 C++ 在 Sublime Text 的编译环境,接下来介绍下载 windows 平台下的环境配置. 1. 首先判断机器上 ...
- centos限制用户使用部分命令
参考网:https://access.redhat.com/solutions/65822# 环境 Red Hat Enterprise Linux 5 Red Hat Enterprise Linu ...
- Jmeter之Bean shell使用-常用内置变量
Bean Shell常用内置变量 JMeter在它的BeanShell中内置了变量,用户可以通过这些变量与JMeter进行交互,其中主要的变量及其使用方法如下: log:写入信息到jmeber.l ...
- asp:Repeater控件使用
Repeater控件和DataList控件,可以用来一次显示一组数据项.比如,可以用它们显示一个数据表中的所有行. Repeater控件完全由模板驱动,提供了最大的灵活性,可以任意设置它的输出格式.D ...
- delphi query阻塞执行 长时间执行sql的解决办法
delphi query 执行sql一直是阻塞执行,执行长时间的sql语句,程序没响应了,这时候只能用线程技术解决. 如今FDQuery有了CmdExecMode属性,可以设置amCancelDial ...
- java中常用工具类
目录 一. org.apache.commons.io.IOUtils 二. org.apache.commons.io.FileUtils 三. org.apache.commons.lang.St ...
- windows 服务管理器使用系统内置帐户时密码的输入
windows 服务管理器使用系统内置帐户时在选择帐户如network services后不需要输入密码,直接确认即可,系统会自动附加密码.
- 机器学习进阶-边缘检测-Canny边缘检测 1.cv2.Canny(进行Canny边缘检测)
1. cv2.Canny(src, thresh1, thresh2) 进行canny边缘检测 参数说明: src表示输入的图片, thresh1表示最小阈值,thresh2表示最大阈值,用于进一步删 ...
- svn分支
在svn上我们除过一般的保存文档外,对于开发source,可以使用 trunk(主线),branch(分线), tag(上线或测试用) 做分支应用开发. trunk上建立代码位置,存放代码. 点击Te ...