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 之后的时间)—— ...
随机推荐
- w3cschool脚本算法编程实战课程
部分源码==>https://github.com/calamus0427/commonJS 翻转字符串算法挑战 function reverseString(str) { str = str. ...
- MySQL----ERROR 1071 (42000): Specified key was too long; max key length is 767 bytes
1.问题描述 在导入同事提供的一个sql文件时候,出现了一个1071错误,总结学习一下: 2.分析问题 错误的字面意思是说mysql字段设置的值太长了,不能大于767个字节,在网上找了一些资料后才知道 ...
- 查询oracle约束所关联的表
ORA-02292: 违反完整约束条件 (ADMIN.FK_PROJECTP_RELATIONS_OFFICIAL) - 已找到子记录 遇到这样的错误,熟悉的话可能从约束名称看出是那张表的约束,因为名 ...
- JSP 调用java 常量 枚举
JAVA:public enum ReimStatus { UNCONFIRMED ("118001"), //未确认 DISPATCH_VERIFY("118002&q ...
- <spark> error：启动spark后查看进程，进程中master和worker进程冲突
启动hadoop再启动spark后jps,发现master进程和worker进程同时存在,调试了半天配置文件. 测试发现,当我关闭hadoop后 worker进程还是存在, 但是,当我再关闭spark ...
- 《算法》第五章部分程序 part 7
▶ 书中第五章部分程序,包括在加上自己补充的代码,字符串的二进制表示.十六进制表示.图形表示 ● 二进制表示 package package01; import edu.princeton.cs.al ...
- records.config中文详解
转载:http://www.safecdn.cn/cdn/2018/12/records-config-zh/106.html records.config参数的一些备注 CONFIG proxy.c ...
- 二级VB备考中
今天安装了一个VB软件,二级备考中,每天一套牌卷子. 在Html5中 align 与valign改变了属性 vertial-align 是垂直方向的改变 面对网站首页的建立需要首先画好一份区域设计图 ...
- 天天向上的力量 III（python在pycharm实现）
'''描述一年365天,以第1天的能力值为基数,记为1.0.当好好学习时,能力值相比前一天提高N‰:当没有学习时,能力值相比前一天下降N‰.每天努力或放任,一年下来的能力值相差多少呢?其中,N的取值范 ...
- 构建最小JDK Docker镜像
参考: https://my.oschina.net/shyloveliyi/blog/1627020 1.首先下载jre,下载地址是https://www.java.com/en/download/ ...