<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. 蚂蚁风险大脑亮相ATEC城市峰会:为数字经济时代做好“安全守护”

    2019年1月4日,以“数字金融新原力(The New Force of Digital Finance)”为主题的蚂蚁金服ATEC城市峰会在上海隆重举行.大会聚焦金融数字化转型,分享新技术的发展趋势 ...

  2. CopyOnWriteArrayList与Collections.synchronizedList的性能对比(转)

    列表实现有ArrayList.Vector.CopyOnWriteArrayList.Collections.synchronizedList(list)四种方式. 1 ArrayList Array ...

  3. 模板引擎ejs入门学习

    1:利用 NPM 安装 EJS 很简单 npm install ejs 2:安装完成肯定就是使用了 var template = ejs.compile(str, options); template ...

  4. MATLAB 实时脚本(live-script)使用

    在matlab2016a及以上的版本不建议安装notebook来编写实施脚本,以为之后的matlab里面会有live-script,他可以创建实施脚本,使脚本与方便操作.那么这个live script ...

  5. guxh的python笔记十一:异常处理

    1,抓错方法 name = [0, 1, 2] try: name[3] except IndexError as exc: # 抓单个错误,打印错误信息e print(exc) except (In ...

  6. OO第一单元总结分析

    综述:本模块的内容为表达式求导,目的是通过不同项的嵌套四则运算求导这一基本思路熟悉面向对象的继承与接口机制. 一.三次作业总结分析 1.第一次作业: 1.1 作业分析 盼望着,盼望着,鸽了一年的oo终 ...

  7. promise用法十道题

    JS是单线程语言,多数的网站不需要大量计算,程序耗时主要是在磁盘I/O和网络I/O上 ,虽然固态硬盘SSD读取很快,但是和CPU比起来却不在一个数量级上,而且网络上的一个数据包来回时间更慢,所以一些C ...

  8. nodejs window平台上 以服务运行

    刚学nodejs  想使用 sc create 来创建服务,但是倒腾了很久没有弄出来,创建是成功了,使用 net start 启动服务报错,没有控制功能.后来网上找了一下 发现这个东西:nssm 使用 ...

  9. 微信小程序页面跳转导航wx.navigateTo和wx.redirectTo

    }) wx.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面. 还是用上面的三张图示作为例子,当使用wx.redirctTo接口跳转页面时,原来的页面将被删除掉,当然,这是小 ...

  10. python learn note1

    1.python 的缩进 习惯了java,c++之类的宽容,初学python,被它摆了道下马威,写if else,竟然必须要我正确用缩进格式,原来在python里不能用括号来表示语句块,也不能用开始/ ...