CSS 实现触屏【图片文字】左右滚动效果

实现一个css 来控制图片和文字的左右拖动的效果。具体的效果图 如下图所示：



最开始的时候，产品给了我一张静态图片，让我按照这个来是实现页面。跟我说了一下说是可以播放滑动的。我以为是让我写一个轮播图。后来才知道是手动触碰进行拖放。遂决定直接用css来实现。



2.我使用的是slim的语法。如果你想了解这种语法，可以过一遍这个网站的文档slim的语法介绍，反正刚接触的时候，你可能会很不适应。不过，如果你熟悉之后，你会觉得这种语法会大大的加强你的开发效率。

div.select_times_list
ul
li
a href=""
div.select_times_property
span
| 2017 - 07 - 07
br
span
| 星期五 19:00

li
a href=""
div.select_times_property
span
| 2017 - 07 - 08
br
span
| 星期六 19:00

如果你看惯这种语法，下面贴一张，上面slim语法，浏览器解析出来的样式。你应该就很熟悉了。



3.实现点击滑动的效果，页面框架倒不是最重要的，重要的是css。

.select_times_list {
ul li {
margin-bottom: 20px;
list-style: none;
counter-increment: lilist;
position: relative;
border-bottom: none;
border: 1px solid #cecdcd;
background: white;
width: 150px;
border-radius: 10px;
margin-right: 10px;
.select_times_property {
width: 150px;
padding: 5px 0 5px 15px;
}
}

& > ul {
overflow: scroll;
-webkit-overflow-scrolling: touch;
padding-top: 1px;
display: flex;
display: -webkit-flex;
}
}

4.重要的是下面的那个

& > ul

, 里面的几个属性。

overflow大家很熟悉的一个属性应该是hidden , 这个属性可以使多余的样式的部分被隐藏掉。但是他的另一个属性 scroll ， 应该很少用吧，其实，scroll也是你很熟悉的一个场景，不知道你有没有想起来呢。那就是以前写图片单独播放的时候，非此属性莫属。

overflow: scroll;

这个属性是触碰滑动的效果：

-webkit-overflow-scrolling: touch;

这种方式就可以实现我上面的效果了。

【注】：这里我在强调一点和此文无关的一个知识，那就是伪类：

伪类大家应该很熟悉。比如，hover , focus , active , visited 这几个你应该很熟悉，操纵的是鼠标放在标签上的一些效果。

但是伪类还有另外的两种，那就是 after 和before 但是平时用的不是很多。在使用这两个伪类的时候，写css样式的时候，请一定要保证你写的伪类的效果一定要和你当前的样式处在同一个层级，可以用 & 来代替。

如：如果用到了float 浮动，确保你的样式不会出现bug及错位，请请一定要为伪类清除浮动以及给伪类的样式加上

content: ''

,

没有这个content 你的样式是出不来的，因为需要填充在这里。

&:after {
content: '';
display: block;
clear: both;
}