<style type="text/css">
.outer-container,.content {width: 630px; height: 185px;padding-left: 8px;}
.outer-container {overflow: hidden;width: 100%;}
.inner-container {overflow:scroll;}
.inner-container::-webkit-scrollbar {display: none;}
.swiper-box{display: inline;margin-right: 8px;}
.swiper-box img{height: 165px;}
</style>
<div class="outer-container">
<div class="inner-container">
<div class="content">
<div class="swiper-box" data-id='3'>
<img src="../img/ios/taocan1.png">
</div>
<div class="swiper-box" data-id='3'>
<img src="../img/ios/taocan2.png">
</div>
<div class="swiper-box" data-id='3'>
<img src="../img/ios/taocan3.png">
</div>
<div class="swiper-box" data-id='3'>
<img src="../img/ios/taocan4.png">
</div>
</div>
</div>
</div>

  

html横向滑动案例的更多相关文章

  1. 横向滑动的HorizontalListView滑动指定位置的解决方法

    项目中用到了自定义横向滑动的控件:HorizontalListView,点击其中一项,跳转到另外一个大图界面,大图界面也是HorizontalListView,想使用setSelection方法设定 ...

  2. UICollectionView 图片横向滑动居中偏移量的解决

    1.在使用UICollectionView 来显示横向滑动图片的时候,cell与cell之间有间隙,每次滑动后cell都会向左偏移,在使用过这两个方法才解决每次向左偏移的部分. 2.使用方法前不要开启 ...

  3. 使GridView可以单行横向滑动

    最近做的练手的小项目中存在一个横向滑动的问题,需要HorizontalScroll中嵌套GridView,但是GridView默认是竖直排放的item,况且HorizontalScroll与GridV ...

  4. ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题

    ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题     如图红色为scrollview的背景色,在scrollview上加了图片之后,总会有向下的偏移 设置conten ...

  5. android--解--它们的定义tabhost(动态添加的选项+用自己的主动性横向滑动标签+手势切换标签页和内容特征)

    在本文中,解决他们自己的定义tabhost实现,并通过代码集成动态加入标签功能.自己主动标签横向滑动功能.和手势标签按功能之间切换. 我完成了这个完美的解决方案一起以下: 1.定义tabwidget布 ...

  6. overflow-x: scroll;横向滑动详细讲解

    overflow-x: scroll;横向滑动(移动端使用详解) css3 , ie8以上 <!DOCTYPE html> <html lang="en"> ...

  7. UITableView 的横向滑动实现

    UITableView 的横向滑动实现 概述 为了实现横向滑动的控件,可以继承类 UIScrollView 或类 UIView 自定义可以横向滑动的控件,这里通过 UITableView 的旋转,实现 ...

  8. 用css巧妙实现移动端横向滑动展示功能

    前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...

  9. iOS8 UICollectionView横向滑动demo

    在iOS8中,scrollView和加载在它上面的点击事件会有冲突,所以做一个横向滑动的界面最好的选择就是UICollectionView. 这个效果可以用苹果公司提供的官方demo修改而来,下载地址 ...

随机推荐

  1. React---简单实现表单点击提交插入、删除操作

    import React,{Component,Fragment} from 'react' class App extends Component { constructor(){ super() ...

  2. Android虹软人脸识别sdk使用工具类

    public class FaceUtil { private static final String TAG = FaceUtil.class.getSimpleName(); private st ...

  3. C#演示如何使用 XML 将源码编入文档

    工作闲暇时间,将做工程过程中常用的代码段记录起来,下面的代码是关于C#演示如何使用 XML 将编入文档的代码,希望对大伙有较大帮助. using System; public class SomeCl ...

  4. 【转载】DRuid 大数据分析之查询

    转载自http://yangyangmyself.iteye.com/blog/2321759 1.Druid 查询概述     上一节完成数据导入后,接下来讲讲Druid如何查询及统计分析导入的数据 ...

  5. SSM框架完成Ajax简单用户登录验证

    一.前端JSP <%@ page contentType="text/html;charset=UTF-8" language="java" %> ...

  6. Lua 用指定字符或字符串分割输入字符串,返回包含分割结果的数组

    // 用指定字符或字符串分割输入字符串,返回包含分割结果的数组 // @function [parent=#string] split // @param string input 输入字符串 // ...

  7. iframe之间的postMessage传参

    1.传参 function IframeClose() { var obj = {method: "iframeClose"}; window.parent.postMessage ...

  8. js判重

    1.两个数组,取出不重复的部分 var arr=[1,2,3]; var arr1=[1,2]; vat tmp=[]; for(let i in arr1){ if(!(arr.includes(a ...

  9. 【转】 svn: Server sent unexpected return value (403 Forbidden) in response to CHECKOUT request for-解决方法

    来源:http://blog.csdn.net/xhu_eternalcc/article/details/18454481 ------------------------------------- ...

  10. 乐观锁vs悲观锁, 集群vs分布式 , 微服务, 幂等性

    乐观锁: 总认为不会产生并发问题,因此不会上锁,更新时会判断其他线程在这之前有没有对数据进行修改,一般会使用版本号机制或CAS操作来实现 version: 数据上有数据版本号version字段,每次更 ...