<!DOCTYPE html>

<html>

<head>

<title>纯css实现左右滑动</title>

<style type="text/css">

ul,li{

list-style: none;;

}

.slide-box{

margin-top:200px;

display: -webkit-box;

overflow-x: auto;

/*适应苹果*/

-webkit-overflow-scrolling:touch;

}

.slide-item{

width: 300px;

height: 300px;

border:1px solid #ccc;

margin-right: 30px;

background: pink;

}

/*隐藏掉滚动条*/

.slide-box::-webkit-scrollbar {

display: none;

}

</style>

</head>

<body>

<ul class="slide-box">

<li class="slide-item"></li>

<li class="slide-item"></li>

<li class="slide-item"></li>

<li class="slide-item"></li>

<li class="slide-item"></li>

</ul>

</body>

</html>

移动端左右滑动问题-html与css解决的更多相关文章

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

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

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

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

  3. 移动端触摸滑动插件Swiper

    移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...

  4. swiper嵌套小demo(移动端触摸滑动插件)

    swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 :  https://github.com/Clear ...

  5. 原生 JS 实现移动端 Touch 滑动反弹

    什么是 Touch滑动?就是类似于 PC端的滚动事件,但是在移动端是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下: 1. 准备工作 什么是移动端的 Touch事件?在移动端 ...

  6. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  7. 移动端tab滑动和上下拉刷新加载

    移动端tab滑动和上下拉刷新加载 查看demo(请在移动端模式下查看) 查看代码 开发该插件的初衷是,在做一个项目时发现现在实现移动端tab滑动的插件大多基于swiper,swiper的功能太强大而我 ...

  8. 移动端touch滑动事件监听

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 移动端 uni-app 滑动事件 精确判断手指滑动方向

    移动端根据手指滑动操作判断滑动方向 设计思路: 1.根据移动端touchstart和touchend方法获取手指触摸屏幕的开始坐标和结束坐标 2.根据两个坐标计算与水平方向的夹角 3.根据夹角判断当前 ...

随机推荐

  1. Python中的音频和数字信号处理（DSP）

    翻译自Python For Engineers. 1. 创建一个正弦波 在这个项目中,我们将创建一个正弦波,并将其保存为wav文件. 但在此之前,你应该知道一些理论. 频率:频率是正弦波重复一秒的次数 ...

  2. PHP全栈学习笔记9

    php的会话控制,什么是会话控制,http等. 什么是会话控制思想,http协议. cookie 和 session http是超文本传输协议,是网络上最广泛的一种网络协议. http最大特点是无连接 ...

  3. 前端笔记之服务器&Ajax（下）数据请求&解决跨域&三级联动&session&堆栈

    一.请求后端的JSON数据 JSON是前后端通信的交互格式,JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. JSON是互联网各个后台与 ...

  4. Keras Model Sequential模型接口

    Sequential 模型 API 在阅读这片文档前,请先阅读 Keras Sequential 模型指引. Sequential 模型方法 compile compile(optimizer, lo ...

  5. Flink从入门到放弃(入门篇2)-本地环境搭建&构建第一个Flink应用

    戳更多文章: 1-Flink入门 2-本地环境搭建&构建第一个Flink应用 3-DataSet API 4-DataSteam API 5-集群部署 6-分布式缓存 7-重启策略 8-Fli ...

  6. Python编程从入门到实践笔记——变量和简单数据类型

    Python编程从入门到实践笔记——变量和简单数据类型 #coding=gbk #变量 message_1 = 'aAa fff' message_2 = 'hart' message_3 = &qu ...

  7. etcd v3集群备份和恢复

    官方文档 https://github.com/etcd-io/etcd/blob/master/Documentation/op-guide/recovery.md 一.运行3个etcd节点 我们用 ...

  8. Python实现Singleton模式的几种方式

    使用python实现设计模式中的单例模式.单例模式是一种比较常用的设计模式,其实现和使用场景判定都是相对容易的.本文将简要介绍一下python中实现单例模式的几种常见方式和原理.一方面可以加深对pyt ...

  9. 使用Atlas进行元数据管理之容错和高可用

    1. 介绍 Apache Atlas使用各种系统并与之交互,为数据管理员提供元数据管理和数据血缘信息.通过适当地选择和配置这些依赖关系,可以使用Atlas实现高度的服务可用性.本文档介绍了Atlas中 ...

  10. KVM虚拟化使用详解--技术流ken

    KVM介绍 Kernel-based Virtual Machine的简称,是一个开源的系统虚拟化模块,自Linux 2.6.20之后集成在Linux的各个主要发行版本中. KVM的虚拟化需要硬件支持 ...