javascript - 移动端实现内容左右滑动，并点击放大效果的问题

问题描述

问 题

需求如题，代码如下：

/*html*/
<div class="box">
<ul>
<li>
<div>
<img src="../img/lodin_foot2.png"/>
</div>
<span>送鲜花</span>
<a></a>
</li>
</ul>
</div>
/*css*/
.box{
display: flex;
    align-items: center;
    width: 100%;
    height: 4rem;
    overflow-x: auto;
    overflow-y: hidden;
}
.box>ul{
display: flex;
    width: auto;
    height: 3rem;
    white-space: nowrap;
    vertical-align: middle;
    align-items: center;
}
.box>ul>li{
display: inline-block;
    width: 4rem;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    position: relative;
    background: #FFFFFF;
}

当我给其中一个li设置缩放的时候，其背景色消失了，这是怎么回事？
另：如果不用弹性盒子，按照一般的方式实现，即给box一个固定宽高+overflow:auto,让里面的li左浮动，那么里面的Li高度不能有效的放大（被ul或者.box的高度限制了）

这是android的实现方式：http://blog.csdn.net/legend12...，前端方式如何实现？

效果同：http://www.17sucai.com/pins/9...类似，但不需要左右切换，而是左右滑动，并且放大的图片不一定居中，而是在当前点击的那个图片的位置放大。
直接设置内容滑动，又不能放大。用弹性盒子来设置滑动，效果又不太友好，有没有有类似经验的童鞋指教一下，这样的需求怎么实现？思路是怎样的？

解决方案

用swiper轻松搞定

这篇关于javascript - 移动端实现内容左右滑动，并点击放大效果的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！