html横向滑动案例
<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横向滑动案例的更多相关文章
- 横向滑动的HorizontalListView滑动指定位置的解决方法
项目中用到了自定义横向滑动的控件:HorizontalListView,点击其中一项,跳转到另外一个大图界面,大图界面也是HorizontalListView,想使用setSelection方法设定 ...
- UICollectionView 图片横向滑动居中偏移量的解决
1.在使用UICollectionView 来显示横向滑动图片的时候,cell与cell之间有间隙,每次滑动后cell都会向左偏移,在使用过这两个方法才解决每次向左偏移的部分. 2.使用方法前不要开启 ...
- 使GridView可以单行横向滑动
最近做的练手的小项目中存在一个横向滑动的问题,需要HorizontalScroll中嵌套GridView,但是GridView默认是竖直排放的item,况且HorizontalScroll与GridV ...
- ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题
ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题 如图红色为scrollview的背景色,在scrollview上加了图片之后,总会有向下的偏移 设置conten ...
- android--解--它们的定义tabhost(动态添加的选项+用自己的主动性横向滑动标签+手势切换标签页和内容特征)
在本文中,解决他们自己的定义tabhost实现,并通过代码集成动态加入标签功能.自己主动标签横向滑动功能.和手势标签按功能之间切换. 我完成了这个完美的解决方案一起以下: 1.定义tabwidget布 ...
- overflow-x: scroll;横向滑动详细讲解
overflow-x: scroll;横向滑动(移动端使用详解) css3 , ie8以上 <!DOCTYPE html> <html lang="en"> ...
- UITableView 的横向滑动实现
UITableView 的横向滑动实现 概述 为了实现横向滑动的控件,可以继承类 UIScrollView 或类 UIView 自定义可以横向滑动的控件,这里通过 UITableView 的旋转,实现 ...
- 用css巧妙实现移动端横向滑动展示功能
前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...
- iOS8 UICollectionView横向滑动demo
在iOS8中,scrollView和加载在它上面的点击事件会有冲突,所以做一个横向滑动的界面最好的选择就是UICollectionView. 这个效果可以用苹果公司提供的官方demo修改而来,下载地址 ...
随机推荐
- React---简单实现表单点击提交插入、删除操作
import React,{Component,Fragment} from 'react' class App extends Component { constructor(){ super() ...
- Android虹软人脸识别sdk使用工具类
public class FaceUtil { private static final String TAG = FaceUtil.class.getSimpleName(); private st ...
- C#演示如何使用 XML 将源码编入文档
工作闲暇时间,将做工程过程中常用的代码段记录起来,下面的代码是关于C#演示如何使用 XML 将编入文档的代码,希望对大伙有较大帮助. using System; public class SomeCl ...
- 【转载】DRuid 大数据分析之查询
转载自http://yangyangmyself.iteye.com/blog/2321759 1.Druid 查询概述 上一节完成数据导入后,接下来讲讲Druid如何查询及统计分析导入的数据 ...
- SSM框架完成Ajax简单用户登录验证
一.前端JSP <%@ page contentType="text/html;charset=UTF-8" language="java" %> ...
- Lua 用指定字符或字符串分割输入字符串,返回包含分割结果的数组
// 用指定字符或字符串分割输入字符串,返回包含分割结果的数组 // @function [parent=#string] split // @param string input 输入字符串 // ...
- iframe之间的postMessage传参
1.传参 function IframeClose() { var obj = {method: "iframeClose"}; window.parent.postMessage ...
- js判重
1.两个数组,取出不重复的部分 var arr=[1,2,3]; var arr1=[1,2]; vat tmp=[]; for(let i in arr1){ if(!(arr.includes(a ...
- 【转】 svn: Server sent unexpected return value (403 Forbidden) in response to CHECKOUT request for-解决方法
来源:http://blog.csdn.net/xhu_eternalcc/article/details/18454481 ------------------------------------- ...
- 乐观锁vs悲观锁, 集群vs分布式 , 微服务, 幂等性
乐观锁: 总认为不会产生并发问题,因此不会上锁,更新时会判断其他线程在这之前有没有对数据进行修改,一般会使用版本号机制或CAS操作来实现 version: 数据上有数据版本号version字段,每次更 ...